@nok-integration/storefront-react 0.19.49 → 0.19.50

package/dist/index.d.ts

@@ -2885,6 +2885,20 @@ declare function createClient(options: ClientOptions): {
                 images?: string[] | undefined;
                 return_status?: "reported" | "package_received" | "completed" | undefined;
             }[];
+            returns?: {
+                value: {
+                    amount: number;
+                    currency: string;
+                };
+                status: "reported" | "package_received" | "completed";
+                currency: string;
+                order_ref: string;
+                headline: string;
+                item_count: number;
+                return_ref: string;
+                reported_at: string;
+                images?: string[] | undefined;
+            }[] | undefined;
         }>;
         get: (orderRef: string) => Promise<{
             status: "packing" | "on_its_way" | "out_for_delivery" | "delivered" | "cancelled";
@@ -4217,6 +4231,14 @@ export declare function OrderListView(props: OrderListViewProps): JSX.Element;
 export declare interface OrderListViewProps {
     /** Opens one order. Without it the rows render as static cards rather than dead links. */
     onOpenOrder?: (orderRef: string) => void;
+    /**
+     * Opens one return, which is its own screen rather than the order's.
+     *
+     * Without it a return row renders as a static card. It is deliberately not defaulted to
+     * `onOpenOrder`: a fan tapping a return is asking about the return, and landing them on
+     * the order is a different answer to the question they asked.
+     */
+    onOpenReturn?: (returnRef: string) => void;
     /** The empty state's call to action — the design's "Continue shopping" button. */
     onStartShopping?: () => void;
     /** Overrides the provider's locale for dates. */
@@ -4247,16 +4269,10 @@ declare const OrderStatus: z.ZodEnum<["confirmed", "packed", "shipped", "deliver
 
 declare type OrderStatus = z.infer<typeof OrderStatus>;
 
-export declare function OrderStatusBadge({ status, returnStatus }: OrderStatusBadgeProps): JSX.Element;
+export declare function OrderStatusBadge({ status }: OrderStatusBadgeProps): JSX.Element;
 
 export declare interface OrderStatusBadgeProps {
     status: OrderProgressStep;
-    /**
-     * An open return against this order, when there is one. The engine omits it once every
-     * return has completed, so a value here always means "still outstanding" — this component
-     * does not have to decide which return statuses count as started.
-     */
-    returnStatus?: ReturnStatus;
 }
 
 /**
@@ -4581,7 +4597,7 @@ declare const Product: z.ZodObject<{
     }>;
     /**
      * Optional strike-through "was" price for a sale. Additive/optional: the engine only
-     * populates it once the pricing source is agreed. Display
+     * populates it once the pricing source is agreed (A2 — pricing contract). Display
      * only; never authoritative. Absent = not on sale.
      */
     compare_at: z.ZodOptional<z.ZodObject<{
@@ -5454,6 +5470,12 @@ declare const ReturnStatus: z.ZodEnum<["reported", "package_received", "complete
 
 declare type ReturnStatus = z.infer<typeof ReturnStatus>;
 
+export declare function ReturnStatusBadge({ status }: ReturnStatusBadgeProps): JSX.Element;
+
+export declare interface ReturnStatusBadgeProps {
+    status: ReturnStatus;
+}
+
 export declare function ReturnTrackingView({ ret, locale: localeProp }: ReturnTrackingViewProps): JSX.Element;
 
 export declare interface ReturnTrackingViewProps {

package/dist/index.mjs

@@ -4647,7 +4647,7 @@ function requireOrderTracking() {
     Object.defineProperty(exports, "__esModule", {
       value: true
     });
-    exports.ReturnDetail = exports.ReturnItem = exports.ReturnProgressEntry = exports.CreateReturnRequest = exports.ReturnRequestItem = exports.FanReturnReason = exports.RequestCancellationRequest = exports.FanCancelReason = exports.OrderDetail = exports.ReturnSummary = exports.OrderList = exports.OrderSummaryItem = exports.ReturnOutcome = exports.ReturnStatus = exports.OrderItem = exports.OrderTracking = exports.OrderProgressEntry = exports.OrderProgressStep = void 0;
+    exports.ReturnDetail = exports.ReturnItem = exports.ReturnProgressEntry = exports.CreateReturnRequest = exports.ReturnRequestItem = exports.FanReturnReason = exports.RequestCancellationRequest = exports.FanCancelReason = exports.OrderDetail = exports.ReturnSummary = exports.OrderList = exports.ReturnSummaryItem = exports.OrderSummaryItem = exports.ReturnOutcome = exports.ReturnStatus = exports.OrderItem = exports.OrderTracking = exports.OrderProgressEntry = exports.OrderProgressStep = void 0;
     const zod_1 = requireZod();
     const money_1 = requireMoney();
     const ids_1 = requireIds();
@@ -4693,8 +4693,20 @@ function requireOrderTracking() {
       images: zod_1.z.array(common_1.Url).max(3).optional(),
       return_status: exports.ReturnStatus.optional()
     });
+    exports.ReturnSummaryItem = zod_1.z.object({
+      return_ref: zod_1.z.string().min(1),
+      order_ref: ids_1.OrderRef,
+      status: exports.ReturnStatus,
+      reported_at: common_1.Timestamp,
+      currency: money_1.Currency,
+      headline: zod_1.z.string().min(1),
+      value: money_1.Money,
+      item_count: zod_1.z.number().int().nonnegative(),
+      images: zod_1.z.array(common_1.Url).max(3).optional()
+    });
     exports.OrderList = zod_1.z.object({
-      orders: zod_1.z.array(exports.OrderSummaryItem)
+      orders: zod_1.z.array(exports.OrderSummaryItem),
+      returns: zod_1.z.array(exports.ReturnSummaryItem).optional()
     });
     exports.ReturnSummary = zod_1.z.object({
       return_ref: zod_1.z.string().min(1),
@@ -5830,7 +5842,13 @@ const ES = {
   Delivered: "Entregado",
   Cancelled: "Cancelado",
   Refunded: "Reembolsado",
-  "In progress": "En curso"
+  "In progress": "En curso",
+  Return: "Devolución",
+  Initiated: "Iniciada",
+  Received: "Recibida",
+  Completed: "Completada",
+  item: "artículo",
+  items: "artículos"
 };
 const CATALOGUES = {
   es: ES
@@ -7040,7 +7058,7 @@ const line$1 = "_line_1pjby_6";
 const thumb$1 = "_thumb_1pjby_12";
 const img$1 = "_img_1pjby_22";
 const placeholder$7 = "_placeholder_1pjby_29";
-const meta$2 = "_meta_1pjby_34";
+const meta$3 = "_meta_1pjby_34";
 const name$2 = "_name_1pjby_43";
 const attrs$1 = "_attrs_1pjby_55";
 const price$3 = "_price_1pjby_63";
@@ -7051,7 +7069,7 @@ const styles$C = {
   thumb: thumb$1,
   img: img$1,
   placeholder: placeholder$7,
-  meta: meta$2,
+  meta: meta$3,
   name: name$2,
   attrs: attrs$1,
   price: price$3,
@@ -7423,7 +7441,7 @@ const item$1 = "_item_1l21t_38";
 const thumb = "_thumb_1l21t_53";
 const img = "_img_1l21t_63";
 const placeholder$6 = "_placeholder_1l21t_70";
-const meta$1 = "_meta_1l21t_75";
+const meta$2 = "_meta_1l21t_75";
 const name$1 = "_name_1l21t_83";
 const attrs = "_attrs_1l21t_103";
 const price$2 = "_price_1l21t_118";
@@ -7439,7 +7457,7 @@ const styles$z = {
   thumb,
   img,
   placeholder: placeholder$6,
-  meta: meta$1,
+  meta: meta$2,
   name: name$1,
   attrs,
   price: price$2,
@@ -8131,14 +8149,8 @@ const TONE = {
   delivered: "delivered",
   cancelled: "critical"
 };
-function OrderStatusBadge({ status, returnStatus }) {
+function OrderStatusBadge({ status }) {
   const t = useT();
-  if (returnStatus) {
-    return jsx("span", {
-      className: [styles$w.badge, styles$w.critical].join(" "),
-      children: t("Return started")
-    });
-  }
   const label2 = LABEL[status] ?? status.replace(/_/g, " ");
   const tone = TONE[status] ?? "progress";
   return jsx("span", {
@@ -8146,22 +8158,42 @@ function OrderStatusBadge({ status, returnStatus }) {
     children: t(label2)
   });
 }
-const page$1 = "_page_1bhfq_2";
-const empty = "_empty_1bhfq_22";
-const cta$1 = "_cta_1bhfq_32";
-const card$1 = "_card_1bhfq_55";
-const tappable = "_tappable_1bhfq_70";
-const head$1 = "_head_1bhfq_79";
-const heading = "_heading_1bhfq_87";
-const title$g = "_title_1bhfq_96";
-const date = "_date_1bhfq_115";
-const bottom$1 = "_bottom_1bhfq_120";
-const strip = "_strip_1bhfq_128";
-const tile$2 = "_tile_1bhfq_133";
-const image$8 = "_image_1bhfq_143";
-const placeholder$5 = "_placeholder_1bhfq_150";
-const more = "_more_1bhfq_157";
-const chevron$2 = "_chevron_1bhfq_170";
+const RETURN_LABEL = {
+  reported: "Initiated",
+  package_received: "Received",
+  completed: "Completed"
+};
+const RETURN_TONE = {
+  reported: "progress",
+  package_received: "progress",
+  completed: "delivered"
+};
+function ReturnStatusBadge({ status }) {
+  const t = useT();
+  const label2 = RETURN_LABEL[status] ?? status.replace(/_/g, " ");
+  const tone = RETURN_TONE[status] ?? "progress";
+  return jsx("span", {
+    className: [styles$w.badge, styles$w[tone]].join(" "),
+    children: t(label2)
+  });
+}
+const page$1 = "_page_qj11j_2";
+const empty = "_empty_qj11j_22";
+const cta$1 = "_cta_qj11j_32";
+const card$1 = "_card_qj11j_55";
+const tappable = "_tappable_qj11j_70";
+const head$1 = "_head_qj11j_79";
+const heading = "_heading_qj11j_87";
+const title$g = "_title_qj11j_96";
+const date = "_date_qj11j_115";
+const bottom$1 = "_bottom_qj11j_120";
+const strip = "_strip_qj11j_128";
+const meta$1 = "_meta_qj11j_141";
+const tile$2 = "_tile_qj11j_150";
+const image$8 = "_image_qj11j_160";
+const placeholder$5 = "_placeholder_qj11j_167";
+const more = "_more_qj11j_174";
+const chevron$2 = "_chevron_qj11j_187";
 const styles$v = {
   page: page$1,
   empty,
@@ -8174,6 +8206,7 @@ const styles$v = {
   date,
   bottom: bottom$1,
   strip,
+  meta: meta$1,
   tile: tile$2,
   image: image$8,
   placeholder: placeholder$5,
@@ -8206,18 +8239,20 @@ function OrderListView(props) {
     })
   });
 }
-function OrderListContent({ onOpenOrder, onStartShopping, locale: localeProp }) {
+function OrderListContent({ onOpenOrder, onOpenReturn, onStartShopping, locale: localeProp }) {
   const t = useT();
   const { api } = useShop();
   const locale = useLocale(localeProp);
   const [orders2, setOrders] = useState([]);
+  const [returns, setReturns] = useState([]);
   const [state, setState] = useState("loading");
   const [errorCode, setErrorCode] = useState(void 0);
   const load = useCallback(async () => {
     setState("loading");
     try {
-      const { orders: rows } = await api.orders.list();
-      setOrders(rows);
+      const { orders: rows2, returns: returned } = await api.orders.list();
+      setOrders(rows2);
+      setReturns(returned ?? []);
       setState("ready");
     } catch (err) {
       setErrorCode(codeOf(err));
@@ -8248,7 +8283,7 @@ function OrderListContent({ onOpenOrder, onStartShopping, locale: localeProp })
       onRetry: () => void load()
     });
   }
-  if (orders2.length === 0) {
+  if (orders2.length === 0 && returns.length === 0) {
     return jsx("div", {
       className: styles$v.empty,
       children: jsx(EmptyState, {
@@ -8265,17 +8300,115 @@ function OrderListContent({ onOpenOrder, onStartShopping, locale: localeProp })
       })
     });
   }
+  const rows = [...orders2.map((order) => ({
+    at: order.placed_at,
+    key: `o:${order.order_ref}`,
+    order
+  })), ...returns.map((ret) => ({
+    at: ret.reported_at,
+    key: `r:${ret.return_ref}`,
+    ret
+  }))].sort((a, b) => Date.parse(b.at) - Date.parse(a.at));
   return jsx("ul", {
     className: styles$v.page,
-    children: orders2.map((order) => jsx("li", {
-      children: jsx(OrderCard, {
-        order,
+    children: rows.map((row2) => jsx("li", {
+      children: "order" in row2 ? jsx(OrderCard, {
+        order: row2.order,
         locale,
         ...onOpenOrder ? {
-          onOpen: () => onOpenOrder(order.order_ref)
+          onOpen: () => onOpenOrder(row2.order.order_ref)
+        } : {}
+      }) : jsx(ReturnCard, {
+        ret: row2.ret,
+        locale,
+        ...onOpenReturn ? {
+          onOpen: () => onOpenReturn(row2.ret.return_ref)
         } : {}
       })
-    }, order.order_ref))
+    }, row2.key))
+  });
+}
+function ReturnCard({ ret, locale, onOpen }) {
+  const t = useT();
+  const { format: money2 } = useMoney(locale);
+  const items2 = `${ret.item_count} ${ret.item_count === 1 ? t("item") : t("items")}`;
+  const body3 = jsxs(Fragment, {
+    children: [jsxs("div", {
+      className: styles$v.head,
+      children: [jsxs("div", {
+        className: styles$v.heading,
+        children: [jsx("span", {
+          className: styles$v.title,
+          children: `${t("Return")} #${shortRef(ret.return_ref)}`
+        }), jsx("span", {
+          className: styles$v.date,
+          children: formatPlaced(ret.reported_at, locale)
+        })]
+      }), jsx(ReturnStatusBadge, {
+        status: ret.status
+      })]
+    }), jsxs("div", {
+      className: styles$v.bottom,
+      children: [jsx(ReturnThumbnails, {
+        ret
+      }), jsx("span", {
+        className: styles$v.meta,
+        children: `${items2} · ${money2(ret.value)}`
+      }), onOpen && jsx("span", {
+        className: styles$v.chevron,
+        children: jsx(Chevron, {})
+      })]
+    })]
+  });
+  if (!onOpen) return jsx("div", {
+    className: styles$v.card,
+    children: body3
+  });
+  return jsx("button", {
+    type: "button",
+    className: [styles$v.card, styles$v.tappable].join(" "),
+    onClick: onOpen,
+    "aria-label": `${t("Return")} ${shortRef(ret.return_ref)}, ${ret.headline}`,
+    children: body3
+  });
+}
+function ReturnThumbnails({ ret }) {
+  const images = ret.images ?? [];
+  const hidden = ret.item_count - TILES + 1;
+  const overflow = images.length >= TILES && hidden > 1 ? hidden : 0;
+  if (images.length === 0) {
+    return jsx("div", {
+      className: styles$v.strip,
+      children: jsx("div", {
+        className: [styles$v.tile, styles$v.placeholder].join(" "),
+        "aria-hidden": "true"
+      })
+    });
+  }
+  return jsx("div", {
+    className: styles$v.strip,
+    children: images.map((src, i) => {
+      const last = i === images.length - 1;
+      return jsxs("div", {
+        className: styles$v.tile,
+        children: [jsx(ShopImage, {
+          src,
+          alt: "",
+          fill: true,
+          sizes: "56px",
+          className: styles$v.image
+        }), overflow > 0 && last && jsxs("span", {
+          className: styles$v.more,
+          children: [jsxs("span", {
+            "aria-hidden": "true",
+            children: ["+", overflow]
+          }), jsx("span", {
+            className: "visually-hidden",
+            children: `and ${overflow} more items`
+          })]
+        })]
+      }, `${src}-${i}`);
+    })
   });
 }
 function OrderCard({ order, locale, onOpen }) {
@@ -8292,8 +8425,7 @@ function OrderCard({ order, locale, onOpen }) {
           children: formatPlaced(order.placed_at, locale)
         })]
       }), jsx(OrderStatusBadge, {
-        status: order.status,
-        returnStatus: order.return_status
+        status: order.status
       })]
     }), jsxs("div", {
       className: styles$v.bottom,
@@ -11710,6 +11842,7 @@ export {
   ReturnFlowView,
   ReturnItemsView,
   ReturnLabelView,
+  ReturnStatusBadge,
   ReturnTrackingView,
   ReviewCarousel,
   SaleBadge,

package/dist/standalone/storefront.mjs

@@ -4647,7 +4647,7 @@ function requireOrderTracking() {
     Object.defineProperty(exports, "__esModule", {
       value: true
     });
-    exports.ReturnDetail = exports.ReturnItem = exports.ReturnProgressEntry = exports.CreateReturnRequest = exports.ReturnRequestItem = exports.FanReturnReason = exports.RequestCancellationRequest = exports.FanCancelReason = exports.OrderDetail = exports.ReturnSummary = exports.OrderList = exports.OrderSummaryItem = exports.ReturnOutcome = exports.ReturnStatus = exports.OrderItem = exports.OrderTracking = exports.OrderProgressEntry = exports.OrderProgressStep = void 0;
+    exports.ReturnDetail = exports.ReturnItem = exports.ReturnProgressEntry = exports.CreateReturnRequest = exports.ReturnRequestItem = exports.FanReturnReason = exports.RequestCancellationRequest = exports.FanCancelReason = exports.OrderDetail = exports.ReturnSummary = exports.OrderList = exports.ReturnSummaryItem = exports.OrderSummaryItem = exports.ReturnOutcome = exports.ReturnStatus = exports.OrderItem = exports.OrderTracking = exports.OrderProgressEntry = exports.OrderProgressStep = void 0;
     const zod_1 = requireZod();
     const money_1 = requireMoney();
     const ids_1 = requireIds();
@@ -4693,8 +4693,20 @@ function requireOrderTracking() {
       images: zod_1.z.array(common_1.Url).max(3).optional(),
       return_status: exports.ReturnStatus.optional()
     });
+    exports.ReturnSummaryItem = zod_1.z.object({
+      return_ref: zod_1.z.string().min(1),
+      order_ref: ids_1.OrderRef,
+      status: exports.ReturnStatus,
+      reported_at: common_1.Timestamp,
+      currency: money_1.Currency,
+      headline: zod_1.z.string().min(1),
+      value: money_1.Money,
+      item_count: zod_1.z.number().int().nonnegative(),
+      images: zod_1.z.array(common_1.Url).max(3).optional()
+    });
     exports.OrderList = zod_1.z.object({
-      orders: zod_1.z.array(exports.OrderSummaryItem)
+      orders: zod_1.z.array(exports.OrderSummaryItem),
+      returns: zod_1.z.array(exports.ReturnSummaryItem).optional()
     });
     exports.ReturnSummary = zod_1.z.object({
       return_ref: zod_1.z.string().min(1),
@@ -5830,7 +5842,13 @@ const ES = {
   Delivered: "Entregado",
   Cancelled: "Cancelado",
   Refunded: "Reembolsado",
-  "In progress": "En curso"
+  "In progress": "En curso",
+  Return: "Devolución",
+  Initiated: "Iniciada",
+  Received: "Recibida",
+  Completed: "Completada",
+  item: "artículo",
+  items: "artículos"
 };
 const CATALOGUES = {
   es: ES
@@ -7040,7 +7058,7 @@ const line$1 = "_line_1pjby_6";
 const thumb$1 = "_thumb_1pjby_12";
 const img$1 = "_img_1pjby_22";
 const placeholder$7 = "_placeholder_1pjby_29";
-const meta$2 = "_meta_1pjby_34";
+const meta$3 = "_meta_1pjby_34";
 const name$2 = "_name_1pjby_43";
 const attrs$1 = "_attrs_1pjby_55";
 const price$3 = "_price_1pjby_63";
@@ -7051,7 +7069,7 @@ const styles$C = {
   thumb: thumb$1,
   img: img$1,
   placeholder: placeholder$7,
-  meta: meta$2,
+  meta: meta$3,
   name: name$2,
   attrs: attrs$1,
   price: price$3,
@@ -7423,7 +7441,7 @@ const item$1 = "_item_1l21t_38";
 const thumb = "_thumb_1l21t_53";
 const img = "_img_1l21t_63";
 const placeholder$6 = "_placeholder_1l21t_70";
-const meta$1 = "_meta_1l21t_75";
+const meta$2 = "_meta_1l21t_75";
 const name$1 = "_name_1l21t_83";
 const attrs = "_attrs_1l21t_103";
 const price$2 = "_price_1l21t_118";
@@ -7439,7 +7457,7 @@ const styles$z = {
   thumb,
   img,
   placeholder: placeholder$6,
-  meta: meta$1,
+  meta: meta$2,
   name: name$1,
   attrs,
   price: price$2,
@@ -8131,14 +8149,8 @@ const TONE = {
   delivered: "delivered",
   cancelled: "critical"
 };
-function OrderStatusBadge({ status, returnStatus }) {
+function OrderStatusBadge({ status }) {
   const t = useT();
-  if (returnStatus) {
-    return jsx("span", {
-      className: [styles$w.badge, styles$w.critical].join(" "),
-      children: t("Return started")
-    });
-  }
   const label2 = LABEL[status] ?? status.replace(/_/g, " ");
   const tone = TONE[status] ?? "progress";
   return jsx("span", {
@@ -8146,22 +8158,42 @@ function OrderStatusBadge({ status, returnStatus }) {
     children: t(label2)
   });
 }
-const page$1 = "_page_1bhfq_2";
-const empty = "_empty_1bhfq_22";
-const cta$1 = "_cta_1bhfq_32";
-const card$1 = "_card_1bhfq_55";
-const tappable = "_tappable_1bhfq_70";
-const head$1 = "_head_1bhfq_79";
-const heading = "_heading_1bhfq_87";
-const title$g = "_title_1bhfq_96";
-const date = "_date_1bhfq_115";
-const bottom$1 = "_bottom_1bhfq_120";
-const strip = "_strip_1bhfq_128";
-const tile$2 = "_tile_1bhfq_133";
-const image$8 = "_image_1bhfq_143";
-const placeholder$5 = "_placeholder_1bhfq_150";
-const more = "_more_1bhfq_157";
-const chevron$2 = "_chevron_1bhfq_170";
+const RETURN_LABEL = {
+  reported: "Initiated",
+  package_received: "Received",
+  completed: "Completed"
+};
+const RETURN_TONE = {
+  reported: "progress",
+  package_received: "progress",
+  completed: "delivered"
+};
+function ReturnStatusBadge({ status }) {
+  const t = useT();
+  const label2 = RETURN_LABEL[status] ?? status.replace(/_/g, " ");
+  const tone = RETURN_TONE[status] ?? "progress";
+  return jsx("span", {
+    className: [styles$w.badge, styles$w[tone]].join(" "),
+    children: t(label2)
+  });
+}
+const page$1 = "_page_qj11j_2";
+const empty = "_empty_qj11j_22";
+const cta$1 = "_cta_qj11j_32";
+const card$1 = "_card_qj11j_55";
+const tappable = "_tappable_qj11j_70";
+const head$1 = "_head_qj11j_79";
+const heading = "_heading_qj11j_87";
+const title$g = "_title_qj11j_96";
+const date = "_date_qj11j_115";
+const bottom$1 = "_bottom_qj11j_120";
+const strip = "_strip_qj11j_128";
+const meta$1 = "_meta_qj11j_141";
+const tile$2 = "_tile_qj11j_150";
+const image$8 = "_image_qj11j_160";
+const placeholder$5 = "_placeholder_qj11j_167";
+const more = "_more_qj11j_174";
+const chevron$2 = "_chevron_qj11j_187";
 const styles$v = {
   page: page$1,
   empty,
@@ -8174,6 +8206,7 @@ const styles$v = {
   date,
   bottom: bottom$1,
   strip,
+  meta: meta$1,
   tile: tile$2,
   image: image$8,
   placeholder: placeholder$5,
@@ -8206,18 +8239,20 @@ function OrderListView(props) {
     })
   });
 }
-function OrderListContent({ onOpenOrder, onStartShopping, locale: localeProp }) {
+function OrderListContent({ onOpenOrder, onOpenReturn, onStartShopping, locale: localeProp }) {
   const t = useT();
   const { api } = useShop();
   const locale = useLocale(localeProp);
   const [orders2, setOrders] = useState([]);
+  const [returns, setReturns] = useState([]);
   const [state, setState] = useState("loading");
   const [errorCode, setErrorCode] = useState(void 0);
   const load = useCallback(async () => {
     setState("loading");
     try {
-      const { orders: rows } = await api.orders.list();
-      setOrders(rows);
+      const { orders: rows2, returns: returned } = await api.orders.list();
+      setOrders(rows2);
+      setReturns(returned ?? []);
       setState("ready");
     } catch (err) {
       setErrorCode(codeOf(err));
@@ -8248,7 +8283,7 @@ function OrderListContent({ onOpenOrder, onStartShopping, locale: localeProp })
       onRetry: () => void load()
     });
   }
-  if (orders2.length === 0) {
+  if (orders2.length === 0 && returns.length === 0) {
     return jsx("div", {
       className: styles$v.empty,
       children: jsx(EmptyState, {
@@ -8265,17 +8300,115 @@ function OrderListContent({ onOpenOrder, onStartShopping, locale: localeProp })
       })
     });
   }
+  const rows = [...orders2.map((order) => ({
+    at: order.placed_at,
+    key: `o:${order.order_ref}`,
+    order
+  })), ...returns.map((ret) => ({
+    at: ret.reported_at,
+    key: `r:${ret.return_ref}`,
+    ret
+  }))].sort((a, b) => Date.parse(b.at) - Date.parse(a.at));
   return jsx("ul", {
     className: styles$v.page,
-    children: orders2.map((order) => jsx("li", {
-      children: jsx(OrderCard, {
-        order,
+    children: rows.map((row2) => jsx("li", {
+      children: "order" in row2 ? jsx(OrderCard, {
+        order: row2.order,
         locale,
         ...onOpenOrder ? {
-          onOpen: () => onOpenOrder(order.order_ref)
+          onOpen: () => onOpenOrder(row2.order.order_ref)
+        } : {}
+      }) : jsx(ReturnCard, {
+        ret: row2.ret,
+        locale,
+        ...onOpenReturn ? {
+          onOpen: () => onOpenReturn(row2.ret.return_ref)
         } : {}
       })
-    }, order.order_ref))
+    }, row2.key))
+  });
+}
+function ReturnCard({ ret, locale, onOpen }) {
+  const t = useT();
+  const { format: money2 } = useMoney(locale);
+  const items2 = `${ret.item_count} ${ret.item_count === 1 ? t("item") : t("items")}`;
+  const body3 = jsxs(Fragment, {
+    children: [jsxs("div", {
+      className: styles$v.head,
+      children: [jsxs("div", {
+        className: styles$v.heading,
+        children: [jsx("span", {
+          className: styles$v.title,
+          children: `${t("Return")} #${shortRef(ret.return_ref)}`
+        }), jsx("span", {
+          className: styles$v.date,
+          children: formatPlaced(ret.reported_at, locale)
+        })]
+      }), jsx(ReturnStatusBadge, {
+        status: ret.status
+      })]
+    }), jsxs("div", {
+      className: styles$v.bottom,
+      children: [jsx(ReturnThumbnails, {
+        ret
+      }), jsx("span", {
+        className: styles$v.meta,
+        children: `${items2} · ${money2(ret.value)}`
+      }), onOpen && jsx("span", {
+        className: styles$v.chevron,
+        children: jsx(Chevron, {})
+      })]
+    })]
+  });
+  if (!onOpen) return jsx("div", {
+    className: styles$v.card,
+    children: body3
+  });
+  return jsx("button", {
+    type: "button",
+    className: [styles$v.card, styles$v.tappable].join(" "),
+    onClick: onOpen,
+    "aria-label": `${t("Return")} ${shortRef(ret.return_ref)}, ${ret.headline}`,
+    children: body3
+  });
+}
+function ReturnThumbnails({ ret }) {
+  const images = ret.images ?? [];
+  const hidden = ret.item_count - TILES + 1;
+  const overflow = images.length >= TILES && hidden > 1 ? hidden : 0;
+  if (images.length === 0) {
+    return jsx("div", {
+      className: styles$v.strip,
+      children: jsx("div", {
+        className: [styles$v.tile, styles$v.placeholder].join(" "),
+        "aria-hidden": "true"
+      })
+    });
+  }
+  return jsx("div", {
+    className: styles$v.strip,
+    children: images.map((src, i) => {
+      const last = i === images.length - 1;
+      return jsxs("div", {
+        className: styles$v.tile,
+        children: [jsx(ShopImage, {
+          src,
+          alt: "",
+          fill: true,
+          sizes: "56px",
+          className: styles$v.image
+        }), overflow > 0 && last && jsxs("span", {
+          className: styles$v.more,
+          children: [jsxs("span", {
+            "aria-hidden": "true",
+            children: ["+", overflow]
+          }), jsx("span", {
+            className: "visually-hidden",
+            children: `and ${overflow} more items`
+          })]
+        })]
+      }, `${src}-${i}`);
+    })
   });
 }
 function OrderCard({ order, locale, onOpen }) {
@@ -8292,8 +8425,7 @@ function OrderCard({ order, locale, onOpen }) {
           children: formatPlaced(order.placed_at, locale)
         })]
       }), jsx(OrderStatusBadge, {
-        status: order.status,
-        returnStatus: order.return_status
+        status: order.status
       })]
     }), jsxs("div", {
       className: styles$v.bottom,
@@ -11710,6 +11842,7 @@ export {
   ReturnFlowView,
   ReturnItemsView,
   ReturnLabelView,
+  ReturnStatusBadge,
   ReturnTrackingView,
   ReviewCarousel,
   SaleBadge,

package/dist/standalone/styles.css

@@ -1645,7 +1645,7 @@
   background: var(--color-state-surface-critical-soft);
   color: var(--color-state-text-critical);
 }
-._page_1bhfq_2 {
+._page_qj11j_2 {
   list-style: none;
   margin: 0;
   display: flex;
@@ -1653,14 +1653,14 @@
   gap: var(--space-12);
   padding: var(--space-16) var(--space-16) var(--space-24);
 }
-._empty_1bhfq_22 {
+._empty_qj11j_22 {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: calc(100dvh - var(--header-height) - var(--space-32));
   padding-bottom: var(--space-32);
 }
-._cta_1bhfq_32 {
+._cta_qj11j_32 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1677,11 +1677,11 @@
   line-height: 1;
   cursor: pointer;
 }
-._cta_1bhfq_32:focus-visible {
+._cta_qj11j_32:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
-._card_1bhfq_55 {
+._card_qj11j_55 {
   display: flex;
   flex-direction: column;
   gap: var(--space-24);
@@ -1695,21 +1695,21 @@
   text-align: left;
   overflow: hidden;
 }
-._tappable_1bhfq_70 {
+._tappable_qj11j_70 {
   cursor: pointer;
 }
-._tappable_1bhfq_70:focus-visible {
+._tappable_qj11j_70:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
-._head_1bhfq_79 {
+._head_qj11j_79 {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: var(--space-8);
   width: 100%;
 }
-._heading_1bhfq_87 {
+._heading_qj11j_87 {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
@@ -1717,7 +1717,7 @@
   min-width: 0;
   color: var(--color-text-default);
 }
-._title_1bhfq_96 {
+._title_qj11j_96 {
   font-size: var(--type-heading-md-size);
   font-weight: var(--font-weight-bold);
   line-height: 1.32;
@@ -1725,22 +1725,30 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-._date_1bhfq_115 {
+._date_qj11j_115 {
   font-size: var(--type-trimmed-sm-size);
   line-height: 10px;
 }
-._bottom_1bhfq_120 {
+._bottom_qj11j_120 {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-8);
   width: 100%;
 }
-._strip_1bhfq_128 {
+._strip_qj11j_128 {
   display: flex;
   gap: var(--space-6);
 }
-._tile_1bhfq_133 {
+._meta_qj11j_141 {
+  flex: 1 1 auto;
+  text-align: right;
+  font-size: var(--type-trimmed-sm-size);
+  color: var(--color-text-subtle);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+._tile_qj11j_150 {
   position: relative;
   flex: 0 0 56px;
   width: 56px;
@@ -1749,14 +1757,14 @@
   overflow: hidden;
   background: var(--color-surface-subtle);
 }
-._image_1bhfq_143 {
+._image_qj11j_160 {
   object-fit: cover;
   object-position: top;
 }
-._placeholder_1bhfq_150 {
+._placeholder_qj11j_167 {
   background: var(--color-surface-subtle);
 }
-._more_1bhfq_157 {
+._more_qj11j_174 {
   position: absolute;
   inset: 0;
   display: flex;
@@ -1768,7 +1776,7 @@
   font-weight: var(--font-weight-bold);
   line-height: 1;
 }
-._chevron_1bhfq_170 {
+._chevron_qj11j_187 {
   display: inline-flex;
   flex: 0 0 24px;
   width: 24px;

package/dist/styles.css

@@ -1645,7 +1645,7 @@
   background: var(--color-state-surface-critical-soft);
   color: var(--color-state-text-critical);
 }
-._page_1bhfq_2 {
+._page_qj11j_2 {
   list-style: none;
   margin: 0;
   display: flex;
@@ -1653,14 +1653,14 @@
   gap: var(--space-12);
   padding: var(--space-16) var(--space-16) var(--space-24);
 }
-._empty_1bhfq_22 {
+._empty_qj11j_22 {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: calc(100dvh - var(--header-height) - var(--space-32));
   padding-bottom: var(--space-32);
 }
-._cta_1bhfq_32 {
+._cta_qj11j_32 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1677,11 +1677,11 @@
   line-height: 1;
   cursor: pointer;
 }
-._cta_1bhfq_32:focus-visible {
+._cta_qj11j_32:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
-._card_1bhfq_55 {
+._card_qj11j_55 {
   display: flex;
   flex-direction: column;
   gap: var(--space-24);
@@ -1695,21 +1695,21 @@
   text-align: left;
   overflow: hidden;
 }
-._tappable_1bhfq_70 {
+._tappable_qj11j_70 {
   cursor: pointer;
 }
-._tappable_1bhfq_70:focus-visible {
+._tappable_qj11j_70:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
-._head_1bhfq_79 {
+._head_qj11j_79 {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: var(--space-8);
   width: 100%;
 }
-._heading_1bhfq_87 {
+._heading_qj11j_87 {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
@@ -1717,7 +1717,7 @@
   min-width: 0;
   color: var(--color-text-default);
 }
-._title_1bhfq_96 {
+._title_qj11j_96 {
   font-size: var(--type-heading-md-size);
   font-weight: var(--font-weight-bold);
   line-height: 1.32;
@@ -1725,22 +1725,30 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-._date_1bhfq_115 {
+._date_qj11j_115 {
   font-size: var(--type-trimmed-sm-size);
   line-height: 10px;
 }
-._bottom_1bhfq_120 {
+._bottom_qj11j_120 {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-8);
   width: 100%;
 }
-._strip_1bhfq_128 {
+._strip_qj11j_128 {
   display: flex;
   gap: var(--space-6);
 }
-._tile_1bhfq_133 {
+._meta_qj11j_141 {
+  flex: 1 1 auto;
+  text-align: right;
+  font-size: var(--type-trimmed-sm-size);
+  color: var(--color-text-subtle);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+._tile_qj11j_150 {
   position: relative;
   flex: 0 0 56px;
   width: 56px;
@@ -1749,14 +1757,14 @@
   overflow: hidden;
   background: var(--color-surface-subtle);
 }
-._image_1bhfq_143 {
+._image_qj11j_160 {
   object-fit: cover;
   object-position: top;
 }
-._placeholder_1bhfq_150 {
+._placeholder_qj11j_167 {
   background: var(--color-surface-subtle);
 }
-._more_1bhfq_157 {
+._more_qj11j_174 {
   position: absolute;
   inset: 0;
   display: flex;
@@ -1768,7 +1776,7 @@
   font-weight: var(--font-weight-bold);
   line-height: 1;
 }
-._chevron_1bhfq_170 {
+._chevron_qj11j_187 {
   display: inline-flex;
   flex: 0 0 24px;
   width: 24px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nok-integration/storefront-react",
-  "version": "0.19.49",
+  "version": "0.19.50",
   "description": "Mountable React storefront components: catalogue, product detail and cart, mounted directly into a host DOM tree. No iframe.",
   "license": "UNLICENSED",
   "type": "module",