@standhigher/besttrack-page-extension 0.4.0 → 0.5.0

package/README.md

@@ -25,7 +25,8 @@ should inject `transport` instead of inventing a new request body:
 
 That path reuses the original lookup: `POST /track/query?_t=`, snake_case
 `{ order_number, email, tracking_number, lang }`, one retry, independent
-`POST /products/recommend` with `{ page, page_size }`, and the original
+`POST /products/recommend` with `{ page, page_size }`, the original Embla
+recommendation carousel, and the original
 progress / shipping / empty-state mapping. The host only supplies fetch,
 App Proxy prefix, and credentials.
 

package/dist/index.d.ts

@@ -307,6 +307,7 @@ type ReadyToGoRuntimeProviderProps = {
     /**
      * Shopify Track Page live transport. When `query` is omitted, lookups use the
      * original `/track/query` body, `_t` cache-bust, retry, and mapping rules.
+     * Recommendations still POST `/products/recommend` on mount, even if `query` is set.
      */
     transport?: ShopifyTrackPageTransport;
     /** When omitted, URL deep-link auto-query is on only for the Shopify Track Page `transport` path. */

package/dist/index.js

@@ -14,7 +14,8 @@ import {
 } from "./chunk-KD7KFFFK.js";
 
 // src/ready-to-go.tsx
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState as useState2 } from "react";
+import { createContext, useCallback as useCallback2, useContext, useEffect as useEffect2, useMemo as useMemo2, useRef, useState as useState2 } from "react";
+import { parseProductReferences } from "@standhigher/puck-page-builder/runtime";
 
 // src/shopify-track-page/i18n/locales.ts
 var SUPPORTED_LOCALES = [
@@ -825,8 +826,10 @@ function createShopifyRecommendationsQuery(post) {
 }
 
 // src/track-page-display.tsx
-import { useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import Autoplay from "embla-carousel-autoplay";
+import useEmblaCarousel from "embla-carousel-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var pageFont = { fontFamily: "var(--pb-font-family, Inter, system-ui, sans-serif)" };
 var contentWidth = {
   width: "min(1248px, 100%)",
@@ -953,22 +956,81 @@ function PackageContents({ items }) {
   }) });
 }
 function RecommendationCards({ items }) {
-  return /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 24, overflowX: "auto", paddingBottom: 8 }, children: items.map((item) => /* @__PURE__ */ jsxs("a", { href: safeHref(item.href), style: { flex: "0 0 262px", width: 262, maxWidth: "100%", textDecoration: "none", color: "inherit" }, children: [
-    /* @__PURE__ */ jsx("div", { style: { width: 262, height: 262, maxWidth: "100%", borderRadius: "var(--pb-radius, 8px)", 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,
-      item.description ? /* @__PURE__ */ jsx("p", { style: { margin: "4px 0 0", color: "#64748b", fontSize: 13 }, children: item.description }) : null
-    ] })
-  ] }, item.id)) });
+  const autoplay = useMemo(() => Autoplay({ delay: 3e3, stopOnInteraction: false, stopOnMouseEnter: true }), []);
+  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, align: "start", slidesToScroll: 1 }, [autoplay]);
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+  const [hideButtons, setHideButtons] = useState(false);
+  const onSelect = useCallback(() => {
+    if (!emblaApi) return;
+    setCanScrollPrev(emblaApi.canScrollPrev());
+    setCanScrollNext(emblaApi.canScrollNext());
+  }, [emblaApi]);
+  useEffect(() => {
+    if (!emblaApi) return;
+    emblaApi.on("select", onSelect);
+    emblaApi.on("reInit", onSelect);
+    const frame = requestAnimationFrame(onSelect);
+    return () => {
+      cancelAnimationFrame(frame);
+      emblaApi.off("select", onSelect);
+      emblaApi.off("reInit", onSelect);
+    };
+  }, [emblaApi, onSelect]);
+  useEffect(() => {
+    if (typeof window.matchMedia !== "function") return;
+    const media = window.matchMedia("(max-width: 768px)");
+    const update = () => setHideButtons(media.matches);
+    const frame = requestAnimationFrame(update);
+    media.addEventListener("change", update);
+    return () => {
+      cancelAnimationFrame(frame);
+      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 }) });
+  const buttonStyle = {
+    position: "absolute",
+    top: 115,
+    zIndex: 2,
+    width: 32,
+    height: 32,
+    borderRadius: 99,
+    border: 0,
+    background: "#fff",
+    boxShadow: "0 0 0.5px rgba(0, 0, 0, 0.12)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "pointer",
+    color: "#333",
+    padding: 0
+  };
+  return /* @__PURE__ */ jsxs("div", { "aria-label": "Recommended products carousel", style: { position: "relative", marginLeft: 48, marginRight: 48 }, 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);
+      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,
+          item.description ? /* @__PURE__ */ jsx("p", { style: { margin: "4px 0 0", color: "#64748b", fontSize: 13 }, children: item.description }) : null
+        ] })
+      ] });
+      return /* @__PURE__ */ jsx("div", { style: { flex: "0 0 286px", minWidth: 0, paddingRight: 24, boxSizing: "border-box" }, children: href ? /* @__PURE__ */ jsx("a", { href, style: { display: "block", width: 262, maxWidth: "100%", textDecoration: "none", color: "inherit" }, children: card }) : /* @__PURE__ */ jsx("div", { style: { width: 262, maxWidth: "100%" }, children: card }) }, item.id);
+    }) }) }),
+    !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, editor = false }) {
+function TrackingPageAdSlot({ ad }) {
   const [failedUrl, setFailedUrl] = useState();
   const imageUrl = safeImageUrl(ad?.imageUrl);
-  if ((!imageUrl || failedUrl === imageUrl) && !editor) return null;
-  const content = imageUrl && failedUrl !== imageUrl ? /* @__PURE__ */ jsx("img", { src: imageUrl, alt: ad?.alt ?? "Promotion", loading: "lazy", onError: () => setFailedUrl(imageUrl), style: { display: "block", width: "100%", height: "auto", objectFit: "cover" } }) : /* @__PURE__ */ jsx("div", { "aria-label": "Advertisement placeholder", style: { display: "grid", minHeight: 120, placeItems: "center", border: "1px dashed #cbd5e1", background: "#f8fafc", color: "#64748b", fontSize: 13 }, children: "Advertisement space" });
+  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 href = safeHref(ad?.href);
-  if (!imageUrl || !href) return /* @__PURE__ */ jsx("div", { "data-tracking-page-ad": true, children: content });
+  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 });
 }
 function EstimatedDeliveryCard({ dateText }) {
@@ -1001,7 +1063,7 @@ function TrackingNotFound() {
 }
 
 // src/ready-to-go.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var initialRuntime = {
   phase: "idle",
   recommendations: { phase: "idle", items: [] },
@@ -1037,23 +1099,20 @@ async function queryMockReadyToGoTracking(request) {
 }
 function ReadyToGoRuntimeProvider({ children, query: injectedQuery, queryRecommendations, transport, autoQueryFromUrl, watermark }) {
   const [state, setState] = useState2({ phase: "idle" });
-  const [recommendations, setRecommendations] = useState2(() => ({
-    phase: queryRecommendations || transport && !injectedQuery ? "loading" : "idle",
-    items: []
-  }));
+  const [recommendations, setRecommendations] = useState2(() => queryRecommendations || transport ? { phase: "loading", items: [] } : { phase: "success", items: previewReadyToGoTracking().recommendations ?? [] });
   const requestId = useRef(0);
-  const resolvedQuery = useMemo(() => {
+  const resolvedQuery = useMemo2(() => {
     if (injectedQuery) return injectedQuery;
     if (transport) return createShopifyTrackQuery(transport);
     return void 0;
   }, [injectedQuery, transport]);
-  const resolvedRecommendations = useMemo(() => {
+  const resolvedRecommendations = useMemo2(() => {
     if (queryRecommendations) return queryRecommendations;
-    if (transport && !injectedQuery) return createShopifyRecommendationsQuery(transport.post);
+    if (transport) return createShopifyRecommendationsQuery(transport.post);
     return void 0;
-  }, [injectedQuery, queryRecommendations, transport]);
+  }, [queryRecommendations, transport]);
   const live = Boolean(resolvedQuery);
-  useEffect(() => {
+  useEffect2(() => {
     if (!resolvedRecommendations) return;
     let active = true;
     void resolvedRecommendations().then((items) => {
@@ -1067,7 +1126,7 @@ function ReadyToGoRuntimeProvider({ children, query: injectedQuery, queryRecomme
       active = false;
     };
   }, [resolvedRecommendations]);
-  const query = useCallback(async (request) => {
+  const query = useCallback2(async (request) => {
     const currentRequestId = ++requestId.current;
     setState({ phase: "loading" });
     try {
@@ -1080,11 +1139,11 @@ function ReadyToGoRuntimeProvider({ children, query: injectedQuery, queryRecomme
     }
   }, [live, resolvedQuery]);
   const resolveAutoQuery = autoQueryFromUrl ?? Boolean(transport && !injectedQuery);
-  const resolvedWatermark = useMemo(
+  const resolvedWatermark = useMemo2(
     () => watermark ?? { visible: !shouldHidePoweredBy() },
     [watermark]
   );
-  const value = useMemo(() => ({ ...state, query, recommendations, autoQueryFromUrl: resolveAutoQuery, watermark: resolvedWatermark }), [query, recommendations, resolveAutoQuery, resolvedWatermark, state]);
+  const value = useMemo2(() => ({ ...state, query, recommendations, autoQueryFromUrl: resolveAutoQuery, watermark: resolvedWatermark }), [query, recommendations, resolveAutoQuery, resolvedWatermark, state]);
   return /* @__PURE__ */ jsx3(ReadyToGoRuntimeContext.Provider, { value, children });
 }
 function useReadyToGoRuntime() {
@@ -1199,7 +1258,7 @@ function eventsFrom(result) {
 }
 function ProgressResult({ result, showEstimatedDelivery = true }) {
   const steps = result.progress?.length ? result.progress : defaultProgress(result.status);
-  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
     /* @__PURE__ */ jsxs3("p", { style: { margin: 0, fontSize: 20, lineHeight: 1.4, color: "#000" }, children: [
       "Tracking: ",
       result.trackingNumber
@@ -1209,14 +1268,14 @@ function ProgressResult({ result, showEstimatedDelivery = true }) {
     /* @__PURE__ */ jsx3(TrackingProgress, { steps })
   ] });
 }
-function DeliveryResult({ heading, contentsHeading, carrierHeading, result, editor = false }) {
+function DeliveryResult({ heading, contentsHeading, carrierHeading, result }) {
   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, editor }),
+      /* @__PURE__ */ jsx3(TrackingPageAdSlot, { ad: result.ad }),
       /* @__PURE__ */ jsxs3("div", { children: [
         /* @__PURE__ */ jsx3("h3", { style: { margin: "0 0 12px", fontSize: 18, fontWeight: 700 }, children: contentsHeading }),
         /* @__PURE__ */ jsx3(PackageContents, { items: result.orderItems ?? [] })
@@ -1258,7 +1317,7 @@ function ReadyToGoQueryEditor(block) {
   ] }) });
 }
 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() }) }) });
+  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) {
   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(
@@ -1267,16 +1326,22 @@ function ReadyToGoDeliveryEditor(block) {
       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(),
-      editor: true
+      result: previewReadyToGoTracking()
     }
   ) });
 }
 function ReadyToGoRecommendationsEditor(block) {
-  const preview = previewReadyToGoTracking();
+  const selected = parseProductReferences(block.products).map((product) => ({
+    id: product.id,
+    title: product.title || product.id,
+    description: "",
+    imageUrl: product.imageUrl,
+    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: [
     /* @__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: preview.recommendations ?? [] }) })
+    /* @__PURE__ */ jsx3("div", { style: { marginTop: 24 }, children: /* @__PURE__ */ jsx3(RecommendationCards, { items }) })
   ] }) });
 }
 function ReadyToGoQueryBlock(props) {
@@ -1292,7 +1357,7 @@ function ReadyToGoQueryBlock(props) {
   const submitLabel = text(props, "submitLabel", "Track Your Order");
   const trackingTabLabel = text(props, "trackingTabLabel", "Tracking Number");
   const orderTabLabel = text(props, "orderTabLabel", "Order Number");
-  useEffect(() => {
+  useEffect2(() => {
     if (!locationState?.canAutoQuery || autoQueryStarted.current) return;
     autoQueryStarted.current = true;
     void runtime.query(locationState.tab === "tracking" ? { mode: "tracking", trackingNumber: locationState.trackingNumber } : { mode: "order", orderNumber: locationState.orderNumber, email: locationState.email });
@@ -1330,12 +1395,12 @@ function ReadyToGoQueryBlock(props) {
       }, style: tabStyle(mode === "order"), children: orderTabLabel })
     ] }),
     /* @__PURE__ */ jsxs3("form", { onSubmit: submit, style: { marginTop: 24, display: "flex", flexDirection: "column", gap: 16, flex: 1 }, children: [
-      mode === "order" ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+      mode === "order" ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
         /* @__PURE__ */ jsx3("label", { htmlFor: "ready-to-go-order-number", style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clipPath: "inset(50%)" }, children: "Order number" }),
         /* @__PURE__ */ jsx3("input", { id: "ready-to-go-order-number", "aria-label": "Order number", value: orderNumber, onChange: (event) => setOrderNumber(event.target.value), placeholder: "Order Number", style: inputStyle }),
         /* @__PURE__ */ jsx3("label", { htmlFor: "ready-to-go-email", style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clipPath: "inset(50%)" }, children: "Email" }),
         /* @__PURE__ */ jsx3("input", { id: "ready-to-go-email", "aria-label": "Email", value: email, onChange: (event) => setEmail(event.target.value), placeholder: "Email", style: inputStyle })
-      ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+      ] }) : /* @__PURE__ */ jsxs3(Fragment2, { children: [
         /* @__PURE__ */ jsx3("label", { htmlFor: "ready-to-go-tracking-number", style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clipPath: "inset(50%)" }, children: "Tracking number" }),
         /* @__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 })
       ] }),
@@ -1376,25 +1441,10 @@ function ReadyToGoDeliveryBlock(props) {
 function ReadyToGoRecommendationsBlock(props) {
   const runtime = useReadyToGoRuntime();
   const heading = text(props, "heading", "You may also like...");
-  const independent = runtime.recommendations.phase !== "idle";
-  if (independent) {
-    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: [
-      /* @__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 }) })
-    ] }) });
-  }
-  if (runtime.phase === "empty") return null;
-  const recommendations = runtime.result?.recommendations ?? [];
+  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: [
     /* @__PURE__ */ jsx3("h3", { style: { margin: 0, textAlign: "center", fontSize: 20, lineHeight: "20px", fontWeight: 700 }, children: heading }),
-    /* @__PURE__ */ jsxs3("div", { style: { marginTop: 24 }, children: [
-      runtime.phase === "loading" ? /* @__PURE__ */ jsx3(IdleMessage, { children: "Loading recommendations\u2026" }) : null,
-      runtime.phase === "error" ? /* @__PURE__ */ jsx3("p", { style: { margin: 0, textAlign: "center", color: "#b42318" }, children: "Recommendations are temporarily unavailable." }) : null,
-      runtime.phase === "idle" ? /* @__PURE__ */ jsx3(IdleMessage, { children: "Recommendations appear with your shipment result." }) : null,
-      runtime.phase === "success" && recommendations.length ? /* @__PURE__ */ jsx3(RecommendationCards, { items: recommendations }) : null,
-      runtime.phase === "success" && !recommendations.length ? /* @__PURE__ */ jsx3(IdleMessage, { children: "No recommendations are available for this shipment." }) : null
-    ] })
+    /* @__PURE__ */ jsx3("div", { style: { marginTop: 24 }, children: /* @__PURE__ */ jsx3(RecommendationCards, { items: runtime.recommendations.items }) })
   ] }) });
 }
 
@@ -1476,10 +1526,13 @@ var readyToGoBlocks = withTemplatePolicy([
     label: "Recommended products",
     category: "BestTrack Ready-to-go",
     targets: ["web"],
-    defaultProps: { heading: "You may also like..." },
+    defaultProps: { heading: "You may also like...", products: [] },
     defaultVariant: "default",
     variants: [{ id: "default", label: "Default" }, { id: "grid", label: "Grid", theme: { "color.surface": "#ffffff" } }],
-    fields: { heading: text2("Heading") },
+    fields: {
+      heading: text2("Heading"),
+      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"]);
@@ -1537,11 +1590,11 @@ var bestTrackPageExtension = Object.freeze({
 import { createPageDocument as createPageDocument2 } from "@standhigher/puck-page-builder/runtime";
 
 // src/branded.tsx
-import { createContext as createContext2, useCallback as useCallback2, useContext as useContext2, useMemo as useMemo2, useRef as useRef3, useState as useState4 } from "react";
+import { createContext as createContext2, useCallback as useCallback3, useContext as useContext2, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
 
 // src/tracking-query-experience.tsx
-import { useEffect as useEffect2, useId, useRef as useRef2, useState as useState3 } from "react";
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useEffect as useEffect3, useId, useRef as useRef2, useState as useState3 } from "react";
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var srOnly = {
   position: "absolute",
   width: 1,
@@ -1645,7 +1698,7 @@ function TrackingQueryCard({
   const tabRefs = useRef2({ tracking: null, order: null });
   const loading = phase === "loading";
   const terminalPhase = phase === "success" || phase === "empty" || phase === "error";
-  useEffect2(() => {
+  useEffect3(() => {
     if (!terminalPhase) return;
     const card = cardRef.current;
     const resultNode = resultRef.current;
@@ -1722,7 +1775,7 @@ function TrackingQueryCard({
           clearError("tracking");
         }, placeholder: trackingPlaceholder, style: inputWithError("tracking") }),
         errorFor("tracking") ? /* @__PURE__ */ jsx4("p", { id: trackingInputId + "-error", role: "alert", style: { margin: "6px 0 0", color: "#b42318", fontSize: 13 }, children: errorFor("tracking") }) : null
-      ] }) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      ] }) : /* @__PURE__ */ jsxs4(Fragment3, { children: [
         /* @__PURE__ */ jsxs4("div", { children: [
           /* @__PURE__ */ jsx4("label", { htmlFor: orderInputId, style: srOnly, children: orderInputLabel }),
           /* @__PURE__ */ jsx4("input", { ref: orderInputRef, id: orderInputId, "aria-label": orderInputLabel, "aria-invalid": Boolean(errorFor("order")), "aria-describedby": errorFor("order") ? orderInputId + "-error" : void 0, value: orderNumber, onChange: (event) => {
@@ -1898,7 +1951,7 @@ function BrandedRuntimeProvider({ children, query: injectedQuery, watermark }) {
   const [state, setState] = useState4({ phase: "idle" });
   const [selectedShipmentId, setSelectedShipmentId] = useState4(null);
   const requestId = useRef3(0);
-  const query = useCallback2(async (request) => {
+  const query = useCallback3(async (request) => {
     const currentRequestId = ++requestId.current;
     setState({ phase: "loading" });
     try {
@@ -1912,20 +1965,20 @@ function BrandedRuntimeProvider({ children, query: injectedQuery, watermark }) {
       setState({ phase: "error", error: "tracking-query-failed" });
     }
   }, [injectedQuery]);
-  const reset = useCallback2(() => {
+  const reset = useCallback3(() => {
     requestId.current += 1;
     setSelectedShipmentId(null);
     setState({ phase: "idle" });
   }, []);
-  const displayedResult = useMemo2(() => {
+  const displayedResult = useMemo3(() => {
     if (!state.result) return void 0;
     const shipment = state.result.shipments?.find((item) => item.id === selectedShipmentId);
     return shipment ? { ...state.result, ...shipment } : state.result;
   }, [selectedShipmentId, state.result]);
-  const selectShipment = useCallback2((id) => {
+  const selectShipment = useCallback3((id) => {
     if (state.result?.shipments?.some((shipment) => shipment.id === id)) setSelectedShipmentId(id);
   }, [state.result]);
-  const value = useMemo2(
+  const value = useMemo3(
     () => ({ ...state, displayedResult, selectedShipmentId, query, reset, selectShipment, watermark }),
     [displayedResult, query, reset, selectedShipmentId, selectShipment, state, watermark]
   );
@@ -2228,8 +2281,8 @@ var bestTrackBrandedExtension = Object.freeze({ name: "besttrack.branded", versi
 import { createPageDocument as createPageDocument3 } from "@standhigher/puck-page-builder/runtime";
 
 // src/sales.tsx
-import { createContext as createContext3, useCallback as useCallback3, useContext as useContext3, useMemo as useMemo3, useRef as useRef4, useState as useState5 } from "react";
-import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { createContext as createContext3, useCallback as useCallback4, useContext as useContext3, useMemo as useMemo4, useRef as useRef4, useState as useState5 } from "react";
+import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var initialRuntime3 = { phase: "idle", async query() {
   return void 0;
 } };
@@ -2241,7 +2294,7 @@ var gridStyle = { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax
 function SalesRuntimeProvider({ children, query: injectedQuery, watermark, resourceResolution }) {
   const [state, setState] = useState5({ phase: "idle" });
   const requestId = useRef4(0);
-  const query = useCallback3(async (request) => {
+  const query = useCallback4(async (request) => {
     const currentRequestId = ++requestId.current;
     setState({ phase: "loading" });
     try {
@@ -2254,7 +2307,7 @@ function SalesRuntimeProvider({ children, query: injectedQuery, watermark, resou
       setState({ phase: "error" });
     }
   }, [injectedQuery]);
-  const value = useMemo3(() => ({ ...state, query, watermark, resourceResolution }), [query, resourceResolution, state, watermark]);
+  const value = useMemo4(() => ({ ...state, query, watermark, resourceResolution }), [query, resourceResolution, state, watermark]);
   return /* @__PURE__ */ jsx6(SalesRuntimeContext.Provider, { value, children });
 }
 function useSalesRuntime() {
@@ -2455,7 +2508,7 @@ function SalesOrderItemsBlock(props) {
           "Qty ",
           Number.isFinite(item.quantity) && item.quantity > 0 ? item.quantity : 1
         ] }),
-        item.description ? /* @__PURE__ */ jsxs6(Fragment3, { children: [
+        item.description ? /* @__PURE__ */ jsxs6(Fragment4, { children: [
           /* @__PURE__ */ jsx6("br", {}),
           /* @__PURE__ */ jsx6("small", { style: { color: "var(--pb-color-muted)" }, children: item.description })
         ] }) : null
@@ -2496,7 +2549,7 @@ function SalesProductCategoriesBlock(props) {
   const error = getShopifyResourceResolutionError(collection, runtime.resourceResolution);
   if (error) return /* @__PURE__ */ jsx6(Section, { title, children: /* @__PURE__ */ jsx6(Status, { alert: true, children: error.code === "missing" ? "This collection is no longer available." : "Collection details are temporarily unavailable." }) });
   if (!resolved) return /* @__PURE__ */ jsx6(Section, { title, children: /* @__PURE__ */ jsx6(Status, { children: "Collection details are resolved by the authorized runtime." }) });
-  const content = /* @__PURE__ */ jsxs6(Fragment3, { children: [
+  const content = /* @__PURE__ */ jsxs6(Fragment4, { children: [
     /* @__PURE__ */ jsx6("span", { children: resolved.title }),
     /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", children: "\u2192" })
   ] });
@@ -2514,7 +2567,7 @@ function SalesFeaturedProductBlock(props) {
   if (error) return /* @__PURE__ */ jsx6(Section, { title, children: /* @__PURE__ */ jsx6(Status, { alert: true, children: error.code === "missing" ? "This product is no longer available." : "Product details are temporarily unavailable." }) });
   if (!resolved) return /* @__PURE__ */ jsx6(Section, { title, children: /* @__PURE__ */ jsx6(Status, { children: "Product details and availability are resolved by the authorized runtime." }) });
   const available = resolved.availability === "available";
-  const body = /* @__PURE__ */ jsxs6(Fragment3, { children: [
+  const body = /* @__PURE__ */ jsxs6(Fragment4, { children: [
     /* @__PURE__ */ jsx6(ProductImage3, { src: resolved.imageUrl, alt: resolved.title }),
     /* @__PURE__ */ jsxs6("span", { style: { minWidth: 0, flex: 1 }, children: [
       /* @__PURE__ */ jsx6("strong", { children: resolved.title }),
@@ -2545,7 +2598,7 @@ function SalesRecommendationsBlock(props) {
 }
 
 // src/shopify-resources.tsx
-import { createContext as createContext4, useCallback as useCallback4, useContext as useContext4, useState as useState6 } from "react";
+import { createContext as createContext4, useCallback as useCallback5, useContext as useContext4, useState as useState6 } from "react";
 import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var ShopifyResourceBrowserContext = createContext4(void 0);
 function ShopifyResourcePickerProvider({ browser, children }) {
@@ -2561,7 +2614,7 @@ function ResourceField({ value, onChange, kind }) {
   const [items, setItems] = useState6([]);
   const [cursor, setCursor] = useState6();
   const [state, setState] = useState6("idle");
-  const search = useCallback4(async (nextQuery, nextCursor, append = false) => {
+  const search = useCallback5(async (nextQuery, nextCursor, append = false) => {
     if (!browser) return;
     setState("loading");
     try {

package/dist/validation.js

@@ -6,15 +6,16 @@ import {
 
 // src/validation.ts
 var textField = { field: "besttrack.validation.text", control: "text" };
+var productsField = { field: "besttrack.validation.products", control: "products" };
 var strictUrlField = {
   field: "besttrack.validation.url",
   control: "url",
   validation: { allowRelativeUrl: false, allowedUrlProtocols: ["https:"], allowLocalhost: true }
 };
-function fields(keys, urlKeys = [], resourceKeys = []) {
-  return Object.fromEntries(keys.map((key) => [key, resourceKeys.includes(key) ? { field: "besttrack.validation.resource" } : urlKeys.includes(key) ? strictUrlField : textField]));
+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]));
 }
-function block(type, version, keys, variants, validate, urlKeys = [], resourceKeys = []) {
+function block(type, version, keys, variants, validate, urlKeys = [], resourceKeys = [], productsKeys = []) {
   return {
     type,
     version,
@@ -22,7 +23,7 @@ function block(type, version, keys, variants, validate, urlKeys = [], resourceKe
     category: "BestTrack",
     targets: ["web"],
     defaultProps: {},
-    fields: fields(keys, urlKeys, resourceKeys),
+    fields: fields(keys, urlKeys, resourceKeys, productsKeys),
     defaultVariant: variants[0],
     variants: variants.map((id) => ({ id, label: id })),
     validate,
@@ -69,7 +70,7 @@ var readyToGoContracts = [
   block("besttrack.ready-to-go.query", 1, ["heading", "submitLabel", "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"], ["default", "grid"])
+  block("besttrack.ready-to-go.recommendations", 1, ["heading", "products"], ["default", "grid"], void 0, [], [], ["products"])
 ];
 var brandedContracts = [
   block("besttrack.branded.announcement", 1, ["message", "href"], ["brand", "minimal"], void 0, ["href"]),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standhigher/besttrack-page-extension",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "BestTrack business extension entry point for @standhigher/puck-page-builder.",
   "type": "module",
   "files": [
@@ -20,7 +20,9 @@
     }
   },
   "dependencies": {
-    "@standhigher/puck-page-builder": "0.11.0"
+    "embla-carousel-autoplay": "^8.6.0",
+    "embla-carousel-react": "^8.6.0",
+    "@standhigher/puck-page-builder": "0.12.0"
   },
   "devDependencies": {
     "tsup": "^8.5.1",