@nok-integration/storefront-react 0.19.7 → 0.19.8

package/dist/index.d.ts

@@ -3693,11 +3693,20 @@ declare const OrderDetail: z.ZodObject<{
             currency: string;
         }>;
         /**
-         * The undiscounted per-unit price, echoed from intake. Display only.
+         * The undiscounted per-unit price. Display only.
          *
-         * Drawn as a struck-through price with a saving badge beside what was paid. Absent
-         * means the line was sold at full price, which is the ordinary case; see `OrderLine`
-         * for why this is DAZN's figure and not our catalogue's.
+         * Drawn as a struck-through price with a saving badge beside what was paid. Absent means
+         * the line was sold at full price.
+         *
+         * **Two possible sources, and the screen cannot tell them apart.** It is the
+         * `compare_at_unit_price` stated on the order where one was sent, and the catalogue's
+         * current compare-at for the order's currency where it was not. The second exists
+         * because the first is not yet populated, and it carries a caveat the first does not: a
+         * catalogue price moves with merchandising, so this figure can differ between two reads
+         * of the same order. What was *paid* never moves.
+         *
+         * Always strictly greater than `unit_price` when present — a compare-at at or below what
+         * was paid is dropped rather than drawn as a saving of zero or less.
          */
         compare_at_unit_price: z.ZodOptional<z.ZodObject<{
             amount: z.ZodNumber;

package/dist/index.mjs

@@ -6473,22 +6473,23 @@ function renderValue(key, pricing, format, t) {
   }
   return key === "discount" ? null : format(pricing[key]);
 }
-const lines$1 = "_lines_7mr8w_19";
-const line$2 = "_line_7mr8w_19";
-const thumb$2 = "_thumb_7mr8w_34";
-const image$9 = "_image_7mr8w_44";
-const placeholder$8 = "_placeholder_7mr8w_48";
-const lineBody = "_lineBody_7mr8w_53";
-const lineText = "_lineText_7mr8w_62";
-const lineTitle = "_lineTitle_7mr8w_72";
-const lineMeta = "_lineMeta_7mr8w_91";
-const linePrice = "_linePrice_7mr8w_106";
-const paid$3 = "_paid_7mr8w_118";
-const was$4 = "_was_7mr8w_124";
-const card$4 = "_card_7mr8w_144";
-const cardTitle = "_cardTitle_7mr8w_152";
-const cardBody = "_cardBody_7mr8w_164";
-const summaryCard = "_summaryCard_7mr8w_136";
+const lines$1 = "_lines_1vmnm_19";
+const line$2 = "_line_1vmnm_19";
+const thumb$2 = "_thumb_1vmnm_34";
+const image$9 = "_image_1vmnm_44";
+const placeholder$8 = "_placeholder_1vmnm_48";
+const lineBody = "_lineBody_1vmnm_53";
+const lineText = "_lineText_1vmnm_62";
+const lineTitle = "_lineTitle_1vmnm_72";
+const lineMeta = "_lineMeta_1vmnm_104";
+const detail$1 = "_detail_1vmnm_101";
+const linePrice = "_linePrice_1vmnm_125";
+const paid$3 = "_paid_1vmnm_137";
+const was$4 = "_was_1vmnm_150";
+const card$4 = "_card_1vmnm_173";
+const cardTitle = "_cardTitle_1vmnm_181";
+const cardBody = "_cardBody_1vmnm_193";
+const summaryCard = "_summaryCard_1vmnm_165";
 const styles$D = {
   lines: lines$1,
   line: line$2,
@@ -6499,6 +6500,7 @@ const styles$D = {
   lineText,
   lineTitle,
   lineMeta,
+  detail: detail$1,
   linePrice,
   paid: paid$3,
   was: was$4,
@@ -6550,6 +6552,7 @@ function OrderLine({ item: item2 }) {
         }), jsxs("span", {
           className: styles$D.lineMeta,
           children: [details2.map((detail2) => jsx("span", {
+            className: styles$D.detail,
             children: detail2
           }, detail2)), pct !== void 0 && jsx(SaleBadge, {
             pct

package/dist/standalone/storefront.mjs

@@ -6473,22 +6473,23 @@ function renderValue(key, pricing, format, t) {
   }
   return key === "discount" ? null : format(pricing[key]);
 }
-const lines$1 = "_lines_7mr8w_19";
-const line$2 = "_line_7mr8w_19";
-const thumb$2 = "_thumb_7mr8w_34";
-const image$9 = "_image_7mr8w_44";
-const placeholder$8 = "_placeholder_7mr8w_48";
-const lineBody = "_lineBody_7mr8w_53";
-const lineText = "_lineText_7mr8w_62";
-const lineTitle = "_lineTitle_7mr8w_72";
-const lineMeta = "_lineMeta_7mr8w_91";
-const linePrice = "_linePrice_7mr8w_106";
-const paid$3 = "_paid_7mr8w_118";
-const was$4 = "_was_7mr8w_124";
-const card$4 = "_card_7mr8w_144";
-const cardTitle = "_cardTitle_7mr8w_152";
-const cardBody = "_cardBody_7mr8w_164";
-const summaryCard = "_summaryCard_7mr8w_136";
+const lines$1 = "_lines_1vmnm_19";
+const line$2 = "_line_1vmnm_19";
+const thumb$2 = "_thumb_1vmnm_34";
+const image$9 = "_image_1vmnm_44";
+const placeholder$8 = "_placeholder_1vmnm_48";
+const lineBody = "_lineBody_1vmnm_53";
+const lineText = "_lineText_1vmnm_62";
+const lineTitle = "_lineTitle_1vmnm_72";
+const lineMeta = "_lineMeta_1vmnm_104";
+const detail$1 = "_detail_1vmnm_101";
+const linePrice = "_linePrice_1vmnm_125";
+const paid$3 = "_paid_1vmnm_137";
+const was$4 = "_was_1vmnm_150";
+const card$4 = "_card_1vmnm_173";
+const cardTitle = "_cardTitle_1vmnm_181";
+const cardBody = "_cardBody_1vmnm_193";
+const summaryCard = "_summaryCard_1vmnm_165";
 const styles$D = {
   lines: lines$1,
   line: line$2,
@@ -6499,6 +6500,7 @@ const styles$D = {
   lineText,
   lineTitle,
   lineMeta,
+  detail: detail$1,
   linePrice,
   paid: paid$3,
   was: was$4,
@@ -6550,6 +6552,7 @@ function OrderLine({ item: item2 }) {
         }), jsxs("span", {
           className: styles$D.lineMeta,
           children: [details2.map((detail2) => jsx("span", {
+            className: styles$D.detail,
             children: detail2
           }, detail2)), pct !== void 0 && jsx(SaleBadge, {
             pct

package/dist/standalone/styles.css

@@ -683,7 +683,7 @@
 ._row_1hsxt_16._discount_1hsxt_69 dd {
   color: var(--color-state-text-success);
 }
-._lines_7mr8w_19 {
+._lines_1vmnm_19 {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -691,12 +691,12 @@
   flex-direction: column;
   gap: var(--space-16);
 }
-._line_7mr8w_19 {
+._line_1vmnm_19 {
   display: flex;
   align-items: center;
   gap: var(--space-12);
 }
-._thumb_7mr8w_34 {
+._thumb_1vmnm_34 {
   position: relative;
   flex-shrink: 0;
   width: 48px;
@@ -705,14 +705,14 @@
   overflow: hidden;
   background: var(--color-surface-soft);
 }
-._image_7mr8w_44 {
+._image_1vmnm_44 {
   object-fit: cover;
 }
-._placeholder_7mr8w_48 {
+._placeholder_1vmnm_48 {
   width: 100%;
   height: 100%;
 }
-._lineBody_7mr8w_53 {
+._lineBody_1vmnm_53 {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
@@ -720,14 +720,14 @@
   flex: 1 1 0;
   min-width: 0;
 }
-._lineText_7mr8w_62 {
+._lineText_1vmnm_62 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
   flex: 1 1 0;
   min-width: 0;
 }
-._lineTitle_7mr8w_72 {
+._lineTitle_1vmnm_72 {
   margin: -6px 0;
   padding: 6px 0;
   font-size: var(--type-trimmed-sm-size);
@@ -737,16 +737,20 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._lineMeta_7mr8w_91 {
+._lineMeta_1vmnm_104 {
   display: flex;
   align-items: center;
-  gap: var(--space-12);
+  flex-wrap: wrap;
+  gap: var(--space-6);
   min-width: 0;
   font-size: var(--type-trimmed-sm-size);
   line-height: 11px;
   color: var(--color-text-subtle);
 }
-._linePrice_7mr8w_106 {
+._detail_1vmnm_101 {
+  white-space: nowrap;
+}
+._linePrice_1vmnm_125 {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
@@ -755,26 +759,29 @@
   white-space: nowrap;
   font-variant-numeric: tabular-nums;
 }
-._paid_7mr8w_118 {
+._paid_1vmnm_137 {
   font-size: var(--type-trimmed-md-size);
   line-height: 11px;
   font-weight: var(--font-weight-bold);
 }
-._was_7mr8w_124 {
+._was_1vmnm_150 {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
   font-size: var(--type-trimmed-sm-size);
   line-height: 10px;
   font-weight: var(--font-weight-regular);
   color: var(--color-text-disabled);
   text-decoration: line-through;
 }
-._card_7mr8w_144 {
+._card_1vmnm_173 {
   display: flex;
   flex-direction: column;
   box-shadow: inset 0 0 0 1px var(--color-border-default);
   border-radius: var(--radius-18);
   overflow: hidden;
 }
-._cardTitle_7mr8w_152 {
+._cardTitle_1vmnm_181 {
   display: flex;
   align-items: center;
   margin: 0;
@@ -785,16 +792,16 @@
   line-height: 1.38;
   font-weight: var(--font-weight-bold);
 }
-._cardBody_7mr8w_164 {
+._cardBody_1vmnm_193 {
   margin: 0;
   padding: var(--space-16);
   font-size: var(--type-trimmed-sm-size);
   line-height: 1.5;
 }
-._summaryCard_7mr8w_136 {
+._summaryCard_1vmnm_165 {
   background: var(--color-surface-soft);
 }
-._summaryCard_7mr8w_136 > :last-child {
+._summaryCard_1vmnm_165 > :last-child {
   padding: 0 var(--space-16);
 }
 ._header_1f3nh_7 {

package/dist/styles.css

@@ -683,7 +683,7 @@
 ._row_1hsxt_16._discount_1hsxt_69 dd {
   color: var(--color-state-text-success);
 }
-._lines_7mr8w_19 {
+._lines_1vmnm_19 {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -691,12 +691,12 @@
   flex-direction: column;
   gap: var(--space-16);
 }
-._line_7mr8w_19 {
+._line_1vmnm_19 {
   display: flex;
   align-items: center;
   gap: var(--space-12);
 }
-._thumb_7mr8w_34 {
+._thumb_1vmnm_34 {
   position: relative;
   flex-shrink: 0;
   width: 48px;
@@ -705,14 +705,14 @@
   overflow: hidden;
   background: var(--color-surface-soft);
 }
-._image_7mr8w_44 {
+._image_1vmnm_44 {
   object-fit: cover;
 }
-._placeholder_7mr8w_48 {
+._placeholder_1vmnm_48 {
   width: 100%;
   height: 100%;
 }
-._lineBody_7mr8w_53 {
+._lineBody_1vmnm_53 {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
@@ -720,14 +720,14 @@
   flex: 1 1 0;
   min-width: 0;
 }
-._lineText_7mr8w_62 {
+._lineText_1vmnm_62 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
   flex: 1 1 0;
   min-width: 0;
 }
-._lineTitle_7mr8w_72 {
+._lineTitle_1vmnm_72 {
   margin: -6px 0;
   padding: 6px 0;
   font-size: var(--type-trimmed-sm-size);
@@ -737,16 +737,20 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._lineMeta_7mr8w_91 {
+._lineMeta_1vmnm_104 {
   display: flex;
   align-items: center;
-  gap: var(--space-12);
+  flex-wrap: wrap;
+  gap: var(--space-6);
   min-width: 0;
   font-size: var(--type-trimmed-sm-size);
   line-height: 11px;
   color: var(--color-text-subtle);
 }
-._linePrice_7mr8w_106 {
+._detail_1vmnm_101 {
+  white-space: nowrap;
+}
+._linePrice_1vmnm_125 {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
@@ -755,26 +759,29 @@
   white-space: nowrap;
   font-variant-numeric: tabular-nums;
 }
-._paid_7mr8w_118 {
+._paid_1vmnm_137 {
   font-size: var(--type-trimmed-md-size);
   line-height: 11px;
   font-weight: var(--font-weight-bold);
 }
-._was_7mr8w_124 {
+._was_1vmnm_150 {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
   font-size: var(--type-trimmed-sm-size);
   line-height: 10px;
   font-weight: var(--font-weight-regular);
   color: var(--color-text-disabled);
   text-decoration: line-through;
 }
-._card_7mr8w_144 {
+._card_1vmnm_173 {
   display: flex;
   flex-direction: column;
   box-shadow: inset 0 0 0 1px var(--color-border-default);
   border-radius: var(--radius-18);
   overflow: hidden;
 }
-._cardTitle_7mr8w_152 {
+._cardTitle_1vmnm_181 {
   display: flex;
   align-items: center;
   margin: 0;
@@ -785,16 +792,16 @@
   line-height: 1.38;
   font-weight: var(--font-weight-bold);
 }
-._cardBody_7mr8w_164 {
+._cardBody_1vmnm_193 {
   margin: 0;
   padding: var(--space-16);
   font-size: var(--type-trimmed-sm-size);
   line-height: 1.5;
 }
-._summaryCard_7mr8w_136 {
+._summaryCard_1vmnm_165 {
   background: var(--color-surface-soft);
 }
-._summaryCard_7mr8w_136 > :last-child {
+._summaryCard_1vmnm_165 > :last-child {
   padding: 0 var(--space-16);
 }
 ._header_1f3nh_7 {

package/package.json

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