@standhigher/besttrack-page-extension 0.5.0 → 0.5.1

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

@@ -968,11 +968,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 +981,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 }) });
@@ -1024,14 +1021,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: [
@@ -1097,7 +1110,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 +1156,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() {
@@ -1268,14 +1281,14 @@ function ProgressResult({ result, showEstimatedDelivery = true }) {
     /* @__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 ?? [] })
@@ -1320,13 +1333,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 }
     }
   ) });
 }
@@ -1517,7 +1532,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/package.json

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