@discount-depot/hydrogen 0.1.4

package/dist/countdown-design.js

@@ -0,0 +1,107 @@
+import { safePriceColor } from './presentation.js';
+// Only color stops and a degree direction, never URLs, CSS variables or arbitrary functions.
+export function safeCountdownBackground(value) {
+    const color = safePriceColor(value);
+    if (color)
+        return color;
+    const match = /^linear-gradient\((.*)\)$/i.exec(value.trim());
+    if (!match)
+        return undefined;
+    const parts = match[1].split(/,(?![^()]*\))/).map((part) => part.trim());
+    if (/^-?\d+(?:\.\d+)?deg$/.test(parts[0]))
+        parts.shift();
+    if (parts.length < 2 || parts.length > 8)
+        return undefined;
+    return parts.every((part) => {
+        const stop = /^(.*?)(?:\s+(-?\d+(?:\.\d+)?%))?$/.exec(part);
+        return stop && safePriceColor(stop[1]);
+    })
+        ? value
+        : undefined;
+}
+export function resolveCountdownDesign(design) {
+    const field = (suffix) => {
+        const camel = 'countdown' +
+            suffix
+                .split('_')
+                .map((word) => word[0].toUpperCase() + word.slice(1))
+                .join('');
+        return (design[`vd_countdown_${suffix}`] ??
+            design[`countdown_${suffix}`] ??
+            design[camel]);
+    };
+    const text = (name, fallback) => {
+        const value = field(name);
+        return typeof value === 'string' && value.trim()
+            ? value.slice(0, 500)
+            : fallback;
+    };
+    const requestedTheme = text('theme', 'classic');
+    const theme = requestedTheme === 'minimal'
+        ? 'coupon'
+        : ['classic', 'banner', 'coupon'].includes(requestedTheme)
+            ? requestedTheme
+            : 'classic';
+    const preset = theme === 'banner'
+        ? {
+            bg: 'linear-gradient(135deg, #0f172a 0%, #334155 100%)',
+            border: 'rgba(255,255,255,0.16)',
+            color: '#e2e8f0',
+            timeBg: 'rgba(255,255,255,0.08)',
+            timeColor: '#f8fafc',
+            size: 18,
+            radius: 18,
+            pad: 18,
+            timePad: 10,
+        }
+        : theme === 'coupon'
+            ? {
+                bg: 'linear-gradient(135deg, #ebffe4 0%, #c9f8c3 100%)',
+                border: 'rgba(111,205,118,0.22)',
+                color: '#425343',
+                timeBg: '#59c95f',
+                timeColor: '#f7fff7',
+                size: 15,
+                radius: 8,
+                pad: 10,
+                timePad: 0,
+            }
+            : {
+                bg: 'linear-gradient(135deg, #d89cff 0%, #8f39ff 100%)',
+                border: 'rgba(255,255,255,0.12)',
+                color: '#2b1238',
+                timeBg: 'transparent',
+                timeColor: '#ffffff',
+                size: 20,
+                radius: 8,
+                pad: 24,
+                timePad: 0,
+            };
+    const size = (name, fallback) => {
+        const value = field(name);
+        return value !== undefined &&
+            typeof value !== 'boolean' &&
+            String(value).trim() !== '' &&
+            Number.isFinite(Number(value))
+            ? Math.min(100, Math.max(0, Number(value)))
+            : fallback;
+    };
+    return {
+        theme,
+        format: text('format', 'dhms'),
+        title: text('title', 'Limited time offer'),
+        label: text('label', 'Sale ends in:'),
+        labels: ['days', 'hours', 'minutes', 'seconds'].map((unit, i) => text(`${unit}_label`, ['Days', 'Hrs', 'Mins', 'Secs'][i])),
+        bg: safeCountdownBackground(text('background_color', preset.bg)) ?? preset.bg,
+        border: safePriceColor(text('border_color', preset.border)) ?? preset.border,
+        color: safePriceColor(text('text_color', preset.color)) ?? preset.color,
+        timeBg: safeCountdownBackground(text('timer_background_color', preset.timeBg)) ??
+            preset.timeBg,
+        timeColor: safePriceColor(text('timer_text_color', preset.timeColor)) ??
+            preset.timeColor,
+        size: size('font_size', preset.size),
+        radius: size('border_radius', preset.radius),
+        pad: size('padding', preset.pad),
+        timePad: size('timer_padding', preset.timePad),
+    };
+}

package/dist/countdown-styles.d.ts

@@ -0,0 +1 @@
+export declare const countdownStyles = ".dd-hydrogen-countdown-root {\r\n  width: 100%;\r\n}\r\n\r\n.dd-hydrogen-countdown-root[hidden] {\r\n  display: none !important;\r\n}\r\n\r\n.dd-hydrogen-countdown-sticky-host {\r\n  position: fixed;\r\n  left: max(16px, env(safe-area-inset-left));\r\n  right: max(16px, env(safe-area-inset-right));\r\n  bottom: max(16px, env(safe-area-inset-bottom));\r\n  z-index: 9999;\r\n  display: flex;\r\n  justify-content: center;\r\n  pointer-events: none;\r\n}\r\n\r\n.dd-hydrogen-countdown-sticky-host[hidden] {\r\n  display: none !important;\r\n}\r\n\r\n.dd-hydrogen-countdown-card {\r\n  width: 100%;\r\n  max-width: var(--dd-max-width, 100%);\r\n  box-sizing: border-box;\r\n  padding: var(--dd-pad, 24px);\r\n  border: 1px solid var(--dd-border, rgba(255, 255, 255, 0.12));\r\n  border-radius: var(--dd-radius, 8px);\r\n  background: var(--dd-bg, linear-gradient(135deg, #d89cff 0%, #8f39ff 100%));\r\n  color: var(--dd-text, #2b1238);\r\n  font-size: var(--dd-size, 20px);\r\n  line-height: 1.3;\r\n  margin: 0 auto;\r\n  pointer-events: auto;\r\n}\r\n\r\n.dd-hydrogen-countdown-card.dd-theme-classic {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 14px;\r\n  text-align: center;\r\n  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12);\r\n}\r\n\r\n.dd-hydrogen-countdown-card.dd-theme-banner {\r\n  display: grid;\r\n  grid-template-columns: minmax(0, 1fr) auto;\r\n  align-items: center;\r\n  gap: 14px 18px;\r\n  text-align: left;\r\n  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);\r\n}\r\n\r\n.dd-hydrogen-countdown-card.dd-theme-coupon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 16px;\r\n  min-height: 74px;\r\n  box-shadow: 0 16px 36px rgba(36, 83, 52, 0.12);\r\n}\r\n\r\n.dd-hydrogen-countdown-title {\r\n  display: block;\r\n  width: 100%;\r\n  color: inherit;\r\n  font-size: max(calc(var(--dd-size, 20px) * 1.1), 16px);\r\n  line-height: 1.2;\r\n  font-weight: 600;\r\n}\r\n\r\n.dd-theme-banner .dd-hydrogen-countdown-title {\r\n  grid-column: 1 / -1;\r\n  text-align: left;\r\n}\r\n\r\n.dd-theme-coupon .dd-hydrogen-countdown-title {\r\n  display: none;\r\n}\r\n\r\n.dd-hydrogen-countdown-label {\r\n  display: block;\r\n  color: inherit;\r\n  font-size: max(calc(var(--dd-size, 20px) * 0.7), 12px);\r\n  line-height: 1.3;\r\n  font-weight: 500;\r\n}\r\n\r\n.dd-theme-classic .dd-hydrogen-countdown-label {\r\n  width: 100%;\r\n}\r\n\r\n.dd-theme-banner .dd-hydrogen-countdown-label {\r\n  width: auto;\r\n  justify-self: start;\r\n  text-align: left;\r\n}\r\n\r\n.dd-theme-coupon .dd-hydrogen-countdown-label {\r\n  display: none;\r\n}\r\n\r\n.dd-hydrogen-countdown-time {\r\n  box-sizing: border-box;\r\n}\r\n\r\n.dd-hydrogen-countdown-time--split {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 2px;\r\n  width: 100%;\r\n  min-height: var(--dd-time-min-height, 60px);\r\n  padding: var(--dd-time-pad, 0);\r\n  border-radius: max(calc(var(--dd-radius, 8px) / 1.5), 8px);\r\n  background: var(--dd-time-bg, transparent);\r\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);\r\n}\r\n\r\n.dd-theme-banner .dd-hydrogen-countdown-time--split {\r\n  width: auto;\r\n  min-height: 0;\r\n  justify-self: end;\r\n}\r\n\r\n.dd-hydrogen-countdown-segment {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  text-align: center;\r\n  flex: var(--dd-segment-flex, 0 0 auto);\r\n  width: var(--dd-segment-width, auto);\r\n  min-width: var(--dd-segment-min-width, 52px);\r\n}\r\n\r\n.dd-hydrogen-countdown-value {\r\n  color: var(--dd-time-text, #ffffff);\r\n  font-size: var(--dd-time-value-size, max(calc(var(--dd-size, 20px) * 0.95), 16px));\r\n  line-height: 0.95;\r\n  font-weight: 400;\r\n  letter-spacing: -0.04em;\r\n}\r\n\r\n.dd-hydrogen-countdown-unit {\r\n  margin-top: var(--dd-unit-margin-top, 6px);\r\n  color: var(--dd-text, #2b1238);\r\n  font-size: var(--dd-time-unit-size, max(calc(var(--dd-size, 20px) * 0.75), 12px));\r\n  font-weight: 500;\r\n  white-space: nowrap;\r\n}\r\n\r\n.dd-hydrogen-countdown-separator {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: var(--dd-time-text, #ffffff);\r\n  font-size: var(--dd-time-value-size, max(calc(var(--dd-size, 20px) * 0.95), 16px));\r\n  line-height: 1;\r\n  font-weight: 300;\r\n  padding-inline: var(--dd-separator-pad, 4px);\r\n}\r\n\r\n.dd-hydrogen-countdown-coupon-lead {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n  min-width: 0;\r\n  flex: 1 1 auto;\r\n}\r\n\r\n.dd-hydrogen-countdown-icon {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex: 0 0 auto;\r\n  font-size: max(calc(var(--dd-size, 15px) * 1.6), 28px);\r\n  line-height: 1;\r\n}\r\n\r\n.dd-hydrogen-countdown-icon svg {\r\n  display: block;\r\n  width: 1em;\r\n  height: 1em;\r\n}\r\n\r\n.dd-hydrogen-countdown-coupon-message {\r\n  display: block;\r\n  min-width: 0;\r\n  color: inherit;\r\n  font-size: max(var(--dd-size, 15px), 15px);\r\n  font-weight: 650;\r\n  line-height: 1.15;\r\n  white-space: normal;\r\n}\r\n\r\n.dd-hydrogen-countdown-time--coupon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: flex-start;\r\n  gap: var(--dd-coupon-gap, 12px);\r\n  flex-wrap: nowrap;\r\n  width: var(--dd-coupon-width, auto);\r\n  min-width: fit-content;\r\n  max-width: none;\r\n}\r\n\r\n.dd-hydrogen-countdown-chip {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  box-sizing: border-box;\r\n  min-width: var(--dd-chip-min-width, max(calc(var(--dd-size, 15px) * 5.2), 82px));\r\n  height: var(--dd-chip-height, 50px);\r\n  padding: 0 max(var(--dd-time-pad, 0), 10px);\r\n  border-radius: max(var(--dd-radius, 8px), 8px);\r\n  background: var(--dd-time-bg, transparent);\r\n  color: var(--dd-time-text, #ffffff);\r\n  font-size: var(--dd-chip-font-size, max(var(--dd-size, 15px), 15px));\r\n  font-weight: 700;\r\n  line-height: 1;\r\n  white-space: nowrap;\r\n  box-shadow: 0 10px 18px rgba(36, 83, 52, 0.1);\r\n}\r\n\r\n.dd-layout-banner-narrow.dd-theme-banner {\r\n  grid-template-columns: minmax(0, 1fr);\r\n  text-align: center;\r\n}\r\n\r\n.dd-layout-banner-narrow.dd-theme-banner .dd-hydrogen-countdown-title,\r\n.dd-layout-banner-narrow.dd-theme-banner .dd-hydrogen-countdown-label {\r\n  text-align: center;\r\n  justify-self: center;\r\n}\r\n\r\n.dd-layout-banner-narrow.dd-theme-banner .dd-hydrogen-countdown-time--split {\r\n  width: 100%;\r\n  justify-self: stretch;\r\n}\r\n\r\n.dd-layout-coupon-compact.dd-theme-coupon {\r\n  display: grid;\r\n  grid-template-columns: auto minmax(0, 1fr);\r\n  align-items: center;\r\n  gap: 8px 12px;\r\n}\r\n\r\n.dd-layout-coupon-compact .dd-hydrogen-countdown-coupon-lead {\r\n  display: contents;\r\n}\r\n\r\n.dd-layout-coupon-compact .dd-hydrogen-countdown-icon {\r\n  grid-column: 1 / 2;\r\n  grid-row: 1 / 2;\r\n  justify-self: center;\r\n}\r\n\r\n.dd-layout-coupon-compact .dd-hydrogen-countdown-coupon-message {\r\n  grid-column: 2 / 3;\r\n  grid-row: 1 / 2;\r\n  text-align: left;\r\n}\r\n\r\n.dd-layout-coupon-compact .dd-hydrogen-countdown-time--coupon {\r\n  grid-column: 1 / -1;\r\n  grid-row: 2 / 3;\r\n  justify-content: center;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n.dd-layout-coupon-stack.dd-theme-coupon {\r\n  display: grid;\r\n  grid-template-columns: minmax(0, 1fr);\r\n  justify-content: initial;\r\n  min-height: 0;\r\n  gap: 8px;\r\n  text-align: center;\r\n}\r\n\r\n.dd-layout-coupon-stack .dd-hydrogen-countdown-coupon-lead {\r\n  justify-content: center;\r\n}\r\n\r\n.dd-layout-coupon-stack .dd-hydrogen-countdown-time--coupon {\r\n  width: 100%;\r\n  justify-content: center;\r\n  flex-wrap: wrap;\r\n  gap: 8px;\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .dd-hydrogen-countdown-card.dd-theme-banner {\r\n    grid-template-columns: minmax(0, 1fr);\r\n    text-align: center;\r\n  }\r\n\r\n  .dd-theme-banner .dd-hydrogen-countdown-title,\r\n  .dd-theme-banner .dd-hydrogen-countdown-label {\r\n    text-align: center;\r\n    justify-self: center;\r\n  }\r\n\r\n  .dd-theme-banner .dd-hydrogen-countdown-time--split {\r\n    width: 100%;\r\n    justify-self: stretch;\r\n  }\r\n}\r\n\r\n@media (max-width: 520px) {\r\n  .dd-hydrogen-countdown-card.dd-theme-coupon {\r\n    display: grid;\r\n    grid-template-columns: minmax(0, 1fr);\r\n    justify-content: initial;\r\n    min-height: 0;\r\n    gap: 8px;\r\n    text-align: center;\r\n  }\r\n\r\n  .dd-hydrogen-countdown-coupon-lead {\r\n    justify-content: center;\r\n  }\r\n\r\n  .dd-hydrogen-countdown-time--coupon {\r\n    width: 100%;\r\n    justify-content: center;\r\n    flex-wrap: wrap;\r\n    gap: 8px;\r\n  }\r\n\r\n  .dd-hydrogen-countdown-chip {\r\n    min-width: var(--dd-chip-min-width, max(calc(var(--dd-size, 15px) * 4.8), 72px));\r\n    height: var(--dd-chip-height, 44px);\r\n    font-size: var(--dd-chip-font-size, max(calc(var(--dd-size, 15px) * 0.93), 14px));\r\n  }\r\n}\r\n";

package/dist/countdown-styles.js

@@ -0,0 +1,2 @@
+// Scoped styles ported from the Discount Depot countdown app block.
+export const countdownStyles = '.dd-hydrogen-countdown-root {\r\n  width: 100%;\r\n}\r\n\r\n.dd-hydrogen-countdown-root[hidden] {\r\n  display: none !important;\r\n}\r\n\r\n.dd-hydrogen-countdown-sticky-host {\r\n  position: fixed;\r\n  left: max(16px, env(safe-area-inset-left));\r\n  right: max(16px, env(safe-area-inset-right));\r\n  bottom: max(16px, env(safe-area-inset-bottom));\r\n  z-index: 9999;\r\n  display: flex;\r\n  justify-content: center;\r\n  pointer-events: none;\r\n}\r\n\r\n.dd-hydrogen-countdown-sticky-host[hidden] {\r\n  display: none !important;\r\n}\r\n\r\n.dd-hydrogen-countdown-card {\r\n  width: 100%;\r\n  max-width: var(--dd-max-width, 100%);\r\n  box-sizing: border-box;\r\n  padding: var(--dd-pad, 24px);\r\n  border: 1px solid var(--dd-border, rgba(255, 255, 255, 0.12));\r\n  border-radius: var(--dd-radius, 8px);\r\n  background: var(--dd-bg, linear-gradient(135deg, #d89cff 0%, #8f39ff 100%));\r\n  color: var(--dd-text, #2b1238);\r\n  font-size: var(--dd-size, 20px);\r\n  line-height: 1.3;\r\n  margin: 0 auto;\r\n  pointer-events: auto;\r\n}\r\n\r\n.dd-hydrogen-countdown-card.dd-theme-classic {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 14px;\r\n  text-align: center;\r\n  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12);\r\n}\r\n\r\n.dd-hydrogen-countdown-card.dd-theme-banner {\r\n  display: grid;\r\n  grid-template-columns: minmax(0, 1fr) auto;\r\n  align-items: center;\r\n  gap: 14px 18px;\r\n  text-align: left;\r\n  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);\r\n}\r\n\r\n.dd-hydrogen-countdown-card.dd-theme-coupon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 16px;\r\n  min-height: 74px;\r\n  box-shadow: 0 16px 36px rgba(36, 83, 52, 0.12);\r\n}\r\n\r\n.dd-hydrogen-countdown-title {\r\n  display: block;\r\n  width: 100%;\r\n  color: inherit;\r\n  font-size: max(calc(var(--dd-size, 20px) * 1.1), 16px);\r\n  line-height: 1.2;\r\n  font-weight: 600;\r\n}\r\n\r\n.dd-theme-banner .dd-hydrogen-countdown-title {\r\n  grid-column: 1 / -1;\r\n  text-align: left;\r\n}\r\n\r\n.dd-theme-coupon .dd-hydrogen-countdown-title {\r\n  display: none;\r\n}\r\n\r\n.dd-hydrogen-countdown-label {\r\n  display: block;\r\n  color: inherit;\r\n  font-size: max(calc(var(--dd-size, 20px) * 0.7), 12px);\r\n  line-height: 1.3;\r\n  font-weight: 500;\r\n}\r\n\r\n.dd-theme-classic .dd-hydrogen-countdown-label {\r\n  width: 100%;\r\n}\r\n\r\n.dd-theme-banner .dd-hydrogen-countdown-label {\r\n  width: auto;\r\n  justify-self: start;\r\n  text-align: left;\r\n}\r\n\r\n.dd-theme-coupon .dd-hydrogen-countdown-label {\r\n  display: none;\r\n}\r\n\r\n.dd-hydrogen-countdown-time {\r\n  box-sizing: border-box;\r\n}\r\n\r\n.dd-hydrogen-countdown-time--split {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 2px;\r\n  width: 100%;\r\n  min-height: var(--dd-time-min-height, 60px);\r\n  padding: var(--dd-time-pad, 0);\r\n  border-radius: max(calc(var(--dd-radius, 8px) / 1.5), 8px);\r\n  background: var(--dd-time-bg, transparent);\r\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);\r\n}\r\n\r\n.dd-theme-banner .dd-hydrogen-countdown-time--split {\r\n  width: auto;\r\n  min-height: 0;\r\n  justify-self: end;\r\n}\r\n\r\n.dd-hydrogen-countdown-segment {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  text-align: center;\r\n  flex: var(--dd-segment-flex, 0 0 auto);\r\n  width: var(--dd-segment-width, auto);\r\n  min-width: var(--dd-segment-min-width, 52px);\r\n}\r\n\r\n.dd-hydrogen-countdown-value {\r\n  color: var(--dd-time-text, #ffffff);\r\n  font-size: var(--dd-time-value-size, max(calc(var(--dd-size, 20px) * 0.95), 16px));\r\n  line-height: 0.95;\r\n  font-weight: 400;\r\n  letter-spacing: -0.04em;\r\n}\r\n\r\n.dd-hydrogen-countdown-unit {\r\n  margin-top: var(--dd-unit-margin-top, 6px);\r\n  color: var(--dd-text, #2b1238);\r\n  font-size: var(--dd-time-unit-size, max(calc(var(--dd-size, 20px) * 0.75), 12px));\r\n  font-weight: 500;\r\n  white-space: nowrap;\r\n}\r\n\r\n.dd-hydrogen-countdown-separator {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: var(--dd-time-text, #ffffff);\r\n  font-size: var(--dd-time-value-size, max(calc(var(--dd-size, 20px) * 0.95), 16px));\r\n  line-height: 1;\r\n  font-weight: 300;\r\n  padding-inline: var(--dd-separator-pad, 4px);\r\n}\r\n\r\n.dd-hydrogen-countdown-coupon-lead {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n  min-width: 0;\r\n  flex: 1 1 auto;\r\n}\r\n\r\n.dd-hydrogen-countdown-icon {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex: 0 0 auto;\r\n  font-size: max(calc(var(--dd-size, 15px) * 1.6), 28px);\r\n  line-height: 1;\r\n}\r\n\r\n.dd-hydrogen-countdown-icon svg {\r\n  display: block;\r\n  width: 1em;\r\n  height: 1em;\r\n}\r\n\r\n.dd-hydrogen-countdown-coupon-message {\r\n  display: block;\r\n  min-width: 0;\r\n  color: inherit;\r\n  font-size: max(var(--dd-size, 15px), 15px);\r\n  font-weight: 650;\r\n  line-height: 1.15;\r\n  white-space: normal;\r\n}\r\n\r\n.dd-hydrogen-countdown-time--coupon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: flex-start;\r\n  gap: var(--dd-coupon-gap, 12px);\r\n  flex-wrap: nowrap;\r\n  width: var(--dd-coupon-width, auto);\r\n  min-width: fit-content;\r\n  max-width: none;\r\n}\r\n\r\n.dd-hydrogen-countdown-chip {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  box-sizing: border-box;\r\n  min-width: var(--dd-chip-min-width, max(calc(var(--dd-size, 15px) * 5.2), 82px));\r\n  height: var(--dd-chip-height, 50px);\r\n  padding: 0 max(var(--dd-time-pad, 0), 10px);\r\n  border-radius: max(var(--dd-radius, 8px), 8px);\r\n  background: var(--dd-time-bg, transparent);\r\n  color: var(--dd-time-text, #ffffff);\r\n  font-size: var(--dd-chip-font-size, max(var(--dd-size, 15px), 15px));\r\n  font-weight: 700;\r\n  line-height: 1;\r\n  white-space: nowrap;\r\n  box-shadow: 0 10px 18px rgba(36, 83, 52, 0.1);\r\n}\r\n\r\n.dd-layout-banner-narrow.dd-theme-banner {\r\n  grid-template-columns: minmax(0, 1fr);\r\n  text-align: center;\r\n}\r\n\r\n.dd-layout-banner-narrow.dd-theme-banner .dd-hydrogen-countdown-title,\r\n.dd-layout-banner-narrow.dd-theme-banner .dd-hydrogen-countdown-label {\r\n  text-align: center;\r\n  justify-self: center;\r\n}\r\n\r\n.dd-layout-banner-narrow.dd-theme-banner .dd-hydrogen-countdown-time--split {\r\n  width: 100%;\r\n  justify-self: stretch;\r\n}\r\n\r\n.dd-layout-coupon-compact.dd-theme-coupon {\r\n  display: grid;\r\n  grid-template-columns: auto minmax(0, 1fr);\r\n  align-items: center;\r\n  gap: 8px 12px;\r\n}\r\n\r\n.dd-layout-coupon-compact .dd-hydrogen-countdown-coupon-lead {\r\n  display: contents;\r\n}\r\n\r\n.dd-layout-coupon-compact .dd-hydrogen-countdown-icon {\r\n  grid-column: 1 / 2;\r\n  grid-row: 1 / 2;\r\n  justify-self: center;\r\n}\r\n\r\n.dd-layout-coupon-compact .dd-hydrogen-countdown-coupon-message {\r\n  grid-column: 2 / 3;\r\n  grid-row: 1 / 2;\r\n  text-align: left;\r\n}\r\n\r\n.dd-layout-coupon-compact .dd-hydrogen-countdown-time--coupon {\r\n  grid-column: 1 / -1;\r\n  grid-row: 2 / 3;\r\n  justify-content: center;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n.dd-layout-coupon-stack.dd-theme-coupon {\r\n  display: grid;\r\n  grid-template-columns: minmax(0, 1fr);\r\n  justify-content: initial;\r\n  min-height: 0;\r\n  gap: 8px;\r\n  text-align: center;\r\n}\r\n\r\n.dd-layout-coupon-stack .dd-hydrogen-countdown-coupon-lead {\r\n  justify-content: center;\r\n}\r\n\r\n.dd-layout-coupon-stack .dd-hydrogen-countdown-time--coupon {\r\n  width: 100%;\r\n  justify-content: center;\r\n  flex-wrap: wrap;\r\n  gap: 8px;\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .dd-hydrogen-countdown-card.dd-theme-banner {\r\n    grid-template-columns: minmax(0, 1fr);\r\n    text-align: center;\r\n  }\r\n\r\n  .dd-theme-banner .dd-hydrogen-countdown-title,\r\n  .dd-theme-banner .dd-hydrogen-countdown-label {\r\n    text-align: center;\r\n    justify-self: center;\r\n  }\r\n\r\n  .dd-theme-banner .dd-hydrogen-countdown-time--split {\r\n    width: 100%;\r\n    justify-self: stretch;\r\n  }\r\n}\r\n\r\n@media (max-width: 520px) {\r\n  .dd-hydrogen-countdown-card.dd-theme-coupon {\r\n    display: grid;\r\n    grid-template-columns: minmax(0, 1fr);\r\n    justify-content: initial;\r\n    min-height: 0;\r\n    gap: 8px;\r\n    text-align: center;\r\n  }\r\n\r\n  .dd-hydrogen-countdown-coupon-lead {\r\n    justify-content: center;\r\n  }\r\n\r\n  .dd-hydrogen-countdown-time--coupon {\r\n    width: 100%;\r\n    justify-content: center;\r\n    flex-wrap: wrap;\r\n    gap: 8px;\r\n  }\r\n\r\n  .dd-hydrogen-countdown-chip {\r\n    min-width: var(--dd-chip-min-width, max(calc(var(--dd-size, 15px) * 4.8), 72px));\r\n    height: var(--dd-chip-height, 44px);\r\n    font-size: var(--dd-chip-font-size, max(calc(var(--dd-size, 15px) * 0.93), 14px));\r\n  }\r\n}\r\n';

package/dist/countdown.d.ts

@@ -0,0 +1,6 @@
+export type { DepotCountdown } from './countdown-data.js';
+/** Uses an absolute deadline; rerenders, variant changes and refreshes never restart it. */
+export declare function DiscountDepotCountdown({ countdown, design, }: {
+    countdown: unknown;
+    design?: Record<string, string | number | boolean>;
+}): import("react").JSX.Element | null;

package/dist/countdown.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, useEffect, useState } from 'react';
+import { resolveCountdownDesign } from './countdown-design.js';
+import { countdownStyles } from './countdown-styles.js';
+import { normalizeCountdown, countdownDeadline } from './countdown-data.js';
+/** Uses an absolute deadline; rerenders, variant changes and refreshes never restart it. */
+export function DiscountDepotCountdown({ countdown, design = {}, }) {
+    const data = normalizeCountdown(countdown);
+    const start = data ? Date.parse(data.startsAt) : 0;
+    const end = data ? Date.parse(data.endsAt) : 0;
+    const restart = data?.expiryAction === 'restart';
+    const cutoff = data?.ruleEndsAt ? Date.parse(data.ruleEndsAt) : Infinity;
+    const [clock, setClock] = useState(null);
+    useEffect(() => {
+        if (!start || !end)
+            return;
+        let interval;
+        const tick = () => {
+            const now = Date.now();
+            setClock({ start, end, now });
+            if ((now >= cutoff || (!restart && now >= end)) && interval !== undefined)
+                clearInterval(interval);
+        };
+        tick();
+        if (Date.now() < cutoff && (restart || Date.now() < end))
+            interval = setInterval(tick, 1000);
+        return () => {
+            if (interval !== undefined)
+                clearInterval(interval);
+        };
+    }, [start, end, restart, cutoff]);
+    if (!data ||
+        !clock ||
+        clock.start !== start ||
+        clock.end !== end ||
+        clock.now < start ||
+        clock.now >= countdownDeadline(data, clock.now))
+        return null;
+    const total = Math.ceil((countdownDeadline(data, clock.now) - clock.now) / 1000);
+    const days = Math.floor(total / 86400);
+    const hours = Math.floor(total / 3600) % 24;
+    const minutes = Math.floor(total / 60) % 60;
+    const seconds = total % 60;
+    const pad = (value) => String(value).padStart(2, '0');
+    const text = `${days ? `${days}d ` : ''}${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+    const saved = resolveCountdownDesign({ ...design, ...data.design });
+    const allParts = [days, hours, minutes, seconds];
+    const parts = saved.format === 'ms'
+        ? [
+            [Math.floor(total / 60), saved.labels[2]],
+            [seconds, saved.labels[3]],
+        ]
+        : saved.format === 'hms'
+            ? [
+                [Math.floor(total / 3600), saved.labels[1]],
+                [minutes, saved.labels[2]],
+                [seconds, saved.labels[3]],
+            ]
+            : allParts.map((value, index) => [value, saved.labels[index]]);
+    const coupon = saved.theme === 'coupon';
+    const title = data.title ?? saved.title;
+    const label = data.label ?? saved.label;
+    const vars = {
+        '--dd-bg': saved.bg,
+        '--dd-border': saved.border,
+        '--dd-text': saved.color,
+        '--dd-time-bg': saved.timeBg,
+        '--dd-time-text': saved.timeColor,
+        '--dd-size': `${saved.size}px`,
+        '--dd-radius': `${saved.radius}px`,
+        '--dd-pad': `${saved.pad}px`,
+        '--dd-time-pad': `${saved.timePad}px`,
+        '--dd-max-width': coupon
+            ? '1040px'
+            : saved.theme === 'banner'
+                ? '520px'
+                : '360px',
+        '--dd-time-value-size': `${Math.max(parts.length > 3 ? Math.round(saved.size * 0.9) : saved.size, 16)}px`,
+        '--dd-time-unit-size': `${Math.max(Math.round(saved.size * (parts.length > 3 ? 0.65 : 0.75)), 11)}px`,
+        '--dd-segment-min-width': parts.length > 3 ? (saved.theme === 'banner' ? '48px' : '56px') : '52px',
+        '--dd-separator-pad': saved.theme === 'banner' ? '1px' : '2px',
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: countdownStyles }), _jsx("section", { className: coupon
+                    ? 'dd-hydrogen-countdown-sticky-host'
+                    : 'dd-hydrogen-countdown-root', "aria-label": "Offer countdown", style: coupon ? undefined : { marginTop: 12 }, children: _jsxs("div", { className: `dd-hydrogen-countdown-card dd-theme-${saved.theme}${saved.theme === 'banner' ? ' dd-layout-banner-narrow' : ''}`, style: vars, children: [coupon ? (_jsxs("span", { className: "dd-hydrogen-countdown-coupon-lead", children: [_jsx("span", { "aria-hidden": "true", className: "dd-hydrogen-countdown-icon", children: _jsxs("svg", { viewBox: "0 0 64 64", width: "1em", height: "1em", focusable: "false", children: [_jsx("circle", { cx: "32", cy: "35", r: "19", fill: "#ffedf2" }), _jsx("circle", { cx: "32", cy: "35", r: "15", fill: "#d8e7ff" }), _jsx("path", { d: "M20 8c-4 0-7 3-7 7 0 3 2 5 4 6l7-7c-1-3-2-6-4-6ZM44 14l7 7c3-1 5-3 5-6 0-4-3-7-7-7-2 0-3 1-5 6Z", fill: "#ffd24d" }), _jsx("path", { d: "M18 18c5-6 12-9 20-9s15 3 20 9", fill: "none", stroke: "#ff6b8b", strokeWidth: "5", strokeLinecap: "round" }), _jsx("circle", { cx: "32", cy: "35", r: "17", fill: "none", stroke: "#ff5c7d", strokeWidth: "5" }), _jsx("path", { d: "M32 35V25M32 35l8 5M18 55l7-7M46 55l-7-7", stroke: "#31435a", strokeWidth: "4", strokeLinecap: "round" }), _jsx("circle", { cx: "32", cy: "35", r: "2.5", fill: "#31435a" })] }) }), _jsx("span", { className: "dd-hydrogen-countdown-coupon-message", children: [title, label].filter(Boolean).join(' ') })] })) : (_jsxs(_Fragment, { children: [_jsx("strong", { className: "dd-hydrogen-countdown-title", children: title }), _jsx("span", { className: "dd-hydrogen-countdown-label", children: label })] })), _jsx("div", { role: "timer", "aria-live": "off", "aria-label": text, className: `dd-hydrogen-countdown-time dd-hydrogen-countdown-time--${coupon ? 'coupon' : 'split'}`, children: parts.map(([value, unit], index) => coupon ? (_jsxs("span", { className: "dd-hydrogen-countdown-chip", children: [Number(value), " ", unit] }, index)) : (_jsxs(Fragment, { children: [_jsxs("span", { className: "dd-hydrogen-countdown-segment", children: [_jsx("span", { className: "dd-hydrogen-countdown-value", children: pad(Number(value)) }), _jsx("span", { className: "dd-hydrogen-countdown-unit", children: unit })] }), index < parts.length - 1 && (_jsx("span", { className: "dd-hydrogen-countdown-separator", "aria-hidden": "true", children: ":" }))] }, index))) })] }) })] }));
+}

package/dist/customer-identity.d.ts

@@ -0,0 +1,15 @@
+import type { CustomerAccount } from '@shopify/hydrogen';
+export interface CustomerIdentityContext {
+    customerAccount?: Pick<CustomerAccount, 'isLoggedIn' | 'getAccessToken'>;
+}
+export type CustomerPreviewCredentials = {
+    state: 'authenticated';
+    accessToken: string;
+    origin: string;
+} | {
+    state: 'guest' | 'unknown';
+};
+/** Read only Hydrogen's server session; browser JSON never supplies credentials. */
+export declare function resolvePreviewCustomer(context: CustomerIdentityContext, request: Request): Promise<CustomerPreviewCredentials>;
+/** Customer access tokens stay on the server and are never part of JSON output. */
+export declare function customerPreviewHeaders(credentials?: CustomerPreviewCredentials): Record<string, string>;

package/dist/customer-identity.js

@@ -0,0 +1,32 @@
+/** Read only Hydrogen's server session; browser JSON never supplies credentials. */
+export async function resolvePreviewCustomer(context, request) {
+    if (!context.customerAccount)
+        return { state: 'unknown' };
+    try {
+        if (!(await context.customerAccount.isLoggedIn()))
+            return { state: 'guest' };
+        // Hydrogen checks expiry and refreshes the token using its existing session.
+        const accessToken = await context.customerAccount.getAccessToken();
+        if (!accessToken || accessToken.length > 16384 || /[^\x21-\x7e]/.test(accessToken))
+            return { state: 'unknown' };
+        const origin = new URL(request.url);
+        // Match Hydrogen's Customer Account client, including local development.
+        origin.protocol = 'https:';
+        return { state: 'authenticated', accessToken, origin: origin.origin };
+    }
+    catch {
+        return { state: 'unknown' };
+    }
+}
+/** Customer access tokens stay on the server and are never part of JSON output. */
+export function customerPreviewHeaders(credentials) {
+    const headers = { 'Content-Type': 'application/json' };
+    if (credentials?.state === 'authenticated') {
+        headers['X-Discount-Depot-Customer-Access-Token'] = credentials.accessToken;
+        headers['X-Discount-Depot-Customer-Origin'] = credentials.origin;
+    }
+    else if (credentials?.state === 'guest') {
+        headers['X-Discount-Depot-Customer-State'] = 'guest';
+    }
+    return headers;
+}

package/dist/presentation.d.ts

@@ -0,0 +1,20 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { DepotDiscount } from './server.js';
+export interface PricedVariant {
+    id: string;
+    price: {
+        amount: string;
+        currencyCode: string;
+    };
+}
+export declare function isValidDiscount(discount: unknown, variant?: PricedVariant | null): discount is DepotDiscount;
+export declare function safePriceColor(value?: string): string | undefined;
+export declare function savedLabelStyle(cssText?: string): CSSProperties | undefined;
+/** Presentational only: product cards never initiate requests. */
+export declare function DiscountDepotPricePreview({ variant, discount, children, locale, className, }: {
+    variant?: PricedVariant | null;
+    discount?: unknown;
+    children: ReactNode;
+    locale?: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/presentation.js

@@ -0,0 +1,85 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function isValidDiscount(discount, variant) {
+    if (!variant || !discount || typeof discount !== 'object')
+        return false;
+    const value = discount;
+    return (value.eligible === true &&
+        value.currencyCode === variant.price.currencyCode &&
+        typeof value.originalPrice === 'string' &&
+        value.originalPrice.trim() !== '' &&
+        Number(value.originalPrice) === Number(variant.price.amount) &&
+        typeof value.displayPrice === 'string' &&
+        value.displayPrice.trim() !== '' &&
+        Number.isFinite(Number(value.displayPrice)) &&
+        Number(value.displayPrice) >= 0 &&
+        Number(value.displayPrice) <= Number(variant.price.amount));
+}
+const CSS_PROPERTIES = {
+    'background-color': 'backgroundColor',
+    background: 'background',
+    color: 'color',
+    display: 'display',
+    border: 'border',
+    'border-color': 'borderColor',
+    'border-radius': 'borderRadius',
+    'border-width': 'borderWidth',
+    'border-style': 'borderStyle',
+    'font-size': 'fontSize',
+    'font-weight': 'fontWeight',
+    'font-style': 'fontStyle',
+    'letter-spacing': 'letterSpacing',
+    'line-height': 'lineHeight',
+    padding: 'padding',
+    'margin-left': 'marginLeft',
+    'margin-right': 'marginRight',
+    'margin-top': 'marginTop',
+    'margin-bottom': 'marginBottom',
+    'text-align': 'textAlign',
+    'text-transform': 'textTransform',
+    'word-break': 'wordBreak',
+};
+export function safePriceColor(value) {
+    if (typeof value !== 'string')
+        return undefined;
+    const color = value.trim();
+    return /^(?:#[\da-f]{3,4}|#[\da-f]{6}|#[\da-f]{8}|[a-z]+|(?:rgb|hsl)a?\([\d\s.,%/+-]+\))$/i.test(color)
+        ? color
+        : undefined;
+}
+export function savedLabelStyle(cssText) {
+    if (typeof cssText !== 'string')
+        return undefined;
+    const style = {};
+    for (const declaration of cssText.split(';')) {
+        const separator = declaration.indexOf(':');
+        if (separator === -1)
+            continue;
+        const property = declaration.slice(0, separator).trim().toLowerCase();
+        const key = Object.hasOwn(CSS_PROPERTIES, property)
+            ? CSS_PROPERTIES[property]
+            : undefined;
+        const value = declaration.slice(separator + 1).trim();
+        // Only simple values and color functions: no URLs, escapes, custom variables,
+        // !important, external resources, positioning or arbitrary CSS functions.
+        if (!key ||
+            !value ||
+            !/^[#a-z\d\s.,%()/+-]+$/i.test(value) ||
+            /[a-z-]+\s*\(/i.test(value.replace(/(?:rgb|hsl)a?\([\d\s.,%/+-]+\)/gi, '')))
+            continue;
+        style[key] = value;
+    }
+    return Object.keys(style).length ? style : undefined;
+}
+/** Presentational only: product cards never initiate requests. */
+export function DiscountDepotPricePreview({ variant, discount, children, locale, className, }) {
+    if (!isValidDiscount(discount, variant))
+        return _jsx(_Fragment, { children: children });
+    const formatter = new Intl.NumberFormat(locale ?? 'en', {
+        style: 'currency',
+        currency: discount.currencyCode,
+    });
+    const label = (typeof discount.ruleLabel === 'string' && discount.ruleLabel) ||
+        (typeof discount.message === 'string' ? discount.message : '');
+    const color = safePriceColor(discount.priceColor);
+    return (_jsxs("div", { className: className ?? 'discount-depot-price', "aria-label": "Price", role: "group", "aria-live": "polite", children: [discount.showOriginalPrice === true ? (_jsxs(_Fragment, { children: [_jsx("s", { children: formatter.format(Number(discount.originalPrice)) }), ' '] })) : null, _jsx("strong", { style: color ? { color } : undefined, children: formatter.format(Number(discount.displayPrice)) }), label ? (_jsx("p", { style: savedLabelStyle(discount.ruleLabelCss), children: label })) : null] }));
+}

package/dist/preview-session.d.ts

@@ -0,0 +1,2 @@
+/** Drop personalized preview caches when a shopper returns after login/logout. */
+export declare function usePreviewSessionRevision(): number;

package/dist/preview-session.js

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+/** Drop personalized preview caches when a shopper returns after login/logout. */
+export function usePreviewSessionRevision() {
+    const [revision, setRevision] = useState(0);
+    useEffect(() => {
+        if (typeof window === 'undefined' || typeof document === 'undefined')
+            return;
+        const refresh = () => setRevision(value => value + 1);
+        const visible = () => { if (document.visibilityState === 'visible')
+            refresh(); };
+        window.addEventListener('focus', refresh);
+        window.addEventListener('pageshow', refresh);
+        document.addEventListener('visibilitychange', visible);
+        return () => {
+            window.removeEventListener('focus', refresh);
+            window.removeEventListener('pageshow', refresh);
+            document.removeEventListener('visibilitychange', visible);
+        };
+    }, []);
+    return revision;
+}

package/dist/react.d.ts

@@ -0,0 +1,31 @@
+export { DiscountDepotBuyXGetY } from './buy-x-get-y.js';
+export type { DepotBuyXGetYOffer } from './buy-x-get-y-data.js';
+export { DiscountDepotVolumeTable } from './volume-table.js';
+export { DiscountDepotCartGoal, DiscountDepotCartGoalPreview } from './cart-goal.js';
+export type { DepotCartGoal, GoalCart } from './cart-goal-data.js';
+export { DiscountDepotCountdown } from './countdown.js';
+export type { DepotCountdown } from './countdown.js';
+export type { DiscountDepotVolumeTableProps } from './volume-table.js';
+export type { DepotVolumeTable } from './volume.js';
+export { DiscountDepotPricePreview, savedLabelStyle, safePriceColor, } from './presentation.js';
+export { DiscountDepotCollection } from './collection.js';
+import { type ReactNode } from 'react';
+export interface DiscountDepotPriceProps {
+    variant?: {
+        id: string;
+        price: {
+            amount: string;
+            currencyCode: string;
+        };
+    } | null;
+    /** Your existing price UI, used while loading or if no automatic discount applies. */
+    children: ReactNode;
+    /** Override only when mounting the resource route at a different path. */
+    endpoint?: string;
+    locale?: string;
+    className?: string;
+    /** Fetch and render volume tiers with the same PDP request. */
+    showVolumeTable?: boolean;
+    showBuyXGetY?: boolean;
+}
+export declare function DiscountDepotPrice({ variant, children, endpoint, locale, className, showVolumeTable, showBuyXGetY, }: DiscountDepotPriceProps): import("react").JSX.Element;

package/dist/react.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePreviewSessionRevision } from './preview-session.js';
+import { DiscountDepotBuyXGetY } from './buy-x-get-y.js';
+import { normalizeBuyXGetY } from './buy-x-get-y-data.js';
+export { DiscountDepotBuyXGetY } from './buy-x-get-y.js';
+import { DiscountDepotPricePreview } from './presentation.js';
+import { DiscountDepotVolumeTable } from './volume-table.js';
+import { DiscountDepotCountdown } from './countdown.js';
+import { normalizeVolumeTable } from './volume.js';
+export { DiscountDepotVolumeTable } from './volume-table.js';
+export { DiscountDepotCartGoal, DiscountDepotCartGoalPreview } from './cart-goal.js';
+export { DiscountDepotCountdown } from './countdown.js';
+export { DiscountDepotPricePreview, savedLabelStyle, safePriceColor, } from './presentation.js';
+export { DiscountDepotCollection } from './collection.js';
+import { useEffect, useState } from 'react';
+import { useLocation } from 'react-router';
+export function DiscountDepotPrice({ variant, children, endpoint, locale, className, showVolumeTable = false, showBuyXGetY = false, }) {
+    const { pathname } = useLocation();
+    const id = variant?.id;
+    const amount = variant?.price.amount;
+    const currency = variant?.price.currencyCode;
+    const prefix = pathname.match(/^\/[a-z]{2}-[a-z]{2}(?=\/|$)/i)?.[0] ?? '';
+    const url = endpoint ?? `${prefix}/api/discount-depot`;
+    const sessionRevision = usePreviewSessionRevision();
+    const key = JSON.stringify([id, amount, currency, url, showVolumeTable, showBuyXGetY, sessionRevision]);
+    const [result, setResult] = useState(null);
+    useEffect(() => {
+        if (!id || !amount || !currency)
+            return;
+        const controller = new AbortController();
+        // Keep the request in the same market as a localized Hydrogen PDP.
+        let active = true;
+        setResult(null);
+        const timeout = setTimeout(() => controller.abort(), 15000);
+        void (async () => {
+            try {
+                const response = await fetch(url, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        variantId: id,
+                        ...(showVolumeTable ? { includeVolumeTable: true } : {}),
+                        ...(showBuyXGetY ? { includeBuyXGetY: true } : {}),
+                    }),
+                    signal: controller.signal,
+                });
+                if (!response.ok)
+                    return;
+                const data = await response.json();
+                if (!active || data?.variantId !== id)
+                    return;
+                const discount = data.discount;
+                const buyXGetY = showBuyXGetY ? normalizeBuyXGetY(data.buyXGetY, currency) : [];
+                const volumeTable = showVolumeTable
+                    ? normalizeVolumeTable(data.volumeTable, {
+                        amount,
+                        currencyCode: currency,
+                    })
+                    : null;
+                if (active &&
+                    data.variantId === id &&
+                    discount?.eligible &&
+                    discount.currencyCode === currency &&
+                    Number(discount.originalPrice) === Number(amount) &&
+                    Number.isFinite(Number(discount.displayPrice)) &&
+                    Number(discount.displayPrice) >= 0 &&
+                    Number(discount.displayPrice) <= Number(amount)) {
+                    setResult({ key, discount, volumeTable, buyXGetY });
+                }
+                else {
+                    setResult({ key, discount: null, volumeTable, buyXGetY });
+                }
+            }
+            catch {
+                // Preserve the merchant's normal price when a request fails or is cancelled.
+            }
+            finally {
+                clearTimeout(timeout);
+            }
+        })();
+        return () => {
+            active = false;
+            controller.abort();
+            clearTimeout(timeout);
+        };
+    }, [id, amount, currency, url, key, showVolumeTable, showBuyXGetY]);
+    const discount = result?.key === key ? result.discount : null;
+    return (_jsxs(_Fragment, { children: [_jsx(DiscountDepotPricePreview, { variant: variant, discount: discount, locale: locale, className: className, children: children }), _jsx(DiscountDepotCountdown, { countdown: discount?.countdown }), showBuyXGetY && currency && _jsx(DiscountDepotBuyXGetY, { allowProductActions: true, offers: result?.key === key ? result.buyXGetY : [], currencyCode: currency, locale: locale }), showVolumeTable && (_jsx(DiscountDepotVolumeTable, { variant: variant, table: result?.key === key ? result.volumeTable : null, locale: locale }))] }));
+}

package/dist/server.d.ts

@@ -0,0 +1,53 @@
+import type { Storefront } from '@shopify/hydrogen';
+export type { DepotBuyXGetYOffer } from './buy-x-get-y-data.js';
+export { createDiscountDepotCartGoalRoute } from './cart-goal-server.js';
+export type { DepotCartGoal } from './cart-goal-data.js';
+import { type DepotCountdown } from './countdown-data.js';
+import { type CustomerIdentityContext, type CustomerPreviewCredentials } from './customer-identity.js';
+export type { DepotVolumeTable } from './volume.js';
+export interface DiscountContext extends CustomerIdentityContext {
+    storefront: Storefront;
+}
+/** All stores use the endpoint shipped in this package. */
+export declare function createDiscountDepotRoute({ apiUrl, batchApiUrl, }?: {
+    apiUrl?: string;
+    batchApiUrl?: string;
+}): {
+    loader: (args?: {
+        request: Request;
+    }) => Response;
+    action: ({ request, context, }: {
+        request: Request;
+        context: DiscountContext;
+    }) => Promise<Response>;
+};
+export interface DiscountInput {
+    productId: string;
+    variantId: string;
+    price: string;
+    currencyCode: string;
+    country: string;
+}
+export interface DepotDiscount {
+    countdown?: DepotCountdown | null;
+    eligible: boolean;
+    originalPrice: string;
+    displayPrice: string;
+    currencyCode: string;
+    message?: string;
+    ruleLabel?: string;
+    ruleLabelCss?: string;
+    priceColor?: string;
+    showOriginalPrice?: boolean;
+}
+/** Read-only price preview. Shopify remains responsible for cart/checkout totals. */
+export declare function getDepotDiscount(shop: string, input: DiscountInput, apiUrl?: string): Promise<DepotDiscount | null>;
+export declare function getDepotProductPreview(shop: string, input: DiscountInput, apiUrl?: string, includeVolumeTable?: boolean, credentials?: CustomerPreviewCredentials, includeBuyXGetY?: boolean): Promise<{
+    discount: DepotDiscount | null;
+    volumeTable: import("./volume.js").DepotVolumeTable | null;
+    buyXGetY: import("./buy-x-get-y-data.js").DepotBuyXGetYOffer[];
+}>;
+export declare function getDepotDiscounts(shop: string, inputs: DiscountInput[], apiUrl?: string, credentials?: CustomerPreviewCredentials): Promise<{
+    variantId: string;
+    discount: DepotDiscount | null;
+}[]>;