@standhigher/besttrack-page-extension 0.5.2 → 0.5.4

package/dist/index.d.ts

@@ -312,12 +312,17 @@ type ReadyToGoRuntimeProviderProps = {
     transport?: ShopifyTrackPageTransport;
     /** When omitted, URL deep-link auto-query is on only for the Shopify Track Page `transport` path. */
     autoQueryFromUrl?: boolean;
+    /**
+     * Preview-only: query the form's demo tracking number on mount.
+     * Live storefronts must omit this so consumers still submit the form.
+     */
+    autoQueryDemo?: 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, adPreview }: ReadyToGoRuntimeProviderProps): react.JSX.Element;
+declare function ReadyToGoRuntimeProvider({ children, query: injectedQuery, queryRecommendations, transport, autoQueryFromUrl, autoQueryDemo, watermark, adPreview }: ReadyToGoRuntimeProviderProps): react.JSX.Element;
 
 /**
  * Compatibility metadata for template-aware hosts.

package/dist/index.js

@@ -913,7 +913,13 @@ function ProductImage({ src, alt, size = 60 }) {
   }
   return /* @__PURE__ */ jsx("img", { src: safeSrc, alt, onError: () => setFailed(true), style: box });
 }
-function TrackingProgress({ steps }) {
+var hexColor = /^#(?:[\da-f]{3}|[\da-f]{4}|[\da-f]{6}|[\da-f]{8})$/i;
+var defaultProgressColor = "#0f172a";
+function progressColor(value) {
+  return value && hexColor.test(value) ? value : defaultProgressColor;
+}
+function TrackingProgress({ steps, color }) {
+  const active = progressColor(color);
   const cells = Math.max(steps.length, 1);
   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 }),
@@ -921,12 +927,12 @@ function TrackingProgress({ steps }) {
       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");
+        return /* @__PURE__ */ jsx("span", { style: { flex: 1, height: 6, borderRadius: 999, background: done && nextDone ? active : `color-mix(in srgb, ${active} 25%, transparent)` } }, 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__ */ 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 ${active}`, background: done ? active : "#fff", color: active }, 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
@@ -1103,6 +1109,7 @@ var initialRuntime = {
   phase: "idle",
   recommendations: { phase: "idle", items: [] },
   autoQueryFromUrl: false,
+  autoQueryDemo: false,
   async query() {
     return void 0;
   }
@@ -1132,7 +1139,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, adPreview }) {
+function ReadyToGoRuntimeProvider({ children, query: injectedQuery, queryRecommendations, transport, autoQueryFromUrl, autoQueryDemo = false, 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);
@@ -1178,7 +1185,7 @@ function ReadyToGoRuntimeProvider({ children, query: injectedQuery, queryRecomme
     () => watermark ?? { visible: !shouldHidePoweredBy() },
     [watermark]
   );
-  const value = useMemo2(() => ({ ...state, adPreview, query, recommendations, autoQueryFromUrl: resolveAutoQuery, watermark: resolvedWatermark }), [adPreview, query, recommendations, resolveAutoQuery, resolvedWatermark, state]);
+  const value = useMemo2(() => ({ ...state, adPreview, query, recommendations, autoQueryFromUrl: resolveAutoQuery, autoQueryDemo, watermark: resolvedWatermark }), [adPreview, autoQueryDemo, query, recommendations, resolveAutoQuery, resolvedWatermark, state]);
   return /* @__PURE__ */ jsx3(ReadyToGoRuntimeContext.Provider, { value, children });
 }
 function useReadyToGoRuntime() {
@@ -1254,12 +1261,12 @@ var inputStyle = {
   color: "#334155",
   boxSizing: "border-box"
 };
-var hexColor = /^#(?:[\da-f]{3}|[\da-f]{4}|[\da-f]{6}|[\da-f]{8})$/i;
+var hexColor2 = /^#(?:[\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;
+  return hexColor2.test(value) ? value : defaultSubmitButtonColor;
 }
 function submitButtonStyle(props, loading = false) {
   return {
@@ -1316,7 +1323,7 @@ function eventsFrom(result) {
   if (result?.latestEvent) return [{ id: "latest", title: result.latestEvent, at: result.updatedAt, state: "current" }];
   return [];
 }
-function ProgressResult({ result, showEstimatedDelivery = true }) {
+function ProgressResult({ result, showEstimatedDelivery = true, color }) {
   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", overflowWrap: "anywhere" }, children: [
@@ -1325,7 +1332,7 @@ function ProgressResult({ result, showEstimatedDelivery = true }) {
     ] }),
     /* @__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 })
+    /* @__PURE__ */ jsx3(TrackingProgress, { steps, color })
   ] });
 }
 function DeliveryResult({ heading, contentsHeading, carrierHeading, result, editing }) {
@@ -1376,8 +1383,8 @@ function ReadyToGoQueryEditor(block) {
     /* @__PURE__ */ jsx3("p", { style: { marginTop: "auto", paddingTop: 28, textAlign: "center", fontSize: 12, lineHeight: "17px", fontStyle: "italic", color: "#b8b8b8" }, children: "Powered by BestTrack" })
   ] }) });
 }
-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 ReadyToGoProgressEditor(block) {
+  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, color: text(block, "progressColor") }) }) });
 }
 function ReadyToGoDeliveryEditor(block) {
   const { adPreview } = useReadyToGoRuntime();
@@ -1415,14 +1422,22 @@ function ReadyToGoQueryBlock(props) {
   const [email, setEmail] = useState2(locationState?.email ?? "");
   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");
   useEffect2(() => {
-    if (!locationState?.canAutoQuery || autoQueryStarted.current) return;
+    if (autoQueryStarted.current) return;
+    if (locationState?.canAutoQuery) {
+      autoQueryStarted.current = true;
+      void runtime.query(locationState.tab === "tracking" ? { mode: "tracking", trackingNumber: locationState.trackingNumber } : { mode: "order", orderNumber: locationState.orderNumber, email: locationState.email });
+      return;
+    }
+    const demoTrackingNumber = previewDemoTrackingNumber.current.trim();
+    if (!runtime.autoQueryDemo || !demoTrackingNumber) return;
     autoQueryStarted.current = true;
-    void runtime.query(locationState.tab === "tracking" ? { mode: "tracking", trackingNumber: locationState.trackingNumber } : { mode: "order", orderNumber: locationState.orderNumber, email: locationState.email });
+    void runtime.query({ mode: "tracking", trackingNumber: demoTrackingNumber });
   }, [locationState, runtime]);
   const submit = (event) => {
     event.preventDefault();
@@ -1473,7 +1488,7 @@ function ReadyToGoQueryBlock(props) {
     /* @__PURE__ */ jsx3(RuntimeWatermark, { watermark: runtime.watermark })
   ] }) });
 }
-function ReadyToGoProgressBlock() {
+function ReadyToGoProgressBlock(props) {
   const runtime = useReadyToGoRuntime();
   const result = runtime.result;
   if (runtime.phase === "idle") return null;
@@ -1484,7 +1499,7 @@ function ReadyToGoProgressBlock() {
       /* @__PURE__ */ jsx3(SkeletonRow, {})
     ] }) : null,
     runtime.phase === "error" ? /* @__PURE__ */ jsx3("p", { style: { margin: 0, color: "#b42318" }, children: "Shipment progress is temporarily unavailable." }) : null,
-    runtime.phase === "success" && result ? /* @__PURE__ */ jsx3(ProgressResult, { result }) : null
+    runtime.phase === "success" && result ? /* @__PURE__ */ jsx3(ProgressResult, { result, showEstimatedDelivery: !runtime.autoQueryDemo, color: text(props, "progressColor") }) : null
   ] }) });
 }
 function ReadyToGoDeliveryBlock(props) {
@@ -1566,10 +1581,12 @@ var readyToGoBlocks = withTemplatePolicy([
     label: "Shipment progress",
     category: "BestTrack Ready-to-go",
     targets: ["web"],
-    defaultProps: {},
+    defaultProps: { progressColor: "#0f172a" },
     defaultVariant: "default",
     variants: [{ id: "default", label: "Default" }],
-    fields: {},
+    fields: {
+      progressColor: { field: "besttrack.ready-to-go.text", label: "Progress color", control: "color", group: "Style" }
+    },
     render: { web: ReadyToGoProgressBlock, editor: ReadyToGoProgressEditor }
   },
   {

package/dist/validation.js

@@ -69,7 +69,7 @@ function validateFeaturedProduct(props) {
 }
 var readyToGoContracts = [
   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.progress", 1, ["progressColor"], ["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.2",
+  "version": "0.5.4",
   "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.2"
+    "@standhigher/puck-page-builder": "0.12.4"
   },
   "devDependencies": {
     "tsup": "^8.5.1",