@standhigher/besttrack-page-extension 0.5.12 → 0.5.13

package/dist/index.js

@@ -836,12 +836,17 @@ function toEvents(details) {
   }));
 }
 function toOrderItems(items) {
-  return (items ?? []).map((item, index) => ({
-    id: item.variant_id || item.product_id || `item-${index}`,
-    title: [item.title, item.variant_title].filter(Boolean).join(" - "),
-    quantity: item.quantity,
-    imageUrl: item.image_url || void 0
-  }));
+  return (items ?? []).map((item, index) => {
+    const productId = (item.product_id ?? "").replace("gid://shopify/Product/", "");
+    const href = resolveShopifyRecommendHref(void 0, productId);
+    return {
+      id: item.variant_id || item.product_id || `item-${index}`,
+      title: [item.title, item.variant_title].filter(Boolean).join(" - "),
+      quantity: item.quantity,
+      imageUrl: item.image_url || void 0,
+      ...href ? { href } : {}
+    };
+  });
 }
 function cityRegion(milestone) {
   const records = milestone?.rawEventList?.length ? milestone.rawEventList : milestone?.nodeList ?? [];
@@ -1345,12 +1350,24 @@ var trackingProgressStyles = `
   .bt-progress__label { font-size: 11px; line-height: 14px; }
 }
 `;
+var packageNameStyles = `
+.bt-package-name { position: relative; width: 100%; max-width: 100%; min-width: 0; outline: none; }
+.bt-package-name__text { display: block; width: 100%; max-width: 100%; margin: 0; overflow: hidden; font-size: 14px; font-weight: 500; color: #1e293b; text-overflow: ellipsis; white-space: nowrap; }
+.bt-package-name__tooltip { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 30; width: max-content; max-width: min(320px, calc(100vw - 48px)); padding: 8px 10px; border-radius: 6px; background: #0f172a; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.35; opacity: 0; overflow-wrap: anywhere; pointer-events: none; transform: translateY(2px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease; visibility: hidden; white-space: normal; }
+.bt-package-name:hover .bt-package-name__tooltip,
+.bt-package-name:focus-within .bt-package-name__tooltip { opacity: 1; transform: translateY(0); visibility: visible; }
+.bt-package-reorder { box-sizing: border-box; display: inline-flex; width: fit-content; height: 30px; flex-shrink: 0; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; color: #1e293b; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 16px; background: #fff; cursor: pointer; text-decoration: none; transition: border-color 0.15s; }
+.bt-package-reorder:hover { border-color: #94a3b8; }
+`;
 function text(props, key, fallback = "") {
   return typeof props[key] === "string" ? props[key] : fallback;
 }
 function safeHref(value) {
   return safeTrackingPageUrl(value);
 }
+function packageReorderHref(href) {
+  return safeHref(href) ?? resolveShopifyRecommendHref(href) ?? "/products/";
+}
 function safeImageUrl(value) {
   return safeTrackingPageUrl(value);
 }
@@ -1441,23 +1458,29 @@ function ShippingTimeline({ events }) {
 }
 function PackageContents({ items }) {
   if (!items.length) return /* @__PURE__ */ jsx2("p", { style: { margin: 0, color: "#64748b", fontSize: 14 }, children: "Package contents are not available for this shipment." });
-  return /* @__PURE__ */ jsx2("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: items.map((item) => {
-    const title = item.title;
-    return /* @__PURE__ */ jsxs("article", { style: { display: "flex", alignItems: "center", gap: 12, padding: "8px 0" }, children: [
-      /* @__PURE__ */ jsx2(ProductImage, { src: item.imageUrl, alt: title }),
-      /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
-        /* @__PURE__ */ jsx2("p", { style: { margin: 0, fontSize: 14, fontWeight: 500, color: "#1e293b", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: title }),
-        item.description ? /* @__PURE__ */ jsx2("p", { style: { margin: "4px 0 0", fontSize: 13, color: "#64748b" }, children: item.description }) : null,
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexWrap: "wrap", alignItems: "center", gap: 8, marginTop: 4 }, children: [
-          /* @__PURE__ */ jsxs("p", { style: { margin: 0, fontSize: 13, color: "#64748b" }, children: [
-            "x",
-            item.quantity
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+    /* @__PURE__ */ jsx2("style", { children: packageNameStyles }),
+    items.map((item) => {
+      const title = item.title;
+      return /* @__PURE__ */ jsxs("article", { style: { display: "flex", alignItems: "center", gap: 12, padding: "8px 0", overflow: "visible" }, children: [
+        /* @__PURE__ */ jsx2(ProductImage, { src: item.imageUrl, alt: title }),
+        /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0, overflow: "visible" }, children: [
+          /* @__PURE__ */ jsxs("div", { className: "bt-package-name", tabIndex: 0, "aria-label": title, children: [
+            /* @__PURE__ */ jsx2("p", { className: "bt-package-name__text", children: title }),
+            /* @__PURE__ */ jsx2("span", { className: "bt-package-name__tooltip", role: "tooltip", children: title })
           ] }),
-          safeHref(item.href) ? /* @__PURE__ */ jsx2("a", { href: safeHref(item.href), style: { display: "inline-flex", minHeight: 32, alignItems: "center", padding: "6px 16px", border: "1px solid #cbd5e1", borderRadius: 6, color: "#1e293b", fontSize: 13, fontWeight: 500, textDecoration: "none" }, children: "Reorder" }) : null
+          item.description ? /* @__PURE__ */ jsx2("p", { style: { margin: "4px 0 0", fontSize: 13, color: "#64748b" }, children: item.description }) : null,
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexWrap: "wrap", alignItems: "center", gap: 8, marginTop: 4 }, children: [
+            /* @__PURE__ */ jsxs("p", { style: { margin: 0, fontSize: 13, color: "#64748b" }, children: [
+              "x",
+              item.quantity
+            ] }),
+            /* @__PURE__ */ jsx2("a", { href: packageReorderHref(item.href), className: "bt-package-reorder", children: "Reorder" })
+          ] })
         ] })
-      ] })
-    ] }, item.id);
-  }) });
+      ] }, item.id);
+    })
+  ] });
 }
 function RecommendationCards({ items }) {
   const autoplay = useMemo2(() => Autoplay({ delay: 3e3, stopOnInteraction: false, stopOnMouseEnter: true }), []);
@@ -1650,7 +1673,7 @@ function TrackingLoading() {
   const id = useId();
   return /* @__PURE__ */ jsxs3(Fragment2, { children: [
     /* @__PURE__ */ jsx4("style", { children: loadingStyles }),
-    /* @__PURE__ */ jsxs3("div", { role: "status", "aria-label": "\u67E5\u8BE2\u4E2D...", "aria-live": "polite", "aria-atomic": "true", style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 16, marginTop: 56, paddingBottom: 8, textAlign: "center" }, children: [
+    /* @__PURE__ */ jsxs3("div", { role: "status", "aria-label": "\u67E5\u8BE2\u4E2D...", "aria-live": "polite", "aria-atomic": "true", style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 16, marginTop: 45, paddingBottom: 8, textAlign: "center" }, children: [
       /* @__PURE__ */ jsx4("p", { style: { margin: 0, color: "var(--pb-color-muted, #64748b)", fontSize: 14, fontWeight: 400, lineHeight: "20px" }, children: "\u67E5\u8BE2\u4E2D..." }),
       /* @__PURE__ */ jsxs3("svg", { width: "56", height: "64", viewBox: "0 0 56 64", fill: "none", "aria-hidden": "true", focusable: "false", style: { display: "block", flexShrink: 0, overflow: "visible" }, children: [
         /* @__PURE__ */ jsxs3("defs", { children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standhigher/besttrack-page-extension",
-  "version": "0.5.12",
+  "version": "0.5.13",
   "description": "BestTrack business extension entry point for @standhigher/puck-page-builder.",
   "type": "module",
   "files": [
@@ -19,10 +19,14 @@
       "import": "./dist/validation.js"
     }
   },
+  "scripts": {
+    "build": "tsup src/index.ts src/validation.ts --format esm --dts --clean",
+    "typecheck": "tsc --noEmit"
+  },
   "dependencies": {
+    "@standhigher/puck-page-builder": "workspace:*",
     "embla-carousel-autoplay": "^8.6.0",
-    "embla-carousel-react": "^8.6.0",
-    "@standhigher/puck-page-builder": "0.12.12"
+    "embla-carousel-react": "^8.6.0"
   },
   "devDependencies": {
     "tsup": "^8.5.1",
@@ -30,9 +34,5 @@
   },
   "peerDependencies": {
     "react": "^18.0.0"
-  },
-  "scripts": {
-    "build": "tsup src/index.ts src/validation.ts --format esm --dts --clean",
-    "typecheck": "tsc --noEmit"
   }
-}
+}