@standhigher/besttrack-page-extension 0.5.5 → 0.5.6

package/dist/index.js

@@ -910,12 +910,15 @@ var contentWidth = {
   boxSizing: "border-box"
 };
 var trackingProgressStyles = `
+.bt-progress-band { container-type: inline-size; }
+.bt-edd-card { --bt-progress-icon: 44px; }
 .bt-progress { container-type: inline-size; }
 .bt-progress__icon { width: 44px; height: 44px; }
 .bt-progress__line { top: 19px; }
 .bt-progress__copy { margin-top: 16px; }
 .bt-progress__label { font-size: 16px; line-height: 20px; }
 @container (max-width: 640px) {
+  .bt-edd-card { --bt-progress-icon: 32px; }
   .bt-progress__icon { width: 32px; height: 32px; }
   .bt-progress__line { top: 13px; }
   .bt-progress__copy { margin-top: 8px; }
@@ -1145,8 +1148,9 @@ function TrackingPageAdSlot({ ad, disableLink = false }) {
   if (!href || disableLink) return /* @__PURE__ */ jsx("div", { "data-tracking-page-ad": true, style: trackingPageAdSlotStyle, children: content });
   return /* @__PURE__ */ jsx("a", { "data-tracking-page-ad": true, href, target: "_blank", rel: "noopener noreferrer", style: trackingPageAdSlotStyle, children: content });
 }
-function EstimatedDeliveryCard({ dateText }) {
-  return /* @__PURE__ */ jsxs("div", { "aria-label": "Est. Delivery", style: { margin: "16px auto 0", width: "100%", boxSizing: "border-box", border: "1px solid transparent", borderRadius: 10, backgroundColor: "#eaf4ff", padding: "20px 22px 18px", textAlign: "left" }, children: [
+function EstimatedDeliveryCard({ dateText, steps = 5 }) {
+  const trackInset = `max(0px, calc(50% / ${Math.max(steps, 1)} - var(--bt-progress-icon, 44px) / 2))`;
+  return /* @__PURE__ */ jsxs("div", { "aria-label": "Est. Delivery", className: "bt-edd-card", style: { margin: `16px ${trackInset} 0`, width: "auto", boxSizing: "border-box", border: "1px solid transparent", borderRadius: 10, backgroundColor: "#eaf4ff", padding: "20px 22px 18px", textAlign: "left" }, children: [
     /* @__PURE__ */ jsx("p", { style: { margin: 0, color: "#202124", fontSize: 13, fontWeight: 700, lineHeight: 1.3 }, children: "Est. Delivery" }),
     /* @__PURE__ */ jsx("p", { style: { margin: "6px 0 0", color: "#202124", fontSize: 22, fontWeight: 700, lineHeight: 1.15, letterSpacing: 0, overflowWrap: "anywhere", wordBreak: "break-word" }, children: dateText }),
     /* @__PURE__ */ jsx("p", { style: { margin: "6px 0 0", color: "#5f6368", fontSize: 13, fontWeight: 400, lineHeight: 1.35 }, children: "Estimated time may update as tracking progresses." })
@@ -1449,8 +1453,10 @@ function ProgressResult({ result, showEstimatedDelivery = true, color }) {
       result.trackingNumber
     ] }),
     /* @__PURE__ */ jsx4("h2", { style: { margin: "clamp(24px, 8%, 48px) 0 0", fontSize: 32, lineHeight: 1.25, fontWeight: 700, color: "#303030", overflowWrap: "anywhere" }, children: result.status }),
-    showEstimatedDelivery && result.estimatedDelivery ? /* @__PURE__ */ jsx4(EstimatedDeliveryCard, { dateText: result.estimatedDelivery }) : null,
-    /* @__PURE__ */ jsx4(TrackingProgress, { steps, color })
+    /* @__PURE__ */ jsxs4("div", { className: "bt-progress-band", children: [
+      showEstimatedDelivery && result.estimatedDelivery ? /* @__PURE__ */ jsx4(EstimatedDeliveryCard, { dateText: result.estimatedDelivery, steps: steps.length }) : null,
+      /* @__PURE__ */ jsx4(TrackingProgress, { steps, color })
+    ] })
   ] });
 }
 function DeliveryResult({ heading, contentsHeading, carrierHeading, result, editing }) {
@@ -1475,7 +1481,6 @@ function DeliveryResult({ heading, contentsHeading, carrierHeading, result, edit
 }
 function ReadyToGoQueryEditor(block) {
   return /* @__PURE__ */ jsx4("section", { "aria-label": "Ready-to-go query editor", style: editorHeroStyle, children: /* @__PURE__ */ jsxs4("div", { role: "region", "aria-label": "Ready-to-go tracking query", style: editorFormCardStyle, children: [
-    /* @__PURE__ */ jsx4("h1", { style: { margin: "0 0 24px", textAlign: "center", fontSize: 28, lineHeight: 1.15, overflowWrap: "anywhere" }, children: /* @__PURE__ */ jsx4(InlineText, { block, name: "heading", fallback: "Track your order" }) }),
     /* @__PURE__ */ jsxs4("div", { style: { display: "flex", width: "100%", borderBottom: "1px solid #cbd5e1" }, children: [
       /* @__PURE__ */ jsx4("div", { style: { ...tabStyle(true), display: "flex", alignItems: "center", justifyContent: "center", cursor: "default" }, children: /* @__PURE__ */ jsx4(InlineText, { block, name: "trackingTabLabel", fallback: "Tracking Number" }) }),
       /* @__PURE__ */ jsx4("div", { style: { ...tabStyle(false), display: "flex", alignItems: "center", justifyContent: "center", cursor: "default" }, children: /* @__PURE__ */ jsx4(InlineText, { block, name: "orderTabLabel", fallback: "Order Number" }) })
@@ -1544,7 +1549,6 @@ function ReadyToGoQueryBlock(props) {
   const [localError, setLocalError] = useState2("");
   const autoQueryStarted = useRef(false);
   const previewDemoTrackingNumber = useRef(trackingNumber);
-  const heading = text(props, "heading");
   const submitLabel = text(props, "submitLabel", "Track Your Order");
   const trackingTabLabel = text(props, "trackingTabLabel", "Tracking Number");
   const orderTabLabel = text(props, "orderTabLabel", "Order Number");
@@ -1582,7 +1586,6 @@ function ReadyToGoQueryBlock(props) {
   };
   const loading = runtime.phase === "loading";
   return /* @__PURE__ */ jsx4("section", { style: heroStyle, children: /* @__PURE__ */ jsxs4("div", { role: "region", "aria-label": "Ready-to-go tracking query", style: formCardStyle, children: [
-    heading ? /* @__PURE__ */ jsx4("h1", { style: { margin: "0 0 24px", textAlign: "center", fontSize: 28, lineHeight: 1.15, overflowWrap: "anywhere" }, children: heading }) : null,
     /* @__PURE__ */ jsxs4("div", { role: "tablist", "aria-label": "Tracking method", style: { display: "flex", width: "100%", borderBottom: "1px solid #cbd5e1" }, children: [
       /* @__PURE__ */ jsx4("button", { type: "button", role: "tab", "aria-selected": mode === "tracking", onClick: () => {
         setMode("tracking");
@@ -1672,7 +1675,7 @@ var readyToGoBlocks = withTemplatePolicy([
     category: "BestTrack Ready-to-go",
     targets: ["web"],
     defaultProps: {
-      heading: "Track your order",
+      heading: "",
       submitLabel: "Track Your Order",
       submitButtonColor: "#111111",
       defaultTrackingNumber: "BT-2048-DEMO",
@@ -1684,14 +1687,13 @@ var readyToGoBlocks = withTemplatePolicy([
     defaultVariant: "default",
     variants: [{ id: "default", label: "Default" }],
     fields: {
-      heading: text2("Heading"),
-      submitLabel: text2("Button label"),
+      submitLabel: text2("Button label", { validation: { maxLength: 52 } }),
       submitButtonColor: { field: "besttrack.ready-to-go.text", label: "Button color", control: "color", group: "Style" },
-      defaultTrackingNumber: text2("Default tracking number"),
+      defaultTrackingNumber: text2("Default tracking number", { validation: { maxLength: 52 } }),
       defaultOrderNumber: text2("Default order number"),
       defaultQueryMode: text2("Default query mode"),
-      trackingTabLabel: text2("Tracking tab label"),
-      orderTabLabel: text2("Order tab label")
+      trackingTabLabel: text2("Tracking tab label", { validation: { maxLength: 52 } }),
+      orderTabLabel: text2("Order tab label", { validation: { maxLength: 52 } })
     },
     render: { web: ReadyToGoQueryBlock, editor: ReadyToGoQueryEditor }
   },
@@ -1719,9 +1721,9 @@ var readyToGoBlocks = withTemplatePolicy([
     defaultVariant: "default",
     variants: [{ id: "default", label: "Default" }, { id: "compact", label: "Compact", theme: { spacing: "12px" } }],
     fields: {
-      heading: text2("Heading"),
-      contentsHeading: text2("Package contents heading"),
-      carrierHeading: text2("Carrier heading"),
+      heading: text2("Heading", { validation: { maxLength: 52 } }),
+      contentsHeading: text2("Package contents heading", { validation: { maxLength: 52 } }),
+      carrierHeading: text2("Carrier heading", { validation: { maxLength: 52 } }),
       adImageUrl: { field: "besttrack.ready-to-go.asset", label: "Advertisement image", control: "asset", persist: false, group: "Advertisement" },
       adLinkUrl: { field: "besttrack.ready-to-go.url", label: "Advertisement link", control: "url", persist: false, group: "Advertisement", validation: { allowRelativeUrl: true, allowedUrlProtocols: ["https:", "http:"] } }
     },
@@ -1737,17 +1739,17 @@ var readyToGoBlocks = withTemplatePolicy([
     defaultVariant: "default",
     variants: [{ id: "default", label: "Default" }, { id: "grid", label: "Grid", theme: { "color.surface": "#ffffff" } }],
     fields: {
-      heading: text2("Heading"),
+      heading: text2("Heading", { validation: { maxLength: 100 } }),
       products: { field: "besttrack.ready-to-go.products", label: "\u63A8\u8350\u5546\u54C1 (Shopify)", control: "products", group: "Content" }
     },
     render: { web: ReadyToGoRecommendationsBlock, editor: ReadyToGoRecommendationsEditor }
   }
-], ["besttrack.ready-to-go.query"]);
+], ["besttrack.ready-to-go.query", "besttrack.ready-to-go.progress", "besttrack.ready-to-go.delivery"]);
 var readyToGoTemplatePolicy = defineTemplatePolicy(
   "besttrack.ready-to-go",
   "Ready-to-go",
   readyToGoBlocks.map((block) => block.type),
-  ["besttrack.ready-to-go.query"]
+  ["besttrack.ready-to-go.query", "besttrack.ready-to-go.progress", "besttrack.ready-to-go.delivery"]
 );
 function createReadyToGoTemplate() {
   return {

package/package.json

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