@standhigher/besttrack-page-extension 0.5.0 → 0.5.2

package/dist/index.d.ts

@@ -314,8 +314,10 @@ type ReadyToGoRuntimeProviderProps = {
     autoQueryFromUrl?: boolean;
     /** Host-decided display state. Omitted values follow the original powered-by hide rule. */
     watermark?: TrackingPageWatermark;
+    /** Admin-only promotion preview; live storefronts continue to use result.ad. */
+    adPreview?: TrackingPageAd | null;
 };
-declare function ReadyToGoRuntimeProvider({ children, query: injectedQuery, queryRecommendations, transport, autoQueryFromUrl, watermark }: ReadyToGoRuntimeProviderProps): react.JSX.Element;
+declare function ReadyToGoRuntimeProvider({ children, query: injectedQuery, queryRecommendations, transport, autoQueryFromUrl, watermark, adPreview }: ReadyToGoRuntimeProviderProps): react.JSX.Element;
 
 /**
  * Compatibility metadata for template-aware hosts.

package/dist/index.js

@@ -834,9 +834,22 @@ var pageFont = { fontFamily: "var(--pb-font-family, Inter, system-ui, sans-serif
 var contentWidth = {
   width: "min(1248px, 100%)",
   margin: "0 auto",
-  padding: "48px 24px",
+  padding: "48px clamp(16px, 4%, 24px)",
   boxSizing: "border-box"
 };
+var trackingProgressStyles = `
+.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-progress__icon { width: 32px; height: 32px; }
+  .bt-progress__line { top: 13px; }
+  .bt-progress__copy { margin-top: 8px; }
+  .bt-progress__label { font-size: 11px; line-height: 14px; }
+}
+`;
 function text(props, key, fallback = "") {
   return typeof props[key] === "string" ? props[key] : fallback;
 }
@@ -902,21 +915,26 @@ function ProductImage({ src, alt, size = 60 }) {
 }
 function TrackingProgress({ steps }) {
   const cells = Math.max(steps.length, 1);
-  const columns = cells <= 1 ? "44px" : Array.from({ length: cells - 1 }, () => "44px minmax(20px, 1fr)").join(" ") + " 44px";
-  return /* @__PURE__ */ jsx("div", { role: "region", "aria-label": "Delivery progress", style: { marginTop: 32, width: "100%", maxWidth: 1200, marginLeft: "auto", marginRight: "auto", overflow: "visible" }, children: /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: columns, alignItems: "start", columnGap: 8, width: "100%" }, children: steps.map((step, index) => {
-    const done = step.state === "complete" || step.state === "current";
-    const nextDone = steps[index + 1]?.state === "complete" || steps[index + 1]?.state === "current";
-    return /* @__PURE__ */ jsxs("div", { style: { display: "contents" }, children: [
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", overflow: "visible" }, children: [
-        /* @__PURE__ */ jsx("span", { "aria-label": step.label + " " + step.state, style: { display: "flex", width: 44, height: 44, flexShrink: 0, alignItems: "center", justifyContent: "center", borderRadius: 9999, border: "1px solid #0f172a", background: done ? "#0f172a" : "#fff", color: "#0f172a" }, children: /* @__PURE__ */ jsx(StepIcon, { name: step.icon ?? (index === 0 || index === steps.length - 1 ? "check" : index === 1 ? "bag" : index === 2 ? "truck" : "box"), done }) }),
-        /* @__PURE__ */ jsxs("div", { style: { width: "max-content", textAlign: "center", marginTop: 16 }, children: [
-          /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: 16, lineHeight: "20px", fontWeight: 500, color: "#334155" }, children: step.label }),
-          step.date ? /* @__PURE__ */ jsx("p", { style: { margin: "8px 0 0", fontSize: 14, lineHeight: "18px", color: "#94a3b8" }, children: step.date }) : null
-        ] })
-      ] }),
-      index < steps.length - 1 ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { display: "block", width: "100%", minWidth: 0, height: 6, marginTop: 19, borderRadius: 999, background: done && nextDone ? "#1a1a1a" : "rgba(0, 0, 0, 0.25)" } }) : null
-    ] }, step.id);
-  }) }) });
+  return /* @__PURE__ */ jsxs("div", { className: "bt-progress", role: "region", "aria-label": "Delivery progress", style: { marginTop: 32, width: "100%", maxWidth: 1200, marginLeft: "auto", marginRight: "auto", overflow: "visible" }, children: [
+    /* @__PURE__ */ jsx("style", { children: trackingProgressStyles }),
+    /* @__PURE__ */ jsxs("div", { style: { position: "relative", display: "grid", gridTemplateColumns: `repeat(${cells}, minmax(0, 1fr))`, columnGap: 4, width: "100%", alignItems: "start" }, children: [
+      cells > 1 ? /* @__PURE__ */ jsx("div", { className: "bt-progress__line", "aria-hidden": "true", style: { position: "absolute", left: `calc(50% / ${cells})`, right: `calc(50% / ${cells})`, height: 6, display: "flex", zIndex: 0, pointerEvents: "none" }, children: steps.slice(0, -1).map((step, index) => {
+        const done = step.state === "complete" || step.state === "current";
+        const nextDone = steps[index + 1]?.state === "complete" || steps[index + 1]?.state === "current";
+        return /* @__PURE__ */ jsx("span", { style: { flex: 1, height: 6, borderRadius: 999, background: done && nextDone ? "#1a1a1a" : "rgba(0, 0, 0, 0.25)" } }, step.id + "-line");
+      }) }) : null,
+      steps.map((step, index) => {
+        const done = step.state === "complete" || step.state === "current";
+        return /* @__PURE__ */ jsxs("div", { style: { minWidth: 0, display: "flex", flexDirection: "column", alignItems: "center", position: "relative", zIndex: 1 }, children: [
+          /* @__PURE__ */ jsx("span", { className: "bt-progress__icon", "aria-label": step.label + " " + step.state, style: { display: "flex", flexShrink: 0, alignItems: "center", justifyContent: "center", borderRadius: 9999, border: "1px solid #0f172a", background: done ? "#0f172a" : "#fff", color: "#0f172a" }, children: /* @__PURE__ */ jsx(StepIcon, { name: step.icon ?? (index === 0 || index === steps.length - 1 ? "check" : index === 1 ? "bag" : index === 2 ? "truck" : "box"), done }) }),
+          /* @__PURE__ */ jsxs("div", { className: "bt-progress__copy", style: { width: "100%", maxWidth: "100%", boxSizing: "border-box", textAlign: "center", padding: "0 2px" }, children: [
+            /* @__PURE__ */ jsx("p", { className: "bt-progress__label", style: { margin: 0, fontWeight: 500, color: "#334155", overflowWrap: "anywhere", wordBreak: "break-word" }, children: step.label }),
+            step.date ? /* @__PURE__ */ jsx("p", { style: { margin: "6px 0 0", fontSize: 12, lineHeight: "16px", color: "#94a3b8", overflowWrap: "anywhere" }, children: step.date }) : null
+          ] })
+        ] }, step.id);
+      })
+    ] })
+  ] });
 }
 function ShippingTimeline({ events }) {
   if (!events.length) {
@@ -968,11 +986,11 @@ function RecommendationCards({ items }) {
   }, [emblaApi]);
   useEffect(() => {
     if (!emblaApi) return;
+    const frame = window.requestAnimationFrame(onSelect);
     emblaApi.on("select", onSelect);
     emblaApi.on("reInit", onSelect);
-    const frame = requestAnimationFrame(onSelect);
     return () => {
-      cancelAnimationFrame(frame);
+      window.cancelAnimationFrame(frame);
       emblaApi.off("select", onSelect);
       emblaApi.off("reInit", onSelect);
     };
@@ -981,12 +999,9 @@ function RecommendationCards({ items }) {
     if (typeof window.matchMedia !== "function") return;
     const media = window.matchMedia("(max-width: 768px)");
     const update = () => setHideButtons(media.matches);
-    const frame = requestAnimationFrame(update);
+    update();
     media.addEventListener("change", update);
-    return () => {
-      cancelAnimationFrame(frame);
-      media.removeEventListener("change", update);
-    };
+    return () => media.removeEventListener("change", update);
   }, []);
   if (items.length === 0) return null;
   const arrow = (points) => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("polyline", { points }) });
@@ -1007,7 +1022,7 @@ function RecommendationCards({ items }) {
     color: "#333",
     padding: 0
   };
-  return /* @__PURE__ */ jsxs("div", { "aria-label": "Recommended products carousel", style: { position: "relative", marginLeft: 48, marginRight: 48 }, children: [
+  return /* @__PURE__ */ jsxs("div", { "aria-label": "Recommended products carousel", style: { position: "relative", marginLeft: "min(48px, 4%)", marginRight: "min(48px, 4%)" }, children: [
     !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);
@@ -1024,14 +1039,30 @@ function RecommendationCards({ items }) {
     !hideButtons && canScrollNext ? /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Next", onClick: () => emblaApi?.scrollNext(), style: { ...buttonStyle, right: -40 }, children: arrow("9 18 15 12 9 6") }) : null
   ] });
 }
-function TrackingPageAdSlot({ ad }) {
+var trackingPageAdSlotStyle = {
+  display: "block",
+  width: "100%",
+  maxWidth: 500,
+  aspectRatio: "20 / 9",
+  borderRadius: 8,
+  overflow: "hidden",
+  textDecoration: "none"
+};
+var trackingPageAdImageStyle = {
+  display: "block",
+  width: "100%",
+  height: "100%",
+  objectFit: "fill",
+  objectPosition: "center"
+};
+function TrackingPageAdSlot({ ad, disableLink = false }) {
   const [failedUrl, setFailedUrl] = useState();
   const imageUrl = safeImageUrl(ad?.imageUrl);
   if (!imageUrl || failedUrl === imageUrl) return null;
-  const content = /* @__PURE__ */ jsx("img", { src: imageUrl, alt: ad?.alt ?? "Promotion", loading: "lazy", onError: () => setFailedUrl(imageUrl), style: { display: "block", width: "100%", height: "auto", objectFit: "cover" } });
+  const content = /* @__PURE__ */ jsx("img", { src: imageUrl, alt: ad?.alt ?? "Promotion", loading: "lazy", onError: () => setFailedUrl(imageUrl), style: trackingPageAdImageStyle });
   const href = safeHref(ad?.href);
-  if (!href) return /* @__PURE__ */ jsx("div", { "data-tracking-page-ad": true, children: content });
-  return /* @__PURE__ */ jsx("a", { "data-tracking-page-ad": true, href, target: "_blank", rel: "noopener noreferrer", children: content });
+  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: [
@@ -1047,7 +1078,11 @@ function IdleMessage({ children }) {
   return /* @__PURE__ */ jsx("p", { style: { margin: 0, textAlign: "center", color: "var(--pb-color-muted, #64748b)" }, children });
 }
 function SkeletonRow() {
-  return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { display: "grid", gridTemplateColumns: "44px minmax(20px, 1fr) 44px minmax(20px, 1fr) 44px minmax(20px, 1fr) 44px minmax(20px, 1fr) 44px", columnGap: 8, width: "100%", maxWidth: 1200, margin: "32px auto 0" }, children: Array.from({ length: 5 }, (_, index) => /* @__PURE__ */ jsx("span", { style: { display: "block", width: 44, height: 44, borderRadius: 9999, background: "#e2e8f0" } }, index)).flatMap((circle, index, list) => index < list.length - 1 ? [circle, /* @__PURE__ */ jsx("span", { style: { display: "block", height: 6, marginTop: 19, borderRadius: 999, background: "#e2e8f0" } }, "line-" + index)] : [circle]) });
+  return /* @__PURE__ */ jsxs("div", { className: "bt-progress", "aria-hidden": "true", style: { position: "relative", display: "grid", gridTemplateColumns: "repeat(5, minmax(0, 1fr))", columnGap: 4, width: "100%", maxWidth: 1200, margin: "32px auto 0" }, children: [
+    /* @__PURE__ */ jsx("style", { children: trackingProgressStyles }),
+    /* @__PURE__ */ jsx("span", { className: "bt-progress__line", style: { position: "absolute", left: "10%", right: "10%", height: 6, borderRadius: 999, background: "#e2e8f0" } }),
+    Array.from({ length: 5 }, (_, index) => /* @__PURE__ */ jsx("span", { className: "bt-progress__icon", style: { display: "block", justifySelf: "center", borderRadius: 9999, background: "#e2e8f0" } }, index))
+  ] });
 }
 
 // src/shopify-track-page/assets/not-found.png.ts
@@ -1097,7 +1132,7 @@ function previewReadyToGoTracking(trackingNumber = "BT-2048-DEMO") {
 async function queryMockReadyToGoTracking(request) {
   return previewReadyToGoTracking(request.mode === "tracking" ? request.trackingNumber : request.orderNumber);
 }
-function ReadyToGoRuntimeProvider({ children, query: injectedQuery, queryRecommendations, transport, autoQueryFromUrl, watermark }) {
+function ReadyToGoRuntimeProvider({ children, query: injectedQuery, queryRecommendations, transport, autoQueryFromUrl, watermark, adPreview }) {
   const [state, setState] = useState2({ phase: "idle" });
   const [recommendations, setRecommendations] = useState2(() => queryRecommendations || transport ? { phase: "loading", items: [] } : { phase: "success", items: previewReadyToGoTracking().recommendations ?? [] });
   const requestId = useRef(0);
@@ -1143,7 +1178,7 @@ function ReadyToGoRuntimeProvider({ children, query: injectedQuery, queryRecomme
     () => watermark ?? { visible: !shouldHidePoweredBy() },
     [watermark]
   );
-  const value = useMemo2(() => ({ ...state, query, recommendations, autoQueryFromUrl: resolveAutoQuery, watermark: resolvedWatermark }), [query, recommendations, resolveAutoQuery, resolvedWatermark, state]);
+  const value = useMemo2(() => ({ ...state, adPreview, query, recommendations, autoQueryFromUrl: resolveAutoQuery, watermark: resolvedWatermark }), [adPreview, query, recommendations, resolveAutoQuery, resolvedWatermark, state]);
   return /* @__PURE__ */ jsx3(ReadyToGoRuntimeContext.Provider, { value, children });
 }
 function useReadyToGoRuntime() {
@@ -1160,7 +1195,7 @@ var heroStyle = {
   placeItems: "center",
   overflow: "hidden",
   backgroundColor: "#fff",
-  padding: "48px 24px",
+  padding: "48px clamp(16px, 4%, 24px)",
   boxSizing: "border-box"
 };
 var editorHeroStyle = {
@@ -1169,7 +1204,7 @@ var editorHeroStyle = {
   display: "grid",
   placeItems: "center",
   backgroundColor: "#fff",
-  padding: "48px 24px",
+  padding: "48px clamp(16px, 4%, 24px)",
   boxSizing: "border-box"
 };
 var formCardStyle = {
@@ -1181,7 +1216,7 @@ var formCardStyle = {
   borderRadius: "var(--pb-radius, 8px)",
   background: "var(--pb-color-surface, #fff)",
   color: "var(--pb-color-text, #0f172a)",
-  padding: 40,
+  padding: "clamp(20px, 7%, 40px)",
   boxSizing: "border-box",
   boxShadow: "0 8px 24px rgba(0, 0, 0, 0.12)"
 };
@@ -1189,9 +1224,10 @@ var editorFormCardStyle = { ...formCardStyle, minHeight: 0 };
 var tabStyle = (active) => ({
   appearance: "none",
   flex: 1,
+  minWidth: 0,
   minHeight: 53,
   margin: 0,
-  padding: "16px 10px",
+  padding: "12px 6px",
   font: "inherit",
   fontSize: 15,
   lineHeight: "21px",
@@ -1201,7 +1237,9 @@ var tabStyle = (active) => ({
   borderBottom: active ? "2px solid #0f172a" : "2px solid transparent",
   borderRadius: 0,
   color: active ? "#0f172a" : "#94a3b8",
-  cursor: "pointer"
+  cursor: "pointer",
+  textAlign: "center",
+  overflowWrap: "anywhere"
 });
 var inputStyle = {
   width: "100%",
@@ -1216,6 +1254,28 @@ var inputStyle = {
   color: "#334155",
   boxSizing: "border-box"
 };
+var hexColor = /^#(?:[\da-f]{3}|[\da-f]{4}|[\da-f]{6}|[\da-f]{8})$/i;
+var defaultSubmitButtonColor = "var(--pb-color-primary, #111)";
+function submitButtonBackground(props, loading = false) {
+  if (loading) return "#475569";
+  const value = text(props, "submitButtonColor");
+  return hexColor.test(value) ? value : defaultSubmitButtonColor;
+}
+function submitButtonStyle(props, loading = false) {
+  return {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    minHeight: 58,
+    marginTop: 8,
+    borderRadius: "var(--pb-radius, 8px)",
+    background: submitButtonBackground(props, loading),
+    color: "#fff",
+    fontSize: 15,
+    fontWeight: 600
+  };
+}
 function ReadyToGoTextField({ value, onChange }) {
   return /* @__PURE__ */ jsx3("input", { "aria-label": "Ready-to-go text", value: typeof value === "string" ? value : "", onChange: (event) => onChange(event.target.value) });
 }
@@ -1259,23 +1319,23 @@ function eventsFrom(result) {
 function ProgressResult({ result, showEstimatedDelivery = true }) {
   const steps = result.progress?.length ? result.progress : defaultProgress(result.status);
   return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    /* @__PURE__ */ jsxs3("p", { style: { margin: 0, fontSize: 20, lineHeight: 1.4, color: "#000" }, children: [
+    /* @__PURE__ */ jsxs3("p", { style: { margin: 0, fontSize: 20, lineHeight: 1.4, color: "#000", overflowWrap: "anywhere" }, children: [
       "Tracking: ",
       result.trackingNumber
     ] }),
-    /* @__PURE__ */ jsx3("h2", { style: { margin: "48px 0 0", fontSize: 32, lineHeight: "40px", fontWeight: 700, color: "#303030" }, children: result.status }),
+    /* @__PURE__ */ jsx3("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__ */ jsx3(EstimatedDeliveryCard, { dateText: result.estimatedDelivery }) : null,
     /* @__PURE__ */ jsx3(TrackingProgress, { steps })
   ] });
 }
-function DeliveryResult({ heading, contentsHeading, carrierHeading, result }) {
+function DeliveryResult({ heading, contentsHeading, carrierHeading, result, editing }) {
   return /* @__PURE__ */ jsxs3("div", { style: { ...contentWidth, display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 280px), 500px))", gap: 40, justifyContent: "center", alignItems: "start" }, children: [
     /* @__PURE__ */ jsxs3("div", { children: [
       /* @__PURE__ */ jsx3("h3", { style: { margin: 0, fontSize: 20, lineHeight: "20px", fontWeight: 700 }, children: heading }),
       /* @__PURE__ */ jsx3(ShippingTimeline, { events: eventsFrom(result) })
     ] }),
     /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", gap: 24 }, children: [
-      /* @__PURE__ */ jsx3(TrackingPageAdSlot, { ad: result.ad }),
+      /* @__PURE__ */ jsx3(TrackingPageAdSlot, { ad: result.ad, disableLink: editing }),
       /* @__PURE__ */ jsxs3("div", { children: [
         /* @__PURE__ */ jsx3("h3", { style: { margin: "0 0 12px", fontSize: 18, fontWeight: 700 }, children: contentsHeading }),
         /* @__PURE__ */ jsx3(PackageContents, { items: result.orderItems ?? [] })
@@ -1290,7 +1350,7 @@ function DeliveryResult({ heading, contentsHeading, carrierHeading, result }) {
 }
 function ReadyToGoQueryEditor(block) {
   return /* @__PURE__ */ jsx3("section", { "aria-label": "Ready-to-go query editor", style: editorHeroStyle, children: /* @__PURE__ */ jsxs3("div", { role: "region", "aria-label": "Ready-to-go tracking query", style: editorFormCardStyle, children: [
-    /* @__PURE__ */ jsx3("h1", { style: { margin: "0 0 24px", textAlign: "center", fontSize: 28, lineHeight: 1.15 }, children: /* @__PURE__ */ jsx3(InlineText, { block, name: "heading", fallback: "Track your order" }) }),
+    /* @__PURE__ */ jsx3("h1", { style: { margin: "0 0 24px", textAlign: "center", fontSize: 28, lineHeight: 1.15, overflowWrap: "anywhere" }, children: /* @__PURE__ */ jsx3(InlineText, { block, name: "heading", fallback: "Track your order" }) }),
     /* @__PURE__ */ jsxs3("div", { style: { display: "flex", width: "100%", borderBottom: "1px solid #cbd5e1" }, children: [
       /* @__PURE__ */ jsx3("div", { style: { ...tabStyle(true), display: "flex", alignItems: "center", justifyContent: "center", cursor: "default" }, children: /* @__PURE__ */ jsx3(InlineText, { block, name: "trackingTabLabel", fallback: "Tracking Number" }) }),
       /* @__PURE__ */ jsx3("div", { style: { ...tabStyle(false), display: "flex", alignItems: "center", justifyContent: "center", cursor: "default" }, children: /* @__PURE__ */ jsx3(InlineText, { block, name: "orderTabLabel", fallback: "Order Number" }) })
@@ -1311,7 +1371,7 @@ function ReadyToGoQueryEditor(block) {
           }
         }
       ),
-      /* @__PURE__ */ jsx3("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", minHeight: 58, marginTop: 8, borderRadius: "var(--pb-radius, 8px)", background: "var(--pb-color-primary, #111)", color: "#fff", fontSize: 15, fontWeight: 600 }, children: /* @__PURE__ */ jsx3(InlineText, { block, name: "submitLabel", fallback: "Track Your Order" }) })
+      /* @__PURE__ */ jsx3("div", { style: submitButtonStyle(block), children: /* @__PURE__ */ jsx3(InlineText, { block, name: "submitLabel", fallback: "Track Your Order" }) })
     ] }),
     /* @__PURE__ */ jsx3("p", { style: { marginTop: "auto", paddingTop: 28, textAlign: "center", fontSize: 12, lineHeight: "17px", fontStyle: "italic", color: "#b8b8b8" }, children: "Powered by BestTrack" })
   ] }) });
@@ -1320,13 +1380,15 @@ function ReadyToGoProgressEditor() {
   return /* @__PURE__ */ jsx3("section", { "aria-label": "Ready-to-go progress editor", style: { ...pageFont, background: "var(--pb-color-background, #fff)", color: "var(--pb-color-text, #0f172a)", borderBottom: "1px solid #f1f5f9" }, children: /* @__PURE__ */ jsx3("div", { style: { ...contentWidth, textAlign: "center", width: "min(1248px, 100%)" }, children: /* @__PURE__ */ jsx3(ProgressResult, { result: previewReadyToGoTracking(), showEstimatedDelivery: false }) }) });
 }
 function ReadyToGoDeliveryEditor(block) {
+  const { adPreview } = useReadyToGoRuntime();
   return /* @__PURE__ */ jsx3("section", { "aria-label": "Ready-to-go delivery editor", style: { ...pageFont, background: "var(--pb-color-background, #fff)", color: "var(--pb-color-text, #0f172a)", borderBottom: "1px solid #f1f5f9" }, children: /* @__PURE__ */ jsx3(
     DeliveryResult,
     {
       heading: /* @__PURE__ */ jsx3(InlineText, { block, name: "heading", fallback: "Shipping Details" }),
       contentsHeading: /* @__PURE__ */ jsx3(InlineText, { block, name: "contentsHeading", fallback: "Package Contents" }),
       carrierHeading: /* @__PURE__ */ jsx3(InlineText, { block, name: "carrierHeading", fallback: "Carrier" }),
-      result: previewReadyToGoTracking()
+      editing: true,
+      result: { ...previewReadyToGoTracking(), ad: adPreview ?? void 0 }
     }
   ) });
 }
@@ -1339,7 +1401,7 @@ function ReadyToGoRecommendationsEditor(block) {
     href: product.handle ? `/products/${product.handle}` : void 0
   }));
   const items = selected.length ? selected : previewReadyToGoTracking().recommendations ?? [];
-  return /* @__PURE__ */ jsx3("section", { "aria-label": "Ready-to-go recommendations editor", style: { ...pageFont, background: "var(--pb-color-background, #fff)", color: "var(--pb-color-text, #0f172a)" }, children: /* @__PURE__ */ jsxs3("div", { style: { ...contentWidth, padding: "48px 24px" }, children: [
+  return /* @__PURE__ */ jsx3("section", { "aria-label": "Ready-to-go recommendations editor", style: { ...pageFont, background: "var(--pb-color-background, #fff)", color: "var(--pb-color-text, #0f172a)" }, children: /* @__PURE__ */ jsxs3("div", { style: contentWidth, children: [
     /* @__PURE__ */ jsx3("h3", { style: { margin: 0, textAlign: "center", fontSize: 20, lineHeight: "20px", fontWeight: 700 }, children: /* @__PURE__ */ jsx3(InlineText, { block, name: "heading", fallback: "You may also like..." }) }),
     /* @__PURE__ */ jsx3("div", { style: { marginTop: 24 }, children: /* @__PURE__ */ jsx3(RecommendationCards, { items }) })
   ] }) });
@@ -1383,7 +1445,7 @@ function ReadyToGoQueryBlock(props) {
   };
   const loading = runtime.phase === "loading";
   return /* @__PURE__ */ jsx3("section", { style: heroStyle, children: /* @__PURE__ */ jsxs3("div", { role: "region", "aria-label": "Ready-to-go tracking query", style: formCardStyle, children: [
-    heading ? /* @__PURE__ */ jsx3("h1", { style: { margin: "0 0 24px", textAlign: "center", fontSize: 28, lineHeight: 1.15 }, children: heading }) : null,
+    heading ? /* @__PURE__ */ jsx3("h1", { style: { margin: "0 0 24px", textAlign: "center", fontSize: 28, lineHeight: 1.15, overflowWrap: "anywhere" }, children: heading }) : null,
     /* @__PURE__ */ jsxs3("div", { role: "tablist", "aria-label": "Tracking method", style: { display: "flex", width: "100%", borderBottom: "1px solid #cbd5e1" }, children: [
       /* @__PURE__ */ jsx3("button", { type: "button", role: "tab", "aria-selected": mode === "tracking", onClick: () => {
         setMode("tracking");
@@ -1405,7 +1467,7 @@ function ReadyToGoQueryBlock(props) {
         /* @__PURE__ */ jsx3("input", { id: "ready-to-go-tracking-number", "aria-label": "Tracking number", value: trackingNumber, onChange: (event) => setTrackingNumber(event.target.value), placeholder: "Tracking Number", style: inputStyle })
       ] }),
       localError ? /* @__PURE__ */ jsx3("p", { style: { margin: 0, textAlign: "center", fontSize: 12, color: "#f43f5e" }, children: localError }) : null,
-      /* @__PURE__ */ jsx3("button", { type: "submit", disabled: loading, style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", minHeight: 58, marginTop: 8, border: 0, borderRadius: "var(--pb-radius, 8px)", background: loading ? "#475569" : "var(--pb-color-primary, #111)", color: "#fff", font: "inherit", fontSize: 15, fontWeight: 600, cursor: loading ? "wait" : "pointer", opacity: loading ? 0.7 : 1 }, children: loading ? "Tracking..." : submitLabel }),
+      /* @__PURE__ */ jsx3("button", { type: "submit", disabled: loading, style: { ...submitButtonStyle(props, loading), border: 0, font: "inherit", fontSize: 15, fontWeight: 600, cursor: loading ? "wait" : "pointer", opacity: loading ? 0.7 : 1 }, children: loading ? "Tracking..." : submitLabel }),
       runtime.phase === "error" ? /* @__PURE__ */ jsx3("p", { role: "alert", style: { margin: 0, textAlign: "center", fontSize: 12, color: "#f43f5e" }, children: runtime.error }) : null
     ] }),
     /* @__PURE__ */ jsx3(RuntimeWatermark, { watermark: runtime.watermark })
@@ -1442,7 +1504,7 @@ function ReadyToGoRecommendationsBlock(props) {
   const runtime = useReadyToGoRuntime();
   const heading = text(props, "heading", "You may also like...");
   if (runtime.recommendations.phase !== "success" || runtime.recommendations.items.length === 0) return null;
-  return /* @__PURE__ */ jsx3(SectionShell, { title: heading, bordered: false, children: /* @__PURE__ */ jsxs3("div", { style: { ...contentWidth, padding: "48px 24px" }, children: [
+  return /* @__PURE__ */ jsx3(SectionShell, { title: heading, bordered: false, children: /* @__PURE__ */ jsxs3("div", { style: contentWidth, children: [
     /* @__PURE__ */ jsx3("h3", { style: { margin: 0, textAlign: "center", fontSize: 20, lineHeight: "20px", fontWeight: 700 }, children: heading }),
     /* @__PURE__ */ jsx3("div", { style: { marginTop: 24 }, children: /* @__PURE__ */ jsx3(RecommendationCards, { items: runtime.recommendations.items }) })
   ] }) });
@@ -1477,6 +1539,7 @@ var readyToGoBlocks = withTemplatePolicy([
     defaultProps: {
       heading: "Track your order",
       submitLabel: "Track Your Order",
+      submitButtonColor: "#111111",
       defaultTrackingNumber: "BT-2048-DEMO",
       defaultOrderNumber: "",
       defaultQueryMode: "tracking",
@@ -1488,6 +1551,7 @@ var readyToGoBlocks = withTemplatePolicy([
     fields: {
       heading: text2("Heading"),
       submitLabel: text2("Button label"),
+      submitButtonColor: { field: "besttrack.ready-to-go.text", label: "Button color", control: "color", group: "Style" },
       defaultTrackingNumber: text2("Default tracking number"),
       defaultOrderNumber: text2("Default order number"),
       defaultQueryMode: text2("Default query mode"),
@@ -1517,7 +1581,13 @@ var readyToGoBlocks = withTemplatePolicy([
     defaultProps: { heading: "Shipping Details", contentsHeading: "Package Contents", carrierHeading: "Carrier" },
     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") },
+    fields: {
+      heading: text2("Heading"),
+      contentsHeading: text2("Package contents heading"),
+      carrierHeading: text2("Carrier heading"),
+      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:"] } }
+    },
     render: { web: ReadyToGoDeliveryBlock, editor: ReadyToGoDeliveryEditor }
   },
   {

package/dist/validation.js

@@ -6,6 +6,7 @@ import {
 
 // src/validation.ts
 var textField = { field: "besttrack.validation.text", control: "text" };
+var colorField = { field: "besttrack.validation.color", control: "color" };
 var productsField = { field: "besttrack.validation.products", control: "products" };
 var strictUrlField = {
   field: "besttrack.validation.url",
@@ -13,7 +14,7 @@ var strictUrlField = {
   validation: { allowRelativeUrl: false, allowedUrlProtocols: ["https:"], allowLocalhost: true }
 };
 function fields(keys, urlKeys = [], resourceKeys = [], productsKeys = []) {
-  return Object.fromEntries(keys.map((key) => [key, productsKeys.includes(key) ? productsField : resourceKeys.includes(key) ? { field: "besttrack.validation.resource" } : urlKeys.includes(key) ? strictUrlField : textField]));
+  return Object.fromEntries(keys.map((key) => [key, productsKeys.includes(key) ? productsField : resourceKeys.includes(key) ? { field: "besttrack.validation.resource" } : urlKeys.includes(key) ? strictUrlField : /color$/i.test(key) ? colorField : textField]));
 }
 function block(type, version, keys, variants, validate, urlKeys = [], resourceKeys = [], productsKeys = []) {
   return {
@@ -67,7 +68,7 @@ function validateFeaturedProduct(props) {
   return issues;
 }
 var readyToGoContracts = [
-  block("besttrack.ready-to-go.query", 1, ["heading", "submitLabel", "defaultTrackingNumber", "defaultOrderNumber", "defaultQueryMode", "trackingTabLabel", "orderTabLabel"], ["default"]),
+  block("besttrack.ready-to-go.query", 1, ["heading", "submitLabel", "submitButtonColor", "defaultTrackingNumber", "defaultOrderNumber", "defaultQueryMode", "trackingTabLabel", "orderTabLabel"], ["default"]),
   block("besttrack.ready-to-go.progress", 1, [], ["default"]),
   block("besttrack.ready-to-go.delivery", 1, ["heading", "contentsHeading", "carrierHeading"], ["default", "compact"]),
   block("besttrack.ready-to-go.recommendations", 1, ["heading", "products"], ["default", "grid"], void 0, [], [], ["products"])

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standhigher/besttrack-page-extension",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "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.0"
+    "@standhigher/puck-page-builder": "0.12.2"
   },
   "devDependencies": {
     "tsup": "^8.5.1",