@kotao/storefront 0.2.0 → 0.2.1

package/dist/react.js

@@ -499,7 +499,11 @@ var css = `
 var SHIELD_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l7 3v5c0 4.6-3 7.8-7 9-4-1.2-7-4.4-7-9V6l7-3z"/><path d="M9 12l2 2 4-4"/></svg>`;
 var addOn = {
   key: ADDON_KEY,
-  zone: "after-items",
+  // Footer, not 'after-items': the add-on is a checkout-adjacent offer that must stay pinned above
+  // the discount code, NOT scroll away with the upsell carousel. It renders before `discountCode`
+  // (WIDGETS registry order) so it sits directly above the code input (#1548 moved the whole
+  // 'after-items' zone into the scroll region — only the upsell belongs there).
+  zone: "footer",
   css,
   render({ config, state, variants }) {
     const variantId = readVariantId(config);
@@ -997,6 +1001,8 @@ var STYLES2 = `
     overflow: hidden; text-overflow: ellipsis; }
   .ksc-line__opt b { font-weight: 500; color: color-mix(in oklab, var(--ksc-text) 78%, transparent); }
   .ksc-line__variant { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--ksc-muted); }
+  .ksc-line__discount { font-size: .78rem; font-weight: 500; color: var(--ksc-positive); line-height: 1.35; }
+  .ksc-line__discount s { color: var(--ksc-muted); text-decoration: line-through; }
   .ksc-line__select { font: inherit; font-size: .78rem; color: var(--ksc-text); padding: 3px 22px 3px 8px;
     border: 1px solid var(--ksc-border); border-radius: 8px; background: var(--ksc-surface); cursor: pointer;
     appearance: none; -webkit-appearance: none;
@@ -1623,6 +1629,19 @@ ${css8}`);
         currency: l.linePrice.currency
       })
     )}</span>` : "";
+    const hasLineDiscount = (l.discountAllocations?.length ?? 0) > 0;
+    const displayPrice = hasLineDiscount ? l.originalLinePrice ?? l.linePrice : l.linePrice;
+    const discountRows = hasLineDiscount ? l.discountAllocations.map((a) => {
+      const code = escapeHtml(a.code);
+      if (typeof a.quantity === "number" && a.quantity > 0) {
+        const unit = Math.round((l.originalLinePrice ?? l.linePrice).amount / l.quantity);
+        const struck = escapeHtml(
+          formatMoney2({ amount: unit * a.quantity, currency: l.linePrice.currency })
+        );
+        return `<div class="ksc-line__discount"><span>\u{1F381} ${a.quantity}\xD7 ${code} \u2014 <s>${struck}</s> FREE \xB7 You save 100%</span></div>`;
+      }
+      return `<div class="ksc-line__discount"><span>\u{1F3F7} ${code} \u2212${escapeHtml(formatMoney2(a.amount))}</span></div>`;
+    }).join("") : "";
     return `<div class="ksc-line" data-line-id="${id}">
       ${image}
       <div class="ksc-line__body">
@@ -1631,6 +1650,7 @@ ${css8}`);
           ${compare}
         </div>
         ${meta}
+        ${discountRows}
         <div class="ksc-line__bottom">
           <div class="ksc-qty">
             <button type="button" data-smart-cart-qty-dec data-qty="${l.quantity}" aria-label="Decrease quantity">\u2212</button>
@@ -1639,7 +1659,7 @@ ${css8}`);
           </div>
           <div class="ksc-line__end">
             <div class="ksc-line__prices">
-              <span class="ksc-line__price">${escapeHtml(formatMoney2(l.linePrice))}</span>
+              <span class="ksc-line__price">${escapeHtml(formatMoney2(displayPrice))}</span>
               ${save}
             </div>
             <button type="button" class="ksc-line__remove" data-smart-cart-line-remove aria-label="Remove item">${TRASH_SVG}</button>
@@ -1673,20 +1693,22 @@ ${css8}`);
         return;
       }
       items.innerHTML = displayLines.map((l) => this.#renderLine(l)).join("");
-      const compareAtSavings = state.lines.reduce(
-        (sum, l) => sum + (l.compareAtLinePrice && l.compareAtLinePrice.amount > l.linePrice.amount ? l.compareAtLinePrice.amount - l.linePrice.amount : 0),
-        0
-      );
-      const cartDiscount = state.discountTotal?.amount ?? 0;
-      const savings = compareAtSavings + cartDiscount;
+      const namedAllocations = state.discountAllocations ?? [];
+      const cartDiscount = namedAllocations.length > 0 ? namedAllocations.reduce((sum, a) => sum + a.amount.amount, 0) : state.discountTotal?.amount ?? 0;
       const displayTotal = {
         amount: Math.max(0, state.subtotal.amount - cartDiscount),
         currency: state.subtotal.currency
       };
       const rows = [];
-      if (savings > 0) {
+      if (namedAllocations.length > 0) {
+        for (const a of namedAllocations) {
+          rows.push(
+            `<div class="ksc-summary__row ksc-summary__row--discount" data-savings><span>${escapeHtml(a.code)}</span><span>\u2212${escapeHtml(formatMoney2(a.amount))}</span></div>`
+          );
+        }
+      } else if ((state.discountTotal?.amount ?? 0) > 0) {
         rows.push(
-          `<div class="ksc-summary__row ksc-summary__row--discount" data-savings><span>Discounts</span><span>\u2212${escapeHtml(formatMoney2({ amount: savings, currency: state.subtotal.currency }))}</span></div>`
+          `<div class="ksc-summary__row ksc-summary__row--discount" data-savings><span>Discounts</span><span>\u2212${escapeHtml(formatMoney2(state.discountTotal))}</span></div>`
         );
       }
       rows.push(