@standhigher/besttrack-page-extension 0.5.5 → 0.5.7

package/dist/index.js

@@ -11,7 +11,7 @@ import {
   isValidTrackingNumber,
   resolveShopifyResources,
   safeTrackingPageUrl
-} from "./chunk-KD7KFFFK.js";
+} from "./chunk-KEW42Y26.js";
 
 // src/ready-to-go.tsx
 import { createContext, useCallback as useCallback2, useContext, useEffect as useEffect2, useMemo as useMemo2, useRef, useState as useState2 } from "react";
@@ -910,12 +910,15 @@ var contentWidth = {
   boxSizing: "border-box"
 };
 var trackingProgressStyles = `
+.bt-progress-band { container-type: inline-size; }
+.bt-edd-card { --bt-progress-icon: 44px; }
 .bt-progress { container-type: inline-size; }
 .bt-progress__icon { width: 44px; height: 44px; }
 .bt-progress__line { top: 19px; }
 .bt-progress__copy { margin-top: 16px; }
 .bt-progress__label { font-size: 16px; line-height: 20px; }
 @container (max-width: 640px) {
+  .bt-edd-card { --bt-progress-icon: 32px; }
   .bt-progress__icon { width: 32px; height: 32px; }
   .bt-progress__line { top: 13px; }
   .bt-progress__copy { margin-top: 8px; }
@@ -1051,6 +1054,10 @@ function PackageContents({ items }) {
     ] }, item.id);
   }) });
 }
+function formatTrackPageRecommendPrice(price) {
+  if (!price || !Number.isInteger(price.amount)) return "";
+  return `$ ${(price.amount / 100).toFixed(2)}`;
+}
 function RecommendationCards({ items }) {
   const autoplay = useMemo(() => Autoplay({ delay: 3e3, stopOnInteraction: false, stopOnMouseEnter: true }), []);
   const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, align: "start", slidesToScroll: 1 }, [autoplay]);
@@ -1104,11 +1111,12 @@ function RecommendationCards({ items }) {
     !hideButtons && canScrollPrev ? /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Previous", onClick: () => emblaApi?.scrollPrev(), style: { ...buttonStyle, left: -40 }, children: arrow("15 18 9 12 15 6") }) : null,
     /* @__PURE__ */ jsx("div", { ref: emblaRef, style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx("div", { style: { display: "flex" }, children: items.map((item) => {
       const href = safeHref(item.href);
+      const displayPrice = formatTrackPageRecommendPrice(item.price);
       const card = /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("div", { style: { width: 262, height: 262, maxWidth: "100%", borderRadius: 8, border: "1px solid #E3E3E3", overflow: "hidden", background: "#f1f5f9" }, children: /* @__PURE__ */ jsx(ProductImage, { src: item.imageUrl, alt: item.title, size: 262 }) }),
         /* @__PURE__ */ jsxs("div", { style: { padding: "12px 8px", textAlign: "center", fontSize: 14 }, children: [
           /* @__PURE__ */ jsx("p", { style: { margin: 0, color: "#334155" }, children: item.title }),
-          item.price && formatTrackingPageMoney(item.price)?.amount ? /* @__PURE__ */ jsx("p", { style: { margin: "4px 0 0", fontWeight: 600, color: "#0f172a" }, children: formatTrackingPageMoney(item.price).amount }) : null,
+          displayPrice ? /* @__PURE__ */ jsx("p", { style: { margin: "4px 0 0", fontWeight: 600, color: "#0f172a" }, children: displayPrice }) : null,
           item.description ? /* @__PURE__ */ jsx("p", { style: { margin: "4px 0 0", color: "#64748b", fontSize: 13 }, children: item.description }) : null
         ] })
       ] });
@@ -1145,8 +1153,9 @@ function TrackingPageAdSlot({ ad, disableLink = false }) {
   if (!href || disableLink) return /* @__PURE__ */ jsx("div", { "data-tracking-page-ad": true, style: trackingPageAdSlotStyle, children: content });
   return /* @__PURE__ */ jsx("a", { "data-tracking-page-ad": true, href, target: "_blank", rel: "noopener noreferrer", style: trackingPageAdSlotStyle, children: content });
 }
-function EstimatedDeliveryCard({ dateText }) {
-  return /* @__PURE__ */ jsxs("div", { "aria-label": "Est. Delivery", style: { margin: "16px auto 0", width: "100%", boxSizing: "border-box", border: "1px solid transparent", borderRadius: 10, backgroundColor: "#eaf4ff", padding: "20px 22px 18px", textAlign: "left" }, children: [
+function EstimatedDeliveryCard({ dateText, steps = 5 }) {
+  const trackInset = `max(0px, calc(50% / ${Math.max(steps, 1)} - var(--bt-progress-icon, 44px) / 2))`;
+  return /* @__PURE__ */ jsxs("div", { "aria-label": "Est. Delivery", className: "bt-edd-card", style: { margin: `16px ${trackInset} 0`, width: "auto", boxSizing: "border-box", border: "1px solid transparent", borderRadius: 10, backgroundColor: "#eaf4ff", padding: "20px 22px 18px", textAlign: "left" }, children: [
     /* @__PURE__ */ jsx("p", { style: { margin: 0, color: "#202124", fontSize: 13, fontWeight: 700, lineHeight: 1.3 }, children: "Est. Delivery" }),
     /* @__PURE__ */ jsx("p", { style: { margin: "6px 0 0", color: "#202124", fontSize: 22, fontWeight: 700, lineHeight: 1.15, letterSpacing: 0, overflowWrap: "anywhere", wordBreak: "break-word" }, children: dateText }),
     /* @__PURE__ */ jsx("p", { style: { margin: "6px 0 0", color: "#5f6368", fontSize: 13, fontWeight: 400, lineHeight: 1.35 }, children: "Estimated time may update as tracking progresses." })
@@ -1449,8 +1458,10 @@ function ProgressResult({ result, showEstimatedDelivery = true, color }) {
       result.trackingNumber
     ] }),
     /* @__PURE__ */ jsx4("h2", { style: { margin: "clamp(24px, 8%, 48px) 0 0", fontSize: 32, lineHeight: 1.25, fontWeight: 700, color: "#303030", overflowWrap: "anywhere" }, children: result.status }),
-    showEstimatedDelivery && result.estimatedDelivery ? /* @__PURE__ */ jsx4(EstimatedDeliveryCard, { dateText: result.estimatedDelivery }) : null,
-    /* @__PURE__ */ jsx4(TrackingProgress, { steps, color })
+    /* @__PURE__ */ jsxs4("div", { className: "bt-progress-band", children: [
+      showEstimatedDelivery && result.estimatedDelivery ? /* @__PURE__ */ jsx4(EstimatedDeliveryCard, { dateText: result.estimatedDelivery, steps: steps.length }) : null,
+      /* @__PURE__ */ jsx4(TrackingProgress, { steps, color })
+    ] })
   ] });
 }
 function DeliveryResult({ heading, contentsHeading, carrierHeading, result, editing }) {
@@ -1475,7 +1486,6 @@ function DeliveryResult({ heading, contentsHeading, carrierHeading, result, edit
 }
 function ReadyToGoQueryEditor(block) {
   return /* @__PURE__ */ jsx4("section", { "aria-label": "Ready-to-go query editor", style: editorHeroStyle, children: /* @__PURE__ */ jsxs4("div", { role: "region", "aria-label": "Ready-to-go tracking query", style: editorFormCardStyle, children: [
-    /* @__PURE__ */ jsx4("h1", { style: { margin: "0 0 24px", textAlign: "center", fontSize: 28, lineHeight: 1.15, overflowWrap: "anywhere" }, children: /* @__PURE__ */ jsx4(InlineText, { block, name: "heading", fallback: "Track your order" }) }),
     /* @__PURE__ */ jsxs4("div", { style: { display: "flex", width: "100%", borderBottom: "1px solid #cbd5e1" }, children: [
       /* @__PURE__ */ jsx4("div", { style: { ...tabStyle(true), display: "flex", alignItems: "center", justifyContent: "center", cursor: "default" }, children: /* @__PURE__ */ jsx4(InlineText, { block, name: "trackingTabLabel", fallback: "Tracking Number" }) }),
       /* @__PURE__ */ jsx4("div", { style: { ...tabStyle(false), display: "flex", alignItems: "center", justifyContent: "center", cursor: "default" }, children: /* @__PURE__ */ jsx4(InlineText, { block, name: "orderTabLabel", fallback: "Order Number" }) })
@@ -1544,7 +1554,6 @@ function ReadyToGoQueryBlock(props) {
   const [localError, setLocalError] = useState2("");
   const autoQueryStarted = useRef(false);
   const previewDemoTrackingNumber = useRef(trackingNumber);
-  const heading = text(props, "heading");
   const submitLabel = text(props, "submitLabel", "Track Your Order");
   const trackingTabLabel = text(props, "trackingTabLabel", "Tracking Number");
   const orderTabLabel = text(props, "orderTabLabel", "Order Number");
@@ -1582,7 +1591,6 @@ function ReadyToGoQueryBlock(props) {
   };
   const loading = runtime.phase === "loading";
   return /* @__PURE__ */ jsx4("section", { style: heroStyle, children: /* @__PURE__ */ jsxs4("div", { role: "region", "aria-label": "Ready-to-go tracking query", style: formCardStyle, children: [
-    heading ? /* @__PURE__ */ jsx4("h1", { style: { margin: "0 0 24px", textAlign: "center", fontSize: 28, lineHeight: 1.15, overflowWrap: "anywhere" }, children: heading }) : null,
     /* @__PURE__ */ jsxs4("div", { role: "tablist", "aria-label": "Tracking method", style: { display: "flex", width: "100%", borderBottom: "1px solid #cbd5e1" }, children: [
       /* @__PURE__ */ jsx4("button", { type: "button", role: "tab", "aria-selected": mode === "tracking", onClick: () => {
         setMode("tracking");
@@ -1672,7 +1680,7 @@ var readyToGoBlocks = withTemplatePolicy([
     category: "BestTrack Ready-to-go",
     targets: ["web"],
     defaultProps: {
-      heading: "Track your order",
+      heading: "",
       submitLabel: "Track Your Order",
       submitButtonColor: "#111111",
       defaultTrackingNumber: "BT-2048-DEMO",
@@ -1684,14 +1692,13 @@ var readyToGoBlocks = withTemplatePolicy([
     defaultVariant: "default",
     variants: [{ id: "default", label: "Default" }],
     fields: {
-      heading: text2("Heading"),
-      submitLabel: text2("Button label"),
+      submitLabel: text2("Button label", { validation: { maxLength: 52 } }),
       submitButtonColor: { field: "besttrack.ready-to-go.text", label: "Button color", control: "color", group: "Style" },
-      defaultTrackingNumber: text2("Default tracking number"),
+      defaultTrackingNumber: text2("Default tracking number", { validation: { maxLength: 52 } }),
       defaultOrderNumber: text2("Default order number"),
       defaultQueryMode: text2("Default query mode"),
-      trackingTabLabel: text2("Tracking tab label"),
-      orderTabLabel: text2("Order tab label")
+      trackingTabLabel: text2("Tracking tab label", { validation: { maxLength: 52 } }),
+      orderTabLabel: text2("Order tab label", { validation: { maxLength: 52 } })
     },
     render: { web: ReadyToGoQueryBlock, editor: ReadyToGoQueryEditor }
   },
@@ -1719,9 +1726,9 @@ var readyToGoBlocks = withTemplatePolicy([
     defaultVariant: "default",
     variants: [{ id: "default", label: "Default" }, { id: "compact", label: "Compact", theme: { spacing: "12px" } }],
     fields: {
-      heading: text2("Heading"),
-      contentsHeading: text2("Package contents heading"),
-      carrierHeading: text2("Carrier heading"),
+      heading: text2("Heading", { validation: { maxLength: 52 } }),
+      contentsHeading: text2("Package contents heading", { validation: { maxLength: 52 } }),
+      carrierHeading: text2("Carrier heading", { validation: { maxLength: 52 } }),
       adImageUrl: { field: "besttrack.ready-to-go.asset", label: "Advertisement image", control: "asset", persist: false, group: "Advertisement" },
       adLinkUrl: { field: "besttrack.ready-to-go.url", label: "Advertisement link", control: "url", persist: false, group: "Advertisement", validation: { allowRelativeUrl: true, allowedUrlProtocols: ["https:", "http:"] } }
     },
@@ -1737,17 +1744,17 @@ var readyToGoBlocks = withTemplatePolicy([
     defaultVariant: "default",
     variants: [{ id: "default", label: "Default" }, { id: "grid", label: "Grid", theme: { "color.surface": "#ffffff" } }],
     fields: {
-      heading: text2("Heading"),
+      heading: text2("Heading", { validation: { maxLength: 100 } }),
       products: { field: "besttrack.ready-to-go.products", label: "\u63A8\u8350\u5546\u54C1 (Shopify)", control: "products", group: "Content" }
     },
     render: { web: ReadyToGoRecommendationsBlock, editor: ReadyToGoRecommendationsEditor }
   }
-], ["besttrack.ready-to-go.query"]);
+], ["besttrack.ready-to-go.query", "besttrack.ready-to-go.progress", "besttrack.ready-to-go.delivery"]);
 var readyToGoTemplatePolicy = defineTemplatePolicy(
   "besttrack.ready-to-go",
   "Ready-to-go",
   readyToGoBlocks.map((block) => block.type),
-  ["besttrack.ready-to-go.query"]
+  ["besttrack.ready-to-go.query", "besttrack.ready-to-go.progress", "besttrack.ready-to-go.delivery"]
 );
 function createReadyToGoTemplate() {
   return {

package/dist/validation.js

@@ -2,7 +2,7 @@ import {
   isSafeTrackingPageUrl,
   isShopifyResourceReference,
   isValidTrackingNumber
-} from "./chunk-KD7KFFFK.js";
+} from "./chunk-KEW42Y26.js";
 
 // src/validation.ts
 var textField = { field: "besttrack.validation.text", control: "text" };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standhigher/besttrack-page-extension",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "description": "BestTrack business extension entry point for @standhigher/puck-page-builder.",
   "type": "module",
   "files": [
@@ -22,7 +22,7 @@
   "dependencies": {
     "embla-carousel-autoplay": "^8.6.0",
     "embla-carousel-react": "^8.6.0",
-    "@standhigher/puck-page-builder": "0.12.5"
+    "@standhigher/puck-page-builder": "0.12.7"
   },
   "devDependencies": {
     "tsup": "^8.5.1",

package/dist/{chunk-KD7KFFFK.js → chunk-KEW42Y26.js}

@@ -1,3 +1,29 @@
+// src/tracking-page-url.ts
+function hasControlCharacter(value) {
+  return [...value].some((character) => character.charCodeAt(0) < 32);
+}
+function isLocalDevelopmentHost(hostname) {
+  return hostname === "localhost" || hostname === "127.0.0.1" || hostname === "[::1]";
+}
+function allowsLocalhostByDefault() {
+  return typeof window !== "undefined" && isLocalDevelopmentHost(window.location.hostname);
+}
+function safeTrackingPageUrl(value, options = {}) {
+  if (typeof value !== "string" || !value || value.trim() !== value || hasControlCharacter(value)) return void 0;
+  try {
+    const url = new URL(value);
+    if (url.username || url.password) return void 0;
+    if (url.protocol === "https:" && !isLocalDevelopmentHost(url.hostname)) return url.toString();
+    if (url.protocol === "http:" && isLocalDevelopmentHost(url.hostname) && (options.allowLocalhost ?? allowsLocalhostByDefault())) return url.toString();
+    return void 0;
+  } catch {
+    return void 0;
+  }
+}
+function isSafeTrackingPageUrl(value, options) {
+  return safeTrackingPageUrl(value, options) !== void 0;
+}
+
 // src/tracking-page-runtime.ts
 function isValidTrackingNumber(value) {
   return /^[A-Za-z0-9_-]{6,64}$/.test(value);
@@ -27,32 +53,6 @@ function formatTrackingPageMoney(value, locale = "en-US") {
   }
 }
 
-// src/tracking-page-url.ts
-function hasControlCharacter(value) {
-  return [...value].some((character) => character.charCodeAt(0) < 32);
-}
-function isLocalDevelopmentHost(hostname) {
-  return hostname === "localhost" || hostname === "127.0.0.1" || hostname === "[::1]";
-}
-function allowsLocalhostByDefault() {
-  return typeof window !== "undefined" && isLocalDevelopmentHost(window.location.hostname);
-}
-function safeTrackingPageUrl(value, options = {}) {
-  if (typeof value !== "string" || !value || value.trim() !== value || hasControlCharacter(value)) return void 0;
-  try {
-    const url = new URL(value);
-    if (url.username || url.password) return void 0;
-    if (url.protocol === "https:" && !isLocalDevelopmentHost(url.hostname)) return url.toString();
-    if (url.protocol === "http:" && isLocalDevelopmentHost(url.hostname) && (options.allowLocalhost ?? allowsLocalhostByDefault())) return url.toString();
-    return void 0;
-  } catch {
-    return void 0;
-  }
-}
-function isSafeTrackingPageUrl(value, options) {
-  return safeTrackingPageUrl(value, options) !== void 0;
-}
-
 // src/shopify-resource-contract.ts
 var resourcePattern = /^gid:\/\/shopify\/(Product|Collection)\/[1-9]\d*$/;
 function isShopifyResourceReference(value, kind) {
@@ -112,14 +112,14 @@ function getShopifyResourceResolutionError(reference, resolution) {
 }
 
 export {
+  safeTrackingPageUrl,
+  isSafeTrackingPageUrl,
   isValidTrackingNumber,
   isValidOrderNumber,
   isValidOrderEmail,
   isEmptyTrackingPageResult,
   isTrackingPageResourceReference,
   formatTrackingPageMoney,
-  safeTrackingPageUrl,
-  isSafeTrackingPageUrl,
   isShopifyResourceReference,
   resolveShopifyResources,
   getResolvedShopifyResource,