@nok-integration/storefront-react 0.19.48 → 0.19.50

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,
@@ -10969,24 +11101,24 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
     })
   });
 }
-const showcase = "_showcase_12gts_14";
-const panel = "_panel_12gts_19";
-const image = "_image_12gts_65";
-const hero = "_hero_12gts_105";
-const heroContent = "_heroContent_12gts_190";
-const heroText = "_heroText_12gts_214";
-const logo = "_logo_12gts_223";
-const heroTitle = "_heroTitle_12gts_243";
-const heroSub = "_heroSub_12gts_267";
-const swipe = "_swipe_12gts_286";
-const swipeLabel = "_swipeLabel_12gts_293";
-const chevron$1 = "_chevron_12gts_299";
-const overlay$1 = "_overlay_12gts_11";
-const copy = "_copy_12gts_334";
-const title$2 = "_title_12gts_339";
-const subtitle$1 = "_subtitle_12gts_346";
-const cta = "_cta_12gts_352";
-const mosaic = "_mosaic_12gts_396";
+const showcase = "_showcase_jukpz_14";
+const panel = "_panel_jukpz_19";
+const image = "_image_jukpz_80";
+const hero = "_hero_jukpz_120";
+const heroContent = "_heroContent_jukpz_205";
+const heroText = "_heroText_jukpz_229";
+const logo = "_logo_jukpz_238";
+const heroTitle = "_heroTitle_jukpz_258";
+const heroSub = "_heroSub_jukpz_282";
+const swipe = "_swipe_jukpz_301";
+const swipeLabel = "_swipeLabel_jukpz_308";
+const chevron$1 = "_chevron_jukpz_314";
+const overlay$1 = "_overlay_jukpz_11";
+const copy = "_copy_jukpz_349";
+const title$2 = "_title_jukpz_354";
+const subtitle$1 = "_subtitle_jukpz_361";
+const cta = "_cta_jukpz_367";
+const mosaic = "_mosaic_jukpz_411";
 const styles$2 = {
   showcase,
   panel,
@@ -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;
@@ -3487,27 +3495,29 @@
   column-gap: var(--space-12);
   row-gap: var(--space-12);
 }
-._showcase_12gts_14 {
+._showcase_jukpz_14 {
   --chrome-bleed: calc(3 * (100lvh - 100svh));
   background: #080e12;
 }
-._panel_12gts_19 {
+._panel_jukpz_19 {
   position: relative;
   height: 100lvh;
   height: calc(100lvh + var(--chrome-bleed, 0px));
   scroll-snap-align: start;
   scroll-snap-stop: always;
+  scroll-margin-bottom: calc(-1 * var(--chrome-bleed, 0px));
   overflow: hidden;
   background: #080e12;
 }
-._panel_12gts_19:last-child {
+._panel_jukpz_19:last-child {
   height: 100dvh;
+  scroll-margin-bottom: 0;
 }
-._image_12gts_65 {
+._image_jukpz_80 {
   object-fit: cover;
   object-position: 50% var(--slide-focal-y, 50%);
 }
-._hero_12gts_105::after {
+._hero_jukpz_120::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -3522,7 +3532,7 @@
       rgba(8, 14, 18, 0) calc(520px + var(--chrome-bleed, 0px)));
   pointer-events: none;
 }
-._hero_12gts_105 ._heroContent_12gts_190 {
+._hero_jukpz_120 ._heroContent_jukpz_205 {
   position: absolute;
   bottom: 32px;
   bottom: calc(32px + var(--chrome-bleed, 0px) + 100lvh - 100dvh);
@@ -3534,7 +3544,7 @@
   gap: 24px;
   align-items: stretch;
 }
-._heroText_12gts_214 {
+._heroText_jukpz_229 {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -3542,11 +3552,11 @@
   padding: 0 24px;
   text-align: center;
 }
-._heroText_12gts_214 ._logo_12gts_223 {
+._heroText_jukpz_229 ._logo_jukpz_238 {
   width: 48px;
   height: 48px;
 }
-._heroTitle_12gts_243 {
+._heroTitle_jukpz_258 {
   width: 100%;
   margin: 0;
   font-family:
@@ -3561,33 +3571,33 @@
   letter-spacing: -1.12px;
   color: #f9fafa;
 }
-._heroSub_12gts_267 {
+._heroSub_jukpz_282 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
   max-width: 327px;
 }
-._swipe_12gts_286 {
+._swipe_jukpz_301 {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   padding: 8px 0;
 }
-._swipeLabel_12gts_293 {
+._swipeLabel_jukpz_308 {
   margin: 0;
   font-size: 14px;
   line-height: 1;
   color: rgba(255, 255, 255, 0.54);
 }
-._chevron_12gts_299 {
+._chevron_jukpz_314 {
   width: 24px;
   height: 24px;
   color: rgba(255, 255, 255, 0.54);
-  animation: _bob_12gts_1 1.8s ease-in-out infinite;
+  animation: _bob_jukpz_1 1.8s ease-in-out infinite;
 }
-@keyframes _bob_12gts_1 {
+@keyframes _bob_jukpz_1 {
   0%, 100% {
     transform: translateY(0);
   }
@@ -3595,7 +3605,7 @@
     transform: translateY(4px);
   }
 }
-._overlay_12gts_11 {
+._overlay_jukpz_11 {
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -3612,25 +3622,25 @@
   padding: 0 24px 24px;
   padding-bottom: calc(24px + var(--chrome-bleed, 0px) + 100lvh - 100dvh);
 }
-._copy_12gts_334 {
+._copy_jukpz_349 {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-._title_12gts_339 {
+._title_jukpz_354 {
   margin: 0;
   font-size: 32px;
   line-height: 1.2;
   font-weight: 700;
   color: #f9fafa;
 }
-._subtitle_12gts_346 {
+._subtitle_jukpz_361 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
 }
-._cta_12gts_352 {
+._cta_jukpz_367 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3644,19 +3654,19 @@
   font-weight: 700;
   text-decoration: none;
 }
-._cta_12gts_352::after {
+._cta_jukpz_367::after {
   content: "";
   position: absolute;
   inset: 0;
 }
-._cta_12gts_352:active {
+._cta_jukpz_367:active {
   background: rgba(249, 250, 250, 0.12);
 }
-._cta_12gts_352:focus-visible {
+._cta_jukpz_367:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
-._mosaic_12gts_396 {
+._mosaic_jukpz_411 {
   background: #080e12;
 }
 ._header_r9jjq_14 {