@standhigher/besttrack-page-extension 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +28 -3
- package/dist/index.d.ts +49 -25
- package/dist/index.js +979 -287
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -1,24 +1,199 @@
|
|
|
1
1
|
// src/ready-to-go.tsx
|
|
2
|
-
import { createContext, useCallback, useContext, useMemo, useState } from "react";
|
|
3
|
-
|
|
2
|
+
import { createContext, useCallback, useContext, useMemo, useState as useState2 } from "react";
|
|
3
|
+
|
|
4
|
+
// src/track-page-display.tsx
|
|
5
|
+
import { useState } from "react";
|
|
6
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
var pageFont = { fontFamily: "var(--pb-font-family, Inter, system-ui, sans-serif)" };
|
|
8
|
+
var contentWidth = {
|
|
9
|
+
width: "min(1248px, 100%)",
|
|
10
|
+
margin: "0 auto",
|
|
11
|
+
padding: "48px 24px",
|
|
12
|
+
boxSizing: "border-box"
|
|
13
|
+
};
|
|
14
|
+
function text(props, key, fallback = "") {
|
|
15
|
+
return typeof props[key] === "string" ? props[key] : fallback;
|
|
16
|
+
}
|
|
17
|
+
function safeHref(value) {
|
|
18
|
+
if (typeof value !== "string") return "#";
|
|
19
|
+
if (value.startsWith("/")) return value;
|
|
20
|
+
try {
|
|
21
|
+
const url = new URL(value);
|
|
22
|
+
return url.protocol === "https:" || url.protocol === "http:" ? url.toString() : "#";
|
|
23
|
+
} catch {
|
|
24
|
+
return "#";
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
function safeImageUrl(value) {
|
|
28
|
+
if (typeof value !== "string") return "";
|
|
29
|
+
try {
|
|
30
|
+
const url = new URL(value);
|
|
31
|
+
return url.protocol === "https:" || url.protocol === "http:" ? url.toString() : "";
|
|
32
|
+
} catch {
|
|
33
|
+
return "";
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
function defaultProgress(status) {
|
|
37
|
+
const steps = [
|
|
38
|
+
{ id: "ordered", label: "Ordered", icon: "check" },
|
|
39
|
+
{ id: "ready", label: "Order Ready", icon: "bag" },
|
|
40
|
+
{ id: "transit", label: "In Transit", icon: "truck" },
|
|
41
|
+
{ id: "out", label: "Out for Delivery", icon: "box" },
|
|
42
|
+
{ id: "delivered", label: "Delivered", icon: "check" }
|
|
43
|
+
];
|
|
44
|
+
const normalized = status.toLowerCase();
|
|
45
|
+
const current = normalized.includes("deliver") ? normalized.includes("out for") ? 3 : 4 : normalized.includes("transit") ? 2 : normalized.includes("ready") ? 1 : 0;
|
|
46
|
+
return steps.map((step, index) => ({
|
|
47
|
+
...step,
|
|
48
|
+
state: index < current ? "complete" : index === current ? "current" : "upcoming"
|
|
49
|
+
}));
|
|
50
|
+
}
|
|
51
|
+
function StepIcon({ name, done }) {
|
|
52
|
+
const fill = done ? "#ffffff" : "currentColor";
|
|
53
|
+
const common = { width: 24, height: 24, viewBox: "0 0 24 24", "aria-hidden": true, style: { width: 24, height: 24, display: "block" } };
|
|
54
|
+
if (name === "bag") {
|
|
55
|
+
return /* @__PURE__ */ jsxs("svg", { ...common, children: [
|
|
56
|
+
/* @__PURE__ */ jsx("path", { fill, d: "M9.9 12.9c0-.239.095-.468.264-.636A.9.9 0 0 1 10.8 12h2.4a.9.9 0 1 1 0 1.8h-2.4a.9.9 0 0 1-.9-.9Z" }),
|
|
57
|
+
/* @__PURE__ */ jsx("path", { fill, fillRule: "evenodd", d: "M6.3 4.2a2.1 2.1 0 0 0-2.1 2.1v2.4c0 .714.357 1.344.9 1.723V16.5a3.3 3.3 0 0 0 3.3 3.3h7.2a3.3 3.3 0 0 0 3.3-3.3v-6.077c.543-.379.9-1.009.9-1.723V6.3a2.1 2.1 0 0 0-2.1-2.1H6.3Zm10.8 6.6H6.9V16.5a1.5 1.5 0 0 0 1.5 1.5h7.2a1.5 1.5 0 0 0 1.5-1.5V10.8ZM6 6.3c0-.08.032-.156.088-.212A.3.3 0 0 1 6.3 6h11.4a.3.3 0 0 1 .3.3v2.4a.3.3 0 0 1-.3.3H6.3a.3.3 0 0 1-.3-.3V6.3Z" })
|
|
58
|
+
] });
|
|
59
|
+
}
|
|
60
|
+
if (name === "truck") {
|
|
61
|
+
return /* @__PURE__ */ jsxs("svg", { ...common, children: [
|
|
62
|
+
/* @__PURE__ */ jsx("path", { fill, fillRule: "evenodd", d: "M4.8 6.3c0-.239.095-.468.264-.636A.9.9 0 0 1 5.7 5.4h8.389a3.3 3.3 0 0 1 3.174 2.394l.512 1.793a.6.6 0 0 0 .216.207l2.017.505A2.7 2.7 0 0 1 21.6 12.337V13.8a2.1 2.1 0 0 1-1.238 1.916 3.6 3.6 0 0 1-3.012 3.474 3.6 3.6 0 0 1-4.564-2.29H10.8a3.6 3.6 0 0 1-6.75-.903A3.6 3.6 0 0 1 5.05 15H4.5a.9.9 0 0 1 0-1.8h3a2.7 2.7 0 0 1 2.442 1.5h7.758A3.58 3.58 0 0 1 19.54 14.1a.45.45 0 0 0 .26-.198V12.336a.3.3 0 0 0-.228-.29l-2.018-.504a2.7 2.7 0 0 1-1.56-1.46l-.512-1.793A1.5 1.5 0 0 0 14.09 7.2H5.7a.9.9 0 0 1-.9-.9Zm3 11.1a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4Zm9.6 0a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4Z" }),
|
|
63
|
+
/* @__PURE__ */ jsx("path", { fill, d: "M3.9 9.6a.9.9 0 0 0 0 1.8h6a.9.9 0 0 0 0-1.8h-6Z" })
|
|
64
|
+
] });
|
|
65
|
+
}
|
|
66
|
+
if (name === "box") {
|
|
67
|
+
return /* @__PURE__ */ jsxs("svg", { ...common, children: [
|
|
68
|
+
/* @__PURE__ */ jsx("path", { fill, d: "M15.995 5.672a1.05 1.05 0 1 0-1.39-1.578l-3.43 4.164-1.126-1.691a1.05 1.05 0 1 0-1.726 1.2l1.576 2.364a1.35 1.35 0 0 0 2.175.096l3.943-4.555Z" }),
|
|
69
|
+
/* @__PURE__ */ jsx("path", { fill, fillRule: "evenodd", d: "M5.832 8.26a1.05 1.05 0 0 1 1.221 1.353L6.187 12H9.168a1.65 1.65 0 0 1 1.422 1.026l.191.569a.3.3 0 0 0 .284.205h1.87a.3.3 0 0 0 .284-.204l.191-.57A1.65 1.65 0 0 1 14.832 12H17.813l-.403-2.718a1.05 1.05 0 0 1 1.78-.837 1.05 1.05 0 0 1 .355 1.152L19.686 12.37c.076.51.114 1.023.114 1.538V15.9a3.9 3.9 0 0 1-3.9 3.9H8.1a3.9 3.9 0 0 1-3.9-3.9v-1.992c0-.516.038-1.029.113-1.54l.497-3.35a1.05 1.05 0 0 1 1.022-.828ZM6 13.908V13.8h2.952l.12.364a2.1 2.1 0 0 0 1.992 1.436h1.872a2.1 2.1 0 0 0 1.992-1.436l.12-.364H18v2.1a1.8 1.8 0 0 1-1.8 1.8H8.1A1.8 1.8 0 0 1 6 15.9v-1.992Z" })
|
|
70
|
+
] });
|
|
71
|
+
}
|
|
72
|
+
return /* @__PURE__ */ jsx("svg", { ...common, children: /* @__PURE__ */ jsx("path", { fill, fillRule: "evenodd", d: "M18.852 6.187a1.05 1.05 0 0 1 .154 1.264l-8.161 10.63a1.35 1.35 0 0 1-2.177.081L4.99 13.444a1.05 1.05 0 0 1 1.431-1.534l3.188 4.176 7.98-10.187a1.05 1.05 0 0 1 1.263-.712Z" }) });
|
|
73
|
+
}
|
|
74
|
+
function ProductImage({ src, alt, size = 60 }) {
|
|
75
|
+
const [failed, setFailed] = useState(false);
|
|
76
|
+
const safeSrc = safeImageUrl(src);
|
|
77
|
+
const box = {
|
|
78
|
+
width: size,
|
|
79
|
+
height: size,
|
|
80
|
+
flex: "0 0 auto",
|
|
81
|
+
borderRadius: "var(--pb-radius, 8px)",
|
|
82
|
+
objectFit: "contain",
|
|
83
|
+
background: "#f1f5f9"
|
|
84
|
+
};
|
|
85
|
+
if (!safeSrc || failed) {
|
|
86
|
+
return /* @__PURE__ */ jsx("span", { "aria-label": alt + " image unavailable", style: { ...box, display: "grid", placeItems: "center", color: "#94a3b8", fontSize: 12 }, children: alt.slice(0, 1).toUpperCase() });
|
|
87
|
+
}
|
|
88
|
+
return /* @__PURE__ */ jsx("img", { src: safeSrc, alt, onError: () => setFailed(true), style: box });
|
|
89
|
+
}
|
|
90
|
+
function TrackingProgress({ steps }) {
|
|
91
|
+
const cells = Math.max(steps.length, 1);
|
|
92
|
+
const columns = cells <= 1 ? "44px" : Array.from({ length: cells - 1 }, () => "44px minmax(20px, 1fr)").join(" ") + " 44px";
|
|
93
|
+
return /* @__PURE__ */ jsx("div", { role: "region", "aria-label": "Delivery progress", style: { marginTop: 32, width: "100%", maxWidth: 1200, marginLeft: "auto", marginRight: "auto", overflow: "visible" }, children: /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: columns, alignItems: "start", columnGap: 8, width: "100%" }, children: steps.map((step, index) => {
|
|
94
|
+
const done = step.state === "complete" || step.state === "current";
|
|
95
|
+
const nextDone = steps[index + 1]?.state === "complete" || steps[index + 1]?.state === "current";
|
|
96
|
+
return /* @__PURE__ */ jsxs("div", { style: { display: "contents" }, children: [
|
|
97
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", overflow: "visible" }, children: [
|
|
98
|
+
/* @__PURE__ */ jsx("span", { "aria-label": step.label + " " + step.state, style: { display: "flex", width: 44, height: 44, 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 }) }),
|
|
99
|
+
/* @__PURE__ */ jsxs("div", { style: { width: "max-content", textAlign: "center", marginTop: 16 }, children: [
|
|
100
|
+
/* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: 16, lineHeight: "20px", fontWeight: 500, color: "#334155" }, children: step.label }),
|
|
101
|
+
step.date ? /* @__PURE__ */ jsx("p", { style: { margin: "8px 0 0", fontSize: 14, lineHeight: "18px", color: "#94a3b8" }, children: step.date }) : null
|
|
102
|
+
] })
|
|
103
|
+
] }),
|
|
104
|
+
index < steps.length - 1 ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { display: "block", width: "100%", minWidth: 0, height: 6, marginTop: 19, borderRadius: 999, background: done && nextDone ? "#1a1a1a" : "rgba(0, 0, 0, 0.25)" } }) : null
|
|
105
|
+
] }, step.id);
|
|
106
|
+
}) }) });
|
|
107
|
+
}
|
|
108
|
+
function ShippingTimeline({ events }) {
|
|
109
|
+
if (!events.length) {
|
|
110
|
+
return /* @__PURE__ */ jsx("p", { style: { margin: "16px 0 0", color: "#475569", fontSize: 14 }, children: "Shipping events will appear when the carrier publishes them." });
|
|
111
|
+
}
|
|
112
|
+
return /* @__PURE__ */ jsx("div", { "aria-label": "Shipping events", style: { marginTop: 16, display: "flex", flexDirection: "column", gap: 20 }, children: events.map((event, index) => {
|
|
113
|
+
const latest = event.state === "current" || index === 0;
|
|
114
|
+
return /* @__PURE__ */ jsxs("div", { style: { position: "relative", paddingLeft: 28, paddingBottom: index < events.length - 1 ? 20 : 0 }, children: [
|
|
115
|
+
/* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { position: "absolute", left: 0, top: 2, width: 16, height: 16, borderRadius: 9999, background: latest ? "#16a34a" : "#cbd5e1" } }),
|
|
116
|
+
index < events.length - 1 ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { position: "absolute", left: 7, top: 20, width: 1, height: "100%", background: "#e2e8f0" } }) : null,
|
|
117
|
+
/* @__PURE__ */ jsxs("p", { style: { margin: 0, fontSize: 14, fontWeight: 500, lineHeight: 1.5, color: latest ? "#c01400" : "#64748b" }, children: [
|
|
118
|
+
event.title,
|
|
119
|
+
event.detail ? ", " + event.detail : ""
|
|
120
|
+
] }),
|
|
121
|
+
event.at ? /* @__PURE__ */ jsx("p", { style: { margin: "4px 0 0", fontSize: 12, lineHeight: 1.5, color: latest ? "rgba(192, 20, 0, 0.8)" : "#94a3b8" }, children: event.at }) : null
|
|
122
|
+
] }, event.id);
|
|
123
|
+
}) });
|
|
124
|
+
}
|
|
125
|
+
function PackageContents({ items }) {
|
|
126
|
+
if (!items.length) return /* @__PURE__ */ jsx("p", { style: { margin: 0, color: "#64748b", fontSize: 14 }, children: "Package contents are not available for this shipment." });
|
|
127
|
+
return /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: items.map((item) => {
|
|
128
|
+
const title = item.title;
|
|
129
|
+
return /* @__PURE__ */ jsxs("article", { style: { display: "flex", alignItems: "center", gap: 12, padding: "8px 0" }, children: [
|
|
130
|
+
/* @__PURE__ */ jsx(ProductImage, { src: item.imageUrl, alt: title }),
|
|
131
|
+
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
132
|
+
/* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: 14, fontWeight: 500, color: "#1e293b", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: title }),
|
|
133
|
+
item.description ? /* @__PURE__ */ jsx("p", { style: { margin: "4px 0 0", fontSize: 13, color: "#64748b" }, children: item.description }) : null,
|
|
134
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", flexWrap: "wrap", alignItems: "center", gap: 8, marginTop: 4 }, children: [
|
|
135
|
+
/* @__PURE__ */ jsxs("p", { style: { margin: 0, fontSize: 13, color: "#64748b" }, children: [
|
|
136
|
+
"x",
|
|
137
|
+
item.quantity
|
|
138
|
+
] }),
|
|
139
|
+
item.href ? /* @__PURE__ */ jsx("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
|
|
140
|
+
] })
|
|
141
|
+
] })
|
|
142
|
+
] }, item.id);
|
|
143
|
+
}) });
|
|
144
|
+
}
|
|
145
|
+
function RecommendationCards({ items }) {
|
|
146
|
+
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: [
|
|
147
|
+
/* @__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 }) }),
|
|
148
|
+
/* @__PURE__ */ jsxs("div", { style: { padding: "12px 8px", textAlign: "center", fontSize: 14 }, children: [
|
|
149
|
+
/* @__PURE__ */ jsx("p", { style: { margin: 0, color: "#334155" }, children: item.title }),
|
|
150
|
+
item.price ? /* @__PURE__ */ jsx("p", { style: { margin: "4px 0 0", fontWeight: 600, color: "#0f172a" }, children: item.price }) : null,
|
|
151
|
+
item.description ? /* @__PURE__ */ jsx("p", { style: { margin: "4px 0 0", color: "#64748b", fontSize: 13 }, children: item.description }) : null
|
|
152
|
+
] })
|
|
153
|
+
] }, item.id)) });
|
|
154
|
+
}
|
|
155
|
+
function SectionShell({ title, children, bordered = true }) {
|
|
156
|
+
return /* @__PURE__ */ jsx("section", { "aria-label": title, style: { ...pageFont, background: "var(--pb-color-background, #fff)", color: "var(--pb-color-text, #0f172a)", borderBottom: bordered ? "1px solid #f1f5f9" : "0" }, children });
|
|
157
|
+
}
|
|
158
|
+
function IdleMessage({ children }) {
|
|
159
|
+
return /* @__PURE__ */ jsx("p", { style: { margin: 0, textAlign: "center", color: "var(--pb-color-muted, #64748b)" }, children });
|
|
160
|
+
}
|
|
161
|
+
function SkeletonRow() {
|
|
162
|
+
return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { display: "grid", gridTemplateColumns: "44px minmax(20px, 1fr) 44px minmax(20px, 1fr) 44px minmax(20px, 1fr) 44px minmax(20px, 1fr) 44px", columnGap: 8, width: "100%", maxWidth: 1200, margin: "32px auto 0" }, children: Array.from({ length: 5 }, (_, index) => /* @__PURE__ */ jsx("span", { style: { display: "block", width: 44, height: 44, borderRadius: 9999, background: "#e2e8f0" } }, index)).flatMap((circle, index, list) => index < list.length - 1 ? [circle, /* @__PURE__ */ jsx("span", { style: { display: "block", height: 6, marginTop: 19, borderRadius: 999, background: "#e2e8f0" } }, "line-" + index)] : [circle]) });
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
// src/ready-to-go.tsx
|
|
166
|
+
import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
4
167
|
var initialRuntime = { phase: "idle", async query() {
|
|
5
168
|
return void 0;
|
|
6
169
|
} };
|
|
7
170
|
var ReadyToGoRuntimeContext = createContext(initialRuntime);
|
|
8
|
-
|
|
171
|
+
function previewReadyToGoTracking(trackingNumber = "BT-2048-DEMO") {
|
|
9
172
|
return {
|
|
10
173
|
trackingNumber,
|
|
11
174
|
status: "In transit",
|
|
12
175
|
carrier: "BestTrack demo carrier",
|
|
13
176
|
latestEvent: "Shipment accepted at the regional hub",
|
|
14
|
-
updatedAt: "
|
|
177
|
+
updatedAt: "Sep 17, 10:00 AM",
|
|
15
178
|
deliveryAddress: "Demo recipient \xB7 Shanghai",
|
|
16
|
-
|
|
17
|
-
|
|
179
|
+
estimatedDelivery: "Sep 22 - Sep 24",
|
|
180
|
+
progress: defaultProgress("In transit"),
|
|
181
|
+
events: [
|
|
182
|
+
{ id: "hub", title: "Shipment accepted at the regional hub", at: "Sep 17, 10:00 AM", state: "current" },
|
|
183
|
+
{ id: "info", title: "The order has been placed and confirmed.", at: "Sep 16, 3:31 PM", state: "complete" }
|
|
184
|
+
],
|
|
185
|
+
orderItems: [{ id: "demo-order-item", title: "Demo shipment item", quantity: 1, description: "Product details are available in your order." }],
|
|
186
|
+
recommendations: [
|
|
187
|
+
{ id: "shipping-protection", title: "Shipping protection", description: "Extra assurance for your next delivery.", price: "$9.00" },
|
|
188
|
+
{ id: "delivery-alerts", title: "Delivery alerts", description: "Receive an update at every milestone.", price: "$4.00" }
|
|
189
|
+
]
|
|
18
190
|
};
|
|
19
191
|
}
|
|
192
|
+
async function queryMockReadyToGoTracking(trackingNumber) {
|
|
193
|
+
return previewReadyToGoTracking(trackingNumber);
|
|
194
|
+
}
|
|
20
195
|
function ReadyToGoRuntimeProvider({ children, queryTracking = queryMockReadyToGoTracking }) {
|
|
21
|
-
const [state, setState] =
|
|
196
|
+
const [state, setState] = useState2({ phase: "idle" });
|
|
22
197
|
const query = useCallback(async (trackingNumber) => {
|
|
23
198
|
setState({ phase: "loading" });
|
|
24
199
|
try {
|
|
@@ -28,89 +203,389 @@ function ReadyToGoRuntimeProvider({ children, queryTracking = queryMockReadyToGo
|
|
|
28
203
|
}
|
|
29
204
|
}, [queryTracking]);
|
|
30
205
|
const value = useMemo(() => ({ ...state, query }), [query, state]);
|
|
31
|
-
return /* @__PURE__ */
|
|
206
|
+
return /* @__PURE__ */ jsx2(ReadyToGoRuntimeContext.Provider, { value, children });
|
|
32
207
|
}
|
|
33
208
|
function useReadyToGoRuntime() {
|
|
34
209
|
return useContext(ReadyToGoRuntimeContext);
|
|
35
210
|
}
|
|
36
|
-
var
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
211
|
+
var heroStyle = {
|
|
212
|
+
...pageFont,
|
|
213
|
+
position: "relative",
|
|
214
|
+
minHeight: 520,
|
|
215
|
+
display: "grid",
|
|
216
|
+
placeItems: "center",
|
|
217
|
+
overflow: "hidden",
|
|
218
|
+
backgroundColor: "#fff",
|
|
219
|
+
padding: "48px 24px",
|
|
220
|
+
boxSizing: "border-box"
|
|
221
|
+
};
|
|
222
|
+
var formCardStyle = {
|
|
223
|
+
display: "flex",
|
|
224
|
+
flexDirection: "column",
|
|
225
|
+
width: "min(560px, 100%)",
|
|
226
|
+
maxWidth: 560,
|
|
227
|
+
minHeight: 388,
|
|
228
|
+
borderRadius: "var(--pb-radius, 8px)",
|
|
229
|
+
background: "var(--pb-color-surface, #fff)",
|
|
230
|
+
color: "var(--pb-color-text, #0f172a)",
|
|
231
|
+
padding: 40,
|
|
232
|
+
boxSizing: "border-box",
|
|
233
|
+
boxShadow: "0 8px 24px rgba(0, 0, 0, 0.12)"
|
|
234
|
+
};
|
|
235
|
+
var tabStyle = (active) => ({
|
|
236
|
+
appearance: "none",
|
|
237
|
+
flex: 1,
|
|
238
|
+
minHeight: 53,
|
|
239
|
+
margin: 0,
|
|
240
|
+
padding: "16px 10px",
|
|
241
|
+
font: "inherit",
|
|
242
|
+
fontSize: 15,
|
|
243
|
+
lineHeight: "21px",
|
|
244
|
+
fontWeight: active ? 500 : 400,
|
|
245
|
+
background: "none",
|
|
246
|
+
border: 0,
|
|
247
|
+
borderBottom: active ? "2px solid #0f172a" : "2px solid transparent",
|
|
248
|
+
borderRadius: 0,
|
|
249
|
+
color: active ? "#0f172a" : "#94a3b8",
|
|
250
|
+
cursor: "pointer"
|
|
251
|
+
});
|
|
252
|
+
var inputStyle = {
|
|
253
|
+
width: "100%",
|
|
254
|
+
height: 48,
|
|
255
|
+
borderRadius: "var(--pb-radius, 8px)",
|
|
256
|
+
border: "1px solid #111",
|
|
257
|
+
background: "#fff",
|
|
258
|
+
padding: 12,
|
|
259
|
+
font: "inherit",
|
|
260
|
+
fontSize: 14,
|
|
261
|
+
lineHeight: "20px",
|
|
262
|
+
color: "#334155",
|
|
263
|
+
boxSizing: "border-box"
|
|
264
|
+
};
|
|
265
|
+
function ReadyToGoTextField({ value, onChange }) {
|
|
266
|
+
return /* @__PURE__ */ jsx2("input", { "aria-label": "Ready-to-go text", value: typeof value === "string" ? value : "", onChange: (event) => onChange(event.target.value) });
|
|
267
|
+
}
|
|
268
|
+
function InlineText({ block, name, fallback }) {
|
|
269
|
+
const value = text(block, name, fallback);
|
|
270
|
+
if (!block.selected) return /* @__PURE__ */ jsx2("span", { "data-ready-to-go-editor-field": name, children: value });
|
|
271
|
+
return /* @__PURE__ */ jsx2(
|
|
272
|
+
"input",
|
|
273
|
+
{
|
|
274
|
+
"aria-label": "Canvas " + name,
|
|
275
|
+
"data-ready-to-go-editor-field": name,
|
|
276
|
+
value,
|
|
277
|
+
onMouseDown: (event) => event.stopPropagation(),
|
|
278
|
+
onClick: (event) => event.stopPropagation(),
|
|
279
|
+
onChange: (event) => block.onPropsChange({ [name]: event.currentTarget.value }),
|
|
280
|
+
style: { display: "inline-block", width: "100%", minWidth: "5ch", boxSizing: "border-box", border: "1px dashed currentColor", borderRadius: 3, padding: "2px 5px", background: "transparent", color: "inherit", font: "inherit", fontWeight: "inherit", lineHeight: "inherit", letterSpacing: "inherit", textAlign: "inherit" }
|
|
281
|
+
}
|
|
282
|
+
);
|
|
283
|
+
}
|
|
284
|
+
function eventsFrom(result) {
|
|
285
|
+
if (result?.events?.length) return result.events;
|
|
286
|
+
if (result?.latestEvent) return [{ id: "latest", title: result.latestEvent, at: result.updatedAt, state: "current" }];
|
|
287
|
+
return [];
|
|
288
|
+
}
|
|
289
|
+
function ProgressResult({ result, showEstimatedDelivery = true }) {
|
|
290
|
+
const steps = result.progress?.length ? result.progress : defaultProgress(result.status);
|
|
291
|
+
return /* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
292
|
+
/* @__PURE__ */ jsxs2("p", { style: { margin: 0, fontSize: 20, lineHeight: 1.4, color: "#000" }, children: [
|
|
293
|
+
"Tracking: ",
|
|
294
|
+
result.trackingNumber
|
|
295
|
+
] }),
|
|
296
|
+
/* @__PURE__ */ jsx2("h2", { style: { margin: "48px 0 0", fontSize: 32, lineHeight: "40px", fontWeight: 700, color: "#303030" }, children: result.status }),
|
|
297
|
+
showEstimatedDelivery && result.estimatedDelivery ? /* @__PURE__ */ jsxs2("div", { style: { margin: "16px auto 0", maxWidth: 720, borderRadius: 10, background: "#eaf4ff", padding: "20px 22px 18px", textAlign: "left" }, children: [
|
|
298
|
+
/* @__PURE__ */ jsx2("p", { style: { margin: 0, fontSize: 13, fontWeight: 700, color: "#202124" }, children: "Estimated delivery" }),
|
|
299
|
+
/* @__PURE__ */ jsx2("p", { style: { margin: "6px 0 0", fontSize: 22, fontWeight: 700, color: "#202124" }, children: result.estimatedDelivery })
|
|
300
|
+
] }) : null,
|
|
301
|
+
/* @__PURE__ */ jsx2(TrackingProgress, { steps })
|
|
41
302
|
] });
|
|
42
303
|
}
|
|
43
|
-
function
|
|
44
|
-
return /* @__PURE__ */
|
|
304
|
+
function DeliveryResult({ heading, contentsHeading, carrierHeading, result }) {
|
|
305
|
+
return /* @__PURE__ */ jsxs2("div", { style: { ...contentWidth, display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 280px), 500px))", gap: 40, justifyContent: "center", alignItems: "start" }, children: [
|
|
306
|
+
/* @__PURE__ */ jsxs2("div", { children: [
|
|
307
|
+
/* @__PURE__ */ jsx2("h3", { style: { margin: 0, fontSize: 20, lineHeight: "20px", fontWeight: 700 }, children: heading }),
|
|
308
|
+
/* @__PURE__ */ jsx2(ShippingTimeline, { events: eventsFrom(result) })
|
|
309
|
+
] }),
|
|
310
|
+
/* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: 24 }, children: [
|
|
311
|
+
/* @__PURE__ */ jsxs2("div", { children: [
|
|
312
|
+
/* @__PURE__ */ jsx2("h3", { style: { margin: "0 0 12px", fontSize: 18, fontWeight: 700 }, children: contentsHeading }),
|
|
313
|
+
/* @__PURE__ */ jsx2(PackageContents, { items: result.orderItems ?? [] })
|
|
314
|
+
] }),
|
|
315
|
+
/* @__PURE__ */ jsxs2("div", { children: [
|
|
316
|
+
/* @__PURE__ */ jsx2("h3", { style: { margin: "0 0 12px", fontSize: 18, fontWeight: 700 }, children: carrierHeading }),
|
|
317
|
+
/* @__PURE__ */ jsx2("p", { style: { margin: 0, fontSize: 14, fontWeight: 600, color: "#1e293b" }, children: result.carrier ?? "Not available" }),
|
|
318
|
+
/* @__PURE__ */ jsx2("p", { style: { margin: "8px 0 0", fontSize: 14, color: "#64748b" }, children: result.deliveryAddress ?? "Delivery details are not available." })
|
|
319
|
+
] })
|
|
320
|
+
] })
|
|
321
|
+
] });
|
|
322
|
+
}
|
|
323
|
+
function ReadyToGoQueryEditor(block) {
|
|
324
|
+
return /* @__PURE__ */ jsx2("section", { "aria-label": "Ready-to-go query editor", style: heroStyle, children: /* @__PURE__ */ jsxs2("div", { role: "region", "aria-label": "Ready-to-go tracking query", style: formCardStyle, children: [
|
|
325
|
+
/* @__PURE__ */ jsx2("h1", { style: { margin: "0 0 24px", textAlign: "center", fontSize: 28, lineHeight: 1.15 }, children: /* @__PURE__ */ jsx2(InlineText, { block, name: "heading", fallback: "Track your order" }) }),
|
|
326
|
+
/* @__PURE__ */ jsxs2("div", { style: { display: "flex", width: "100%", borderBottom: "1px solid #cbd5e1" }, children: [
|
|
327
|
+
/* @__PURE__ */ jsx2("div", { style: { ...tabStyle(true), display: "flex", alignItems: "center", justifyContent: "center", cursor: "default" }, children: /* @__PURE__ */ jsx2(InlineText, { block, name: "trackingTabLabel", fallback: "Tracking Number" }) }),
|
|
328
|
+
/* @__PURE__ */ jsx2("div", { style: { ...tabStyle(false), display: "flex", alignItems: "center", justifyContent: "center", cursor: "default" }, children: /* @__PURE__ */ jsx2(InlineText, { block, name: "orderTabLabel", fallback: "Order Number" }) })
|
|
329
|
+
] }),
|
|
330
|
+
/* @__PURE__ */ jsxs2("div", { style: { marginTop: 24, display: "flex", flexDirection: "column", gap: 16, flex: 1 }, children: [
|
|
331
|
+
/* @__PURE__ */ jsx2(
|
|
332
|
+
"input",
|
|
333
|
+
{
|
|
334
|
+
"aria-label": "Canvas default tracking number",
|
|
335
|
+
readOnly: !block.selected,
|
|
336
|
+
value: text(block, "defaultTrackingNumber", "BT-2048-DEMO"),
|
|
337
|
+
onMouseDown: (event) => block.selected && event.stopPropagation(),
|
|
338
|
+
onClick: (event) => block.selected && event.stopPropagation(),
|
|
339
|
+
onChange: (event) => block.onPropsChange({ defaultTrackingNumber: event.currentTarget.value }),
|
|
340
|
+
style: { ...inputStyle, border: block.selected ? "1px dashed #111" : inputStyle.border }
|
|
341
|
+
}
|
|
342
|
+
),
|
|
343
|
+
/* @__PURE__ */ jsx2("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", minHeight: 58, marginTop: 8, borderRadius: "var(--pb-radius, 8px)", background: "var(--pb-color-primary, #111)", color: "#fff", fontSize: 15, fontWeight: 600 }, children: /* @__PURE__ */ jsx2(InlineText, { block, name: "submitLabel", fallback: "Track Your Order" }) })
|
|
344
|
+
] }),
|
|
345
|
+
/* @__PURE__ */ jsx2("p", { style: { marginTop: "auto", paddingTop: 28, textAlign: "center", fontSize: 12, lineHeight: "17px", fontStyle: "italic", color: "#b8b8b8" }, children: "Powered by BestTrack" })
|
|
346
|
+
] }) });
|
|
347
|
+
}
|
|
348
|
+
function ReadyToGoProgressEditor() {
|
|
349
|
+
return /* @__PURE__ */ jsx2("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__ */ jsx2("div", { style: { ...contentWidth, textAlign: "center", width: "min(1248px, 100%)" }, children: /* @__PURE__ */ jsx2(ProgressResult, { showEstimatedDelivery: false, result: previewReadyToGoTracking() }) }) });
|
|
350
|
+
}
|
|
351
|
+
function ReadyToGoDeliveryEditor(block) {
|
|
352
|
+
return /* @__PURE__ */ jsx2("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__ */ jsx2(
|
|
353
|
+
DeliveryResult,
|
|
354
|
+
{
|
|
355
|
+
heading: /* @__PURE__ */ jsx2(InlineText, { block, name: "heading", fallback: "Shipping Details" }),
|
|
356
|
+
contentsHeading: /* @__PURE__ */ jsx2(InlineText, { block, name: "contentsHeading", fallback: "Package Contents" }),
|
|
357
|
+
carrierHeading: /* @__PURE__ */ jsx2(InlineText, { block, name: "carrierHeading", fallback: "Carrier" }),
|
|
358
|
+
result: previewReadyToGoTracking()
|
|
359
|
+
}
|
|
360
|
+
) });
|
|
361
|
+
}
|
|
362
|
+
function ReadyToGoRecommendationsEditor(block) {
|
|
363
|
+
const preview = previewReadyToGoTracking();
|
|
364
|
+
return /* @__PURE__ */ jsx2("section", { "aria-label": "Ready-to-go recommendations editor", style: { ...pageFont, background: "var(--pb-color-background, #fff)", color: "var(--pb-color-text, #0f172a)" }, children: /* @__PURE__ */ jsxs2("div", { style: { ...contentWidth, padding: "48px 24px" }, children: [
|
|
365
|
+
/* @__PURE__ */ jsx2("h3", { style: { margin: 0, textAlign: "center", fontSize: 20, lineHeight: "20px", fontWeight: 700 }, children: /* @__PURE__ */ jsx2(InlineText, { block, name: "heading", fallback: "You may also like..." }) }),
|
|
366
|
+
/* @__PURE__ */ jsx2("div", { style: { marginTop: 24 }, children: /* @__PURE__ */ jsx2(RecommendationCards, { items: preview.recommendations ?? [] }) })
|
|
367
|
+
] }) });
|
|
45
368
|
}
|
|
46
369
|
function ReadyToGoQueryBlock(props) {
|
|
47
370
|
const runtime = useReadyToGoRuntime();
|
|
48
|
-
const [
|
|
49
|
-
const
|
|
50
|
-
const
|
|
371
|
+
const [mode, setMode] = useState2(text(props, "defaultQueryMode", "tracking") === "order" ? "order" : "tracking");
|
|
372
|
+
const [trackingNumber, setTrackingNumber] = useState2(text(props, "defaultTrackingNumber", "BT-2048-DEMO"));
|
|
373
|
+
const [orderNumber, setOrderNumber] = useState2(text(props, "defaultOrderNumber", ""));
|
|
374
|
+
const [email, setEmail] = useState2("");
|
|
375
|
+
const [localError, setLocalError] = useState2("");
|
|
376
|
+
const heading = text(props, "heading");
|
|
377
|
+
const submitLabel = text(props, "submitLabel", "Track Your Order");
|
|
378
|
+
const trackingTabLabel = text(props, "trackingTabLabel", "Tracking Number");
|
|
379
|
+
const orderTabLabel = text(props, "orderTabLabel", "Order Number");
|
|
51
380
|
const submit = (event) => {
|
|
52
381
|
event.preventDefault();
|
|
53
|
-
|
|
382
|
+
setLocalError("");
|
|
383
|
+
if (mode === "order") {
|
|
384
|
+
if (!orderNumber.trim() || !email.trim()) {
|
|
385
|
+
setLocalError("Enter an order number and email.");
|
|
386
|
+
return;
|
|
387
|
+
}
|
|
388
|
+
void runtime.query(orderNumber.trim());
|
|
389
|
+
return;
|
|
390
|
+
}
|
|
391
|
+
void runtime.query(trackingNumber.trim());
|
|
54
392
|
};
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
/* @__PURE__ */
|
|
58
|
-
|
|
59
|
-
/* @__PURE__ */
|
|
393
|
+
const loading = runtime.phase === "loading";
|
|
394
|
+
return /* @__PURE__ */ jsx2("section", { style: heroStyle, children: /* @__PURE__ */ jsxs2("div", { role: "region", "aria-label": "Ready-to-go tracking query", style: formCardStyle, children: [
|
|
395
|
+
heading ? /* @__PURE__ */ jsx2("h1", { style: { margin: "0 0 24px", textAlign: "center", fontSize: 28, lineHeight: 1.15 }, children: heading }) : null,
|
|
396
|
+
/* @__PURE__ */ jsxs2("div", { role: "tablist", "aria-label": "Tracking method", style: { display: "flex", width: "100%", borderBottom: "1px solid #cbd5e1" }, children: [
|
|
397
|
+
/* @__PURE__ */ jsx2("button", { type: "button", role: "tab", "aria-selected": mode === "tracking", onClick: () => {
|
|
398
|
+
setMode("tracking");
|
|
399
|
+
setLocalError("");
|
|
400
|
+
}, style: tabStyle(mode === "tracking"), children: trackingTabLabel }),
|
|
401
|
+
/* @__PURE__ */ jsx2("button", { type: "button", role: "tab", "aria-selected": mode === "order", onClick: () => {
|
|
402
|
+
setMode("order");
|
|
403
|
+
setLocalError("");
|
|
404
|
+
}, style: tabStyle(mode === "order"), children: orderTabLabel })
|
|
60
405
|
] }),
|
|
61
|
-
|
|
62
|
-
|
|
406
|
+
/* @__PURE__ */ jsxs2("form", { onSubmit: submit, style: { marginTop: 24, display: "flex", flexDirection: "column", gap: 16, flex: 1 }, children: [
|
|
407
|
+
mode === "order" ? /* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
408
|
+
/* @__PURE__ */ jsx2("label", { htmlFor: "ready-to-go-order-number", style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clipPath: "inset(50%)" }, children: "Order number" }),
|
|
409
|
+
/* @__PURE__ */ jsx2("input", { id: "ready-to-go-order-number", "aria-label": "Order number", value: orderNumber, onChange: (event) => setOrderNumber(event.target.value), required: true, minLength: 4, maxLength: 64, placeholder: "Enter your order number", style: inputStyle }),
|
|
410
|
+
/* @__PURE__ */ jsx2("label", { htmlFor: "ready-to-go-email", style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clipPath: "inset(50%)" }, children: "Email" }),
|
|
411
|
+
/* @__PURE__ */ jsx2("input", { id: "ready-to-go-email", "aria-label": "Email", type: "email", value: email, onChange: (event) => setEmail(event.target.value), required: true, placeholder: "Enter your email", style: inputStyle })
|
|
412
|
+
] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
413
|
+
/* @__PURE__ */ jsx2("label", { htmlFor: "ready-to-go-tracking-number", style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clipPath: "inset(50%)" }, children: "Tracking number" }),
|
|
414
|
+
/* @__PURE__ */ jsx2("input", { id: "ready-to-go-tracking-number", "aria-label": "Tracking number", value: trackingNumber, onChange: (event) => setTrackingNumber(event.target.value), required: true, minLength: 4, maxLength: 64, placeholder: "Enter your tracking number", style: inputStyle })
|
|
415
|
+
] }),
|
|
416
|
+
localError ? /* @__PURE__ */ jsx2("p", { style: { margin: 0, textAlign: "center", fontSize: 12, color: "#f43f5e" }, children: localError }) : null,
|
|
417
|
+
/* @__PURE__ */ jsx2("button", { type: "submit", disabled: loading, style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", minHeight: 58, marginTop: 8, border: 0, borderRadius: "var(--pb-radius, 8px)", background: loading ? "#475569" : "var(--pb-color-primary, #111)", color: "#fff", font: "inherit", fontSize: 15, fontWeight: 600, cursor: loading ? "wait" : "pointer", opacity: loading ? 0.7 : 1 }, children: loading ? "Tracking\u2026" : submitLabel }),
|
|
418
|
+
runtime.phase === "error" ? /* @__PURE__ */ jsx2("p", { role: "alert", style: { margin: 0, textAlign: "center", fontSize: 12, color: "#f43f5e" }, children: runtime.error }) : null
|
|
419
|
+
] }),
|
|
420
|
+
/* @__PURE__ */ jsx2("p", { style: { marginTop: "auto", paddingTop: 28, textAlign: "center", fontSize: 12, lineHeight: "17px", fontStyle: "italic", color: "#b8b8b8" }, children: "Powered by BestTrack" })
|
|
421
|
+
] }) });
|
|
63
422
|
}
|
|
64
|
-
function ReadyToGoProgressBlock(
|
|
423
|
+
function ReadyToGoProgressBlock() {
|
|
65
424
|
const runtime = useReadyToGoRuntime();
|
|
66
|
-
const
|
|
67
|
-
return /* @__PURE__ */
|
|
68
|
-
/* @__PURE__ */
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
425
|
+
const result = runtime.result;
|
|
426
|
+
return /* @__PURE__ */ jsx2(SectionShell, { title: "Shipment progress", children: /* @__PURE__ */ jsxs2("div", { style: { ...contentWidth, textAlign: "center", width: "min(1248px, 100%)" }, children: [
|
|
427
|
+
runtime.phase === "loading" ? /* @__PURE__ */ jsxs2("div", { "aria-label": "Loading shipment progress", children: [
|
|
428
|
+
/* @__PURE__ */ jsx2(IdleMessage, { children: "Loading shipment progress\u2026" }),
|
|
429
|
+
/* @__PURE__ */ jsx2(SkeletonRow, {})
|
|
430
|
+
] }) : null,
|
|
431
|
+
runtime.phase === "error" ? /* @__PURE__ */ jsx2("p", { style: { margin: 0, color: "#b42318" }, children: "Shipment progress is temporarily unavailable." }) : null,
|
|
432
|
+
runtime.phase === "idle" ? /* @__PURE__ */ jsx2(IdleMessage, { children: "Enter a tracking number to see shipment progress." }) : null,
|
|
433
|
+
runtime.phase === "success" && result ? /* @__PURE__ */ jsx2(ProgressResult, { result }) : null
|
|
434
|
+
] }) });
|
|
72
435
|
}
|
|
73
436
|
function ReadyToGoDeliveryBlock(props) {
|
|
74
437
|
const runtime = useReadyToGoRuntime();
|
|
75
|
-
const heading =
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
/* @__PURE__ */
|
|
81
|
-
|
|
438
|
+
const heading = text(props, "heading", "Shipping Details");
|
|
439
|
+
const contentsHeading = text(props, "contentsHeading", "Package Contents");
|
|
440
|
+
const carrierHeading = text(props, "carrierHeading", "Carrier");
|
|
441
|
+
const result = runtime.result;
|
|
442
|
+
return /* @__PURE__ */ jsx2(SectionShell, { title: heading, children: runtime.phase === "success" && result ? /* @__PURE__ */ jsx2(DeliveryResult, { heading, contentsHeading, carrierHeading, result }) : /* @__PURE__ */ jsx2("div", { style: { ...contentWidth, display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 280px), 500px))", gap: 40, justifyContent: "center", alignItems: "start" }, children: /* @__PURE__ */ jsxs2("div", { children: [
|
|
443
|
+
/* @__PURE__ */ jsx2("h3", { style: { margin: 0, fontSize: 20, lineHeight: "20px", fontWeight: 700 }, children: heading }),
|
|
444
|
+
runtime.phase === "loading" ? /* @__PURE__ */ jsx2(IdleMessage, { children: "Loading delivery details\u2026" }) : null,
|
|
445
|
+
runtime.phase === "error" ? /* @__PURE__ */ jsx2("p", { style: { margin: "16px 0 0", color: "#b42318" }, children: "Delivery details are temporarily unavailable." }) : null,
|
|
446
|
+
runtime.phase === "idle" ? /* @__PURE__ */ jsx2("p", { style: { margin: "16px 0 0", color: "#64748b" }, children: "Delivery details will appear after a successful query." }) : null
|
|
447
|
+
] }) }) });
|
|
82
448
|
}
|
|
83
449
|
function ReadyToGoRecommendationsBlock(props) {
|
|
84
450
|
const runtime = useReadyToGoRuntime();
|
|
85
|
-
const heading =
|
|
451
|
+
const heading = text(props, "heading", "You may also like...");
|
|
86
452
|
const recommendations = runtime.result?.recommendations ?? [];
|
|
87
|
-
return /* @__PURE__ */
|
|
88
|
-
/* @__PURE__ */
|
|
89
|
-
/* @__PURE__ */
|
|
90
|
-
|
|
91
|
-
|
|
453
|
+
return /* @__PURE__ */ jsx2(SectionShell, { title: heading, bordered: false, children: /* @__PURE__ */ jsxs2("div", { style: { ...contentWidth, padding: "48px 24px" }, children: [
|
|
454
|
+
/* @__PURE__ */ jsx2("h3", { style: { margin: 0, textAlign: "center", fontSize: 20, lineHeight: "20px", fontWeight: 700 }, children: heading }),
|
|
455
|
+
/* @__PURE__ */ jsxs2("div", { style: { marginTop: 24 }, children: [
|
|
456
|
+
runtime.phase === "loading" ? /* @__PURE__ */ jsx2(IdleMessage, { children: "Loading recommendations\u2026" }) : null,
|
|
457
|
+
runtime.phase === "error" ? /* @__PURE__ */ jsx2("p", { style: { margin: 0, textAlign: "center", color: "#b42318" }, children: "Recommendations are temporarily unavailable." }) : null,
|
|
458
|
+
runtime.phase === "idle" ? /* @__PURE__ */ jsx2(IdleMessage, { children: "Recommendations appear with your shipment result." }) : null,
|
|
459
|
+
runtime.phase === "success" && recommendations.length ? /* @__PURE__ */ jsx2(RecommendationCards, { items: recommendations }) : null,
|
|
460
|
+
runtime.phase === "success" && !recommendations.length ? /* @__PURE__ */ jsx2(IdleMessage, { children: "No recommendations are available for this shipment." }) : null
|
|
461
|
+
] })
|
|
462
|
+
] }) });
|
|
92
463
|
}
|
|
93
464
|
|
|
94
465
|
// src/ready-to-go-definition.ts
|
|
95
466
|
import { createPageDocument } from "@standhigher/puck-page-builder/runtime";
|
|
96
|
-
var
|
|
467
|
+
var text2 = (label, options = {}) => ({ field: "besttrack.ready-to-go.text", label, control: "text", ...options });
|
|
97
468
|
var readyToGoBlocks = [
|
|
98
|
-
{
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
469
|
+
{
|
|
470
|
+
type: "besttrack.ready-to-go.query",
|
|
471
|
+
version: 1,
|
|
472
|
+
label: "Order query",
|
|
473
|
+
category: "BestTrack Ready-to-go",
|
|
474
|
+
targets: ["web"],
|
|
475
|
+
defaultProps: {
|
|
476
|
+
heading: "Track your order",
|
|
477
|
+
submitLabel: "Track Your Order",
|
|
478
|
+
defaultTrackingNumber: "BT-2048-DEMO",
|
|
479
|
+
defaultQueryMode: "tracking",
|
|
480
|
+
trackingTabLabel: "Tracking Number",
|
|
481
|
+
orderTabLabel: "Order Number"
|
|
482
|
+
},
|
|
483
|
+
defaultVariant: "default",
|
|
484
|
+
variants: [{ id: "default", label: "Default" }],
|
|
485
|
+
fields: {
|
|
486
|
+
heading: text2("Heading"),
|
|
487
|
+
submitLabel: text2("Button label"),
|
|
488
|
+
defaultTrackingNumber: text2("Default tracking number"),
|
|
489
|
+
defaultQueryMode: text2("Default query mode"),
|
|
490
|
+
trackingTabLabel: text2("Tracking tab label"),
|
|
491
|
+
orderTabLabel: text2("Order tab label")
|
|
492
|
+
},
|
|
493
|
+
render: { web: ReadyToGoQueryBlock, editor: ReadyToGoQueryEditor }
|
|
494
|
+
},
|
|
495
|
+
{
|
|
496
|
+
type: "besttrack.ready-to-go.progress",
|
|
497
|
+
version: 1,
|
|
498
|
+
label: "Shipment progress",
|
|
499
|
+
category: "BestTrack Ready-to-go",
|
|
500
|
+
targets: ["web"],
|
|
501
|
+
defaultProps: {},
|
|
502
|
+
defaultVariant: "default",
|
|
503
|
+
variants: [{ id: "default", label: "Default" }],
|
|
504
|
+
fields: {},
|
|
505
|
+
render: { web: ReadyToGoProgressBlock, editor: ReadyToGoProgressEditor }
|
|
506
|
+
},
|
|
507
|
+
{
|
|
508
|
+
type: "besttrack.ready-to-go.delivery",
|
|
509
|
+
version: 1,
|
|
510
|
+
label: "Delivery information",
|
|
511
|
+
category: "BestTrack Ready-to-go",
|
|
512
|
+
targets: ["web"],
|
|
513
|
+
defaultProps: { heading: "Shipping Details", contentsHeading: "Package Contents", carrierHeading: "Carrier" },
|
|
514
|
+
defaultVariant: "default",
|
|
515
|
+
variants: [{ id: "default", label: "Default" }, { id: "compact", label: "Compact", theme: { spacing: "12px" } }],
|
|
516
|
+
fields: { heading: text2("Heading"), contentsHeading: text2("Package contents heading"), carrierHeading: text2("Carrier heading") },
|
|
517
|
+
render: { web: ReadyToGoDeliveryBlock, editor: ReadyToGoDeliveryEditor }
|
|
518
|
+
},
|
|
519
|
+
{
|
|
520
|
+
type: "besttrack.ready-to-go.recommendations",
|
|
521
|
+
version: 1,
|
|
522
|
+
label: "Recommended products",
|
|
523
|
+
category: "BestTrack Ready-to-go",
|
|
524
|
+
targets: ["web"],
|
|
525
|
+
defaultProps: { heading: "You may also like..." },
|
|
526
|
+
defaultVariant: "default",
|
|
527
|
+
variants: [{ id: "default", label: "Default" }, { id: "grid", label: "Grid", theme: { "color.surface": "#ffffff" } }],
|
|
528
|
+
fields: { heading: text2("Heading") },
|
|
529
|
+
render: { web: ReadyToGoRecommendationsBlock, editor: ReadyToGoRecommendationsEditor }
|
|
530
|
+
}
|
|
102
531
|
];
|
|
103
532
|
function createReadyToGoTemplate() {
|
|
104
|
-
return {
|
|
533
|
+
return {
|
|
534
|
+
id: "besttrack.ready-to-go",
|
|
535
|
+
version: 1,
|
|
536
|
+
name: "Ready-to-go",
|
|
537
|
+
target: "web",
|
|
538
|
+
source: "built-in",
|
|
539
|
+
requiredBlocks: readyToGoBlocks.map((block) => block.type),
|
|
540
|
+
theme: {
|
|
541
|
+
"color.primary": "#111111",
|
|
542
|
+
"color.background": "#ffffff",
|
|
543
|
+
"color.surface": "#ffffff",
|
|
544
|
+
"color.text": "#0f172a",
|
|
545
|
+
"color.muted": "#64748b",
|
|
546
|
+
"color.border": "#cbd5e1",
|
|
547
|
+
"font.family": "Inter, system-ui, sans-serif",
|
|
548
|
+
radius: "8px",
|
|
549
|
+
spacing: "24px"
|
|
550
|
+
},
|
|
551
|
+
create: () => createPageDocument({
|
|
552
|
+
pageId: "besttrack-ready-to-go",
|
|
553
|
+
target: "web",
|
|
554
|
+
templateId: "besttrack.ready-to-go",
|
|
555
|
+
templateVersion: 1,
|
|
556
|
+
settings: { locale: "en", seoTitle: "Track your order" },
|
|
557
|
+
blocks: readyToGoBlocks.map((block, index) => ({
|
|
558
|
+
id: `ready-to-go-${index + 1}`,
|
|
559
|
+
type: block.type,
|
|
560
|
+
version: block.version,
|
|
561
|
+
props: block.defaultProps,
|
|
562
|
+
variant: block.defaultVariant,
|
|
563
|
+
style: {}
|
|
564
|
+
}))
|
|
565
|
+
})
|
|
566
|
+
};
|
|
105
567
|
}
|
|
106
|
-
var bestTrackPageExtension = Object.freeze({
|
|
568
|
+
var bestTrackPageExtension = Object.freeze({
|
|
569
|
+
name: "besttrack.ready-to-go",
|
|
570
|
+
version: "0.7.0",
|
|
571
|
+
fields: [{ type: "besttrack.ready-to-go.text", component: ReadyToGoTextField }],
|
|
572
|
+
blocks: readyToGoBlocks,
|
|
573
|
+
templates: [createReadyToGoTemplate()]
|
|
574
|
+
});
|
|
107
575
|
|
|
108
576
|
// src/branded-definition.ts
|
|
109
577
|
import { createPageDocument as createPageDocument2 } from "@standhigher/puck-page-builder/runtime";
|
|
110
578
|
|
|
111
579
|
// src/branded.tsx
|
|
112
|
-
import { createContext as createContext2, useCallback as useCallback2, useContext as useContext2, useMemo as useMemo2, useState as
|
|
113
|
-
|
|
580
|
+
import { createContext as createContext2, useCallback as useCallback2, useContext as useContext2, useMemo as useMemo2, useRef, useState as useState3 } from "react";
|
|
581
|
+
|
|
582
|
+
// src/tracking-page-runtime.ts
|
|
583
|
+
function isEmptyTrackingPageResult(result) {
|
|
584
|
+
return result.outcome === "empty";
|
|
585
|
+
}
|
|
586
|
+
|
|
587
|
+
// src/branded.tsx
|
|
588
|
+
import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
114
589
|
var initialRuntime2 = {
|
|
115
590
|
phase: "idle",
|
|
116
591
|
selectedShipmentId: null,
|
|
@@ -125,22 +600,27 @@ var initialRuntime2 = {
|
|
|
125
600
|
}
|
|
126
601
|
};
|
|
127
602
|
var BrandedRuntimeContext = createContext2(initialRuntime2);
|
|
128
|
-
var
|
|
129
|
-
var
|
|
603
|
+
var contentWidth2 = { width: "min(1200px, 100%)", margin: "0 auto", padding: "0 clamp(16px, 4vw, 48px)", boxSizing: "border-box" };
|
|
604
|
+
var cardStyle = { background: "#fff", color: "#0a0a0a", border: "1px solid #e7e7e7", borderRadius: 10, fontFamily: "var(--pb-font-family)" };
|
|
130
605
|
function BrandedRuntimeProvider({ children, queryTracking }) {
|
|
131
|
-
const [state, setState] =
|
|
132
|
-
const [selectedShipmentId, setSelectedShipmentId] =
|
|
606
|
+
const [state, setState] = useState3({ phase: "idle" });
|
|
607
|
+
const [selectedShipmentId, setSelectedShipmentId] = useState3(null);
|
|
608
|
+
const requestId = useRef(0);
|
|
133
609
|
const query = useCallback2(async (trackingNumber) => {
|
|
610
|
+
const currentRequestId = ++requestId.current;
|
|
134
611
|
setState({ phase: "loading" });
|
|
135
612
|
try {
|
|
136
613
|
const result = await queryTracking(trackingNumber);
|
|
614
|
+
if (currentRequestId !== requestId.current) return;
|
|
137
615
|
setSelectedShipmentId(result.shipments?.[0]?.id ?? null);
|
|
138
|
-
setState({ phase: "success", result });
|
|
139
|
-
} catch
|
|
140
|
-
|
|
616
|
+
setState({ phase: isEmptyTrackingPageResult(result) ? "empty" : "success", result });
|
|
617
|
+
} catch {
|
|
618
|
+
if (currentRequestId !== requestId.current) return;
|
|
619
|
+
setState({ phase: "error", error: "tracking-query-failed" });
|
|
141
620
|
}
|
|
142
621
|
}, [queryTracking]);
|
|
143
622
|
const reset = useCallback2(() => {
|
|
623
|
+
requestId.current += 1;
|
|
144
624
|
setSelectedShipmentId(null);
|
|
145
625
|
setState({ phase: "idle" });
|
|
146
626
|
}, []);
|
|
@@ -149,22 +629,24 @@ function BrandedRuntimeProvider({ children, queryTracking }) {
|
|
|
149
629
|
const shipment = state.result.shipments?.find((item) => item.id === selectedShipmentId);
|
|
150
630
|
return shipment ? { ...state.result, ...shipment } : state.result;
|
|
151
631
|
}, [selectedShipmentId, state.result]);
|
|
152
|
-
const selectShipment = useCallback2((id) =>
|
|
632
|
+
const selectShipment = useCallback2((id) => {
|
|
633
|
+
if (state.result?.shipments?.some((shipment) => shipment.id === id)) setSelectedShipmentId(id);
|
|
634
|
+
}, [state.result]);
|
|
153
635
|
const value = useMemo2(
|
|
154
636
|
() => ({ ...state, displayedResult, selectedShipmentId, query, reset, selectShipment }),
|
|
155
637
|
[displayedResult, query, reset, selectedShipmentId, selectShipment, state]
|
|
156
638
|
);
|
|
157
|
-
return /* @__PURE__ */
|
|
639
|
+
return /* @__PURE__ */ jsx3(BrandedRuntimeContext.Provider, { value, children });
|
|
158
640
|
}
|
|
159
641
|
function useBrandedRuntime() {
|
|
160
642
|
return useContext2(BrandedRuntimeContext);
|
|
161
643
|
}
|
|
162
|
-
function
|
|
644
|
+
function text3(props, key, fallback) {
|
|
163
645
|
return typeof props[key] === "string" ? props[key] : fallback;
|
|
164
646
|
}
|
|
165
|
-
function
|
|
647
|
+
function safeHref2(value) {
|
|
166
648
|
if (typeof value !== "string") return "#";
|
|
167
|
-
if (value.startsWith("/")) return value;
|
|
649
|
+
if (value.startsWith("/") && !value.startsWith("//")) return value;
|
|
168
650
|
try {
|
|
169
651
|
const url = new URL(value);
|
|
170
652
|
return url.protocol === "https:" || url.protocol === "http:" ? url.toString() : "#";
|
|
@@ -172,7 +654,7 @@ function safeHref(value) {
|
|
|
172
654
|
return "#";
|
|
173
655
|
}
|
|
174
656
|
}
|
|
175
|
-
function
|
|
657
|
+
function safeImageUrl2(value) {
|
|
176
658
|
if (typeof value !== "string") return "";
|
|
177
659
|
try {
|
|
178
660
|
const url = new URL(value);
|
|
@@ -184,85 +666,86 @@ function safeImageUrl(value) {
|
|
|
184
666
|
function shipmentLabels(value) {
|
|
185
667
|
return typeof value === "string" ? value.split("|").map((label, index) => ({ id: "configured-" + index, label: label.trim() })).filter((item) => item.label) : [];
|
|
186
668
|
}
|
|
187
|
-
function
|
|
188
|
-
const [failed, setFailed] =
|
|
189
|
-
const safeSrc =
|
|
669
|
+
function ProductImage2({ src, alt }) {
|
|
670
|
+
const [failed, setFailed] = useState3(false);
|
|
671
|
+
const safeSrc = safeImageUrl2(src);
|
|
190
672
|
if (!safeSrc || failed) {
|
|
191
|
-
return /* @__PURE__ */
|
|
673
|
+
return /* @__PURE__ */ jsx3("span", { "aria-label": alt + " image unavailable", style: { display: "grid", placeItems: "center", width: 72, height: 72, flex: "0 0 auto", borderRadius: 6, background: "#f2f2f2", color: "#6b6b6b", fontSize: 14 }, children: alt.slice(0, 1).toUpperCase() });
|
|
192
674
|
}
|
|
193
|
-
return /* @__PURE__ */
|
|
675
|
+
return /* @__PURE__ */ jsx3("img", { src: safeSrc, alt, onError: () => setFailed(true), style: { width: 72, height: 72, flex: "0 0 auto", borderRadius: 6, objectFit: "cover", background: "#f2f2f2" } });
|
|
194
676
|
}
|
|
195
677
|
function ShipmentSwitcher({ shipmentLabels: configuredLabels }) {
|
|
196
678
|
const runtime = useBrandedRuntime();
|
|
197
679
|
const configuredShipments = shipmentLabels(configuredLabels);
|
|
198
|
-
const shipments = runtime.
|
|
680
|
+
const shipments = runtime.phase === "idle" || runtime.phase === "loading" ? configuredShipments : runtime.result?.shipments ?? [];
|
|
199
681
|
if (!shipments.length) return null;
|
|
200
|
-
return /* @__PURE__ */
|
|
682
|
+
return /* @__PURE__ */ jsx3("div", { "aria-label": "Shipment switcher", style: { ...contentWidth2, minHeight: 56, display: "flex", alignItems: "center", gap: 8, overflowX: "auto", whiteSpace: "nowrap" }, children: shipments.map((shipment, index) => {
|
|
201
683
|
const selected = (runtime.selectedShipmentId ?? shipments[0]?.id) === shipment.id;
|
|
202
|
-
return /* @__PURE__ */
|
|
684
|
+
return /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => runtime.selectShipment(shipment.id), "aria-pressed": selected, style: { minWidth: 92, minHeight: 36, padding: "0 12px", border: selected ? "1px solid #1a1a1a" : "1px solid #e7e7e7", borderRadius: 4, background: "#fff", color: "#0a0a0a", fontSize: 11, fontWeight: selected ? 700 : 400, cursor: "pointer" }, children: shipment.label || "Shipment #" + (index + 1) }, shipment.id);
|
|
203
685
|
}) });
|
|
204
686
|
}
|
|
205
687
|
function QueryHero(props) {
|
|
206
688
|
const runtime = useBrandedRuntime();
|
|
207
|
-
const [trackingNumber, setTrackingNumber] =
|
|
208
|
-
const [mode, setMode] =
|
|
209
|
-
const [heroImageFailed, setHeroImageFailed] =
|
|
689
|
+
const [trackingNumber, setTrackingNumber] = useState3(text3(props, "defaultTrackingNumber", "DEMO-YQTRACK9999"));
|
|
690
|
+
const [mode, setMode] = useState3(text3(props, "defaultQueryMode", "tracking") === "order" ? "order" : "tracking");
|
|
691
|
+
const [heroImageFailed, setHeroImageFailed] = useState3(false);
|
|
210
692
|
const submit = (event) => {
|
|
211
693
|
event.preventDefault();
|
|
212
694
|
void runtime.query(trackingNumber);
|
|
213
695
|
};
|
|
214
|
-
return /* @__PURE__ */
|
|
215
|
-
!heroImageFailed &&
|
|
216
|
-
/* @__PURE__ */
|
|
217
|
-
/* @__PURE__ */
|
|
218
|
-
/* @__PURE__ */
|
|
219
|
-
/* @__PURE__ */
|
|
220
|
-
/* @__PURE__ */
|
|
221
|
-
/* @__PURE__ */
|
|
696
|
+
return /* @__PURE__ */ jsxs3("div", { style: { position: "relative", minHeight: "clamp(520px, 44vw, 560px)", display: "grid", placeItems: "center", overflow: "hidden", background: "linear-gradient(135deg, #dedbd4, #b9b3aa)" }, children: [
|
|
697
|
+
!heroImageFailed && safeImageUrl2(props.heroImageUrl) ? /* @__PURE__ */ jsx3("img", { src: safeImageUrl2(props.heroImageUrl), alt: "", onError: () => setHeroImageFailed(true), style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" } }) : null,
|
|
698
|
+
/* @__PURE__ */ jsx3("div", { "aria-hidden": "true", style: { position: "absolute", inset: 0, background: "rgba(255,255,255,0.12)" } }),
|
|
699
|
+
/* @__PURE__ */ jsxs3("div", { style: { ...cardStyle, position: "relative", zIndex: 1, width: "min(560px, calc(100% - 32px))", padding: "clamp(24px, 5vw, 48px)", boxSizing: "border-box", boxShadow: "0 16px 40px rgb(0 0 0 / 8%)" }, children: [
|
|
700
|
+
/* @__PURE__ */ jsx3("h1", { style: { margin: "0 0 36px", textAlign: "center", fontSize: "clamp(28px, 3vw, 32px)", lineHeight: 1.15 }, children: text3(props, "heading", "Track your order") }),
|
|
701
|
+
/* @__PURE__ */ jsxs3("div", { role: "tablist", "aria-label": "Tracking method", style: { display: "grid", gridTemplateColumns: "1fr 1fr", borderBottom: "1px solid #e7e7e7", marginBottom: 24 }, children: [
|
|
702
|
+
/* @__PURE__ */ jsx3("button", { type: "button", role: "tab", "aria-selected": mode === "order", onClick: () => setMode("order"), style: { minHeight: 40, border: 0, borderBottom: mode === "order" ? "2px solid #0a0a0a" : "2px solid transparent", background: "transparent", fontWeight: mode === "order" ? 700 : 400, cursor: "pointer" }, children: "Order Number" }),
|
|
703
|
+
/* @__PURE__ */ jsx3("button", { type: "button", role: "tab", "aria-selected": mode === "tracking", onClick: () => setMode("tracking"), style: { minHeight: 40, border: 0, borderBottom: mode === "tracking" ? "2px solid #0a0a0a" : "2px solid transparent", background: "transparent", fontWeight: mode === "tracking" ? 700 : 400, cursor: "pointer" }, children: "Tracking Number" })
|
|
222
704
|
] }),
|
|
223
|
-
/* @__PURE__ */
|
|
224
|
-
/* @__PURE__ */
|
|
225
|
-
/* @__PURE__ */
|
|
226
|
-
/* @__PURE__ */
|
|
705
|
+
/* @__PURE__ */ jsxs3("form", { onSubmit: submit, children: [
|
|
706
|
+
/* @__PURE__ */ jsx3("label", { htmlFor: "branded-tracking-number", style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clipPath: "inset(50%)" }, children: mode === "order" ? "Order number" : "Tracking number" }),
|
|
707
|
+
/* @__PURE__ */ jsx3("input", { id: "branded-tracking-number", "aria-label": mode === "order" ? "Order number" : "Tracking number", value: trackingNumber, onChange: (event) => setTrackingNumber(event.target.value), required: true, minLength: 4, maxLength: 64, placeholder: mode === "order" ? "Enter your order number" : "Enter your tracking number", style: { width: "100%", height: 48, padding: "0 16px", boxSizing: "border-box", border: "1px solid #e2e2e2", borderRadius: 10, font: "inherit" } }),
|
|
708
|
+
/* @__PURE__ */ jsx3("button", { type: "submit", disabled: runtime.phase === "loading", style: { width: "100%", minHeight: 48, marginTop: 24, border: 0, borderRadius: 10, background: runtime.phase === "loading" ? "#6b6b6b" : "#000", color: "#fff", font: "inherit", cursor: runtime.phase === "loading" ? "wait" : "pointer" }, children: runtime.phase === "loading" ? "Tracking\u2026" : text3(props, "submitLabel", "Track") })
|
|
227
709
|
] }),
|
|
228
|
-
runtime.phase === "
|
|
229
|
-
/* @__PURE__ */
|
|
710
|
+
runtime.phase === "empty" ? /* @__PURE__ */ jsx3("p", { role: "status", style: { marginBottom: 0, color: "#6b6b6b" }, children: "We couldn\u2019t find an order for that number." }) : null,
|
|
711
|
+
runtime.phase === "error" ? /* @__PURE__ */ jsx3("p", { role: "alert", style: { marginBottom: 0, color: "#b42318" }, children: "We couldn\u2019t retrieve this order right now. Please try again later." }) : null,
|
|
712
|
+
/* @__PURE__ */ jsx3("small", { style: { display: "block", marginTop: 10, color: "#8a8a8a", fontSize: 8, textAlign: "right" }, children: "Powered by BestTrack" })
|
|
230
713
|
] })
|
|
231
714
|
] });
|
|
232
715
|
}
|
|
233
|
-
function
|
|
716
|
+
function defaultProgress2(status) {
|
|
234
717
|
const steps = ["Ordered", "Order Ready", "In Transit", "Out for Delivery", "Delivered"];
|
|
235
718
|
const normalized = status.toLowerCase();
|
|
236
719
|
const current = normalized.includes("deliver") ? normalized.includes("out for") ? 3 : 4 : normalized.includes("transit") ? 2 : normalized.includes("ready") ? 1 : 0;
|
|
237
720
|
return steps.map((label, index) => ({ id: label.toLowerCase().replaceAll(" ", "-"), label, state: index < current ? "complete" : index === current ? "current" : "upcoming" }));
|
|
238
721
|
}
|
|
239
|
-
function
|
|
240
|
-
return /* @__PURE__ */
|
|
241
|
-
index > 0 ? /* @__PURE__ */
|
|
242
|
-
/* @__PURE__ */
|
|
243
|
-
/* @__PURE__ */
|
|
722
|
+
function TrackingProgress2({ steps }) {
|
|
723
|
+
return /* @__PURE__ */ jsx3("div", { "aria-label": "Delivery progress", style: { overflowX: "auto", padding: "28px 0 8px" }, children: /* @__PURE__ */ jsx3("ol", { style: { display: "grid", gridTemplateColumns: "repeat(" + steps.length + ", minmax(112px, 1fr))", minWidth: Math.max(560, steps.length * 138), padding: 0, margin: 0, listStyle: "none" }, children: steps.map((step, index) => /* @__PURE__ */ jsxs3("li", { style: { position: "relative", display: "grid", justifyItems: "center", gap: 12, color: step.state === "upcoming" ? "#718096" : "#0f1d3a", textAlign: "center" }, children: [
|
|
724
|
+
index > 0 ? /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", style: { position: "absolute", top: 19, right: "50%", width: "100%", height: 8, transform: "translateX(-50%)", background: step.state === "upcoming" ? "#d1d5db" : "#0f1d3a" } }) : null,
|
|
725
|
+
/* @__PURE__ */ jsx3("span", { "aria-label": step.label + " " + step.state, style: { position: "relative", zIndex: 1, display: "grid", placeItems: "center", width: 40, height: 40, border: step.state === "current" ? "1px solid #0f1d3a" : "1px solid #8190a4", borderRadius: "50%", background: step.state === "complete" ? "#0f1d3a" : "#fff", color: step.state === "complete" ? "#fff" : "#0f1d3a", fontWeight: 700 }, children: step.state === "complete" ? "\u2713" : index + 1 }),
|
|
726
|
+
/* @__PURE__ */ jsx3("strong", { style: { fontSize: 14 }, children: step.label })
|
|
244
727
|
] }, step.id)) }) });
|
|
245
728
|
}
|
|
246
|
-
function
|
|
247
|
-
if (!events.length) return /* @__PURE__ */
|
|
248
|
-
return /* @__PURE__ */
|
|
249
|
-
/* @__PURE__ */
|
|
250
|
-
index < events.length - 1 ? /* @__PURE__ */
|
|
251
|
-
/* @__PURE__ */
|
|
252
|
-
/* @__PURE__ */
|
|
253
|
-
event.detail ? /* @__PURE__ */
|
|
254
|
-
event.at ? /* @__PURE__ */
|
|
729
|
+
function ShippingTimeline2({ events }) {
|
|
730
|
+
if (!events.length) return /* @__PURE__ */ jsx3("p", { style: { margin: 0, color: "#6b6b6b" }, children: "Shipping events will appear when the carrier publishes them." });
|
|
731
|
+
return /* @__PURE__ */ jsx3("ol", { "aria-label": "Shipping events", style: { display: "grid", gap: 22, margin: 0, padding: 0, listStyle: "none" }, children: events.map((event, index) => /* @__PURE__ */ jsxs3("li", { style: { display: "grid", gridTemplateColumns: "22px 1fr", columnGap: 14, position: "relative" }, children: [
|
|
732
|
+
/* @__PURE__ */ jsx3("span", { "aria-hidden": "true", style: { position: "relative", zIndex: 1, width: 14, height: 14, marginTop: 4, borderRadius: "50%", background: event.state === "current" || index === 0 ? "#42b765" : "#d5dfed" } }),
|
|
733
|
+
index < events.length - 1 ? /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", style: { position: "absolute", left: 6, top: 18, bottom: -26, width: 2, background: "#e0e7f0" } }) : null,
|
|
734
|
+
/* @__PURE__ */ jsxs3("div", { children: [
|
|
735
|
+
/* @__PURE__ */ jsx3("strong", { style: { color: index === 0 ? "#cb4d34" : "#51657f" }, children: event.title }),
|
|
736
|
+
event.detail ? /* @__PURE__ */ jsx3("p", { style: { margin: "4px 0", color: "#6b6b6b" }, children: event.detail }) : null,
|
|
737
|
+
event.at ? /* @__PURE__ */ jsx3("small", { style: { color: "#8a9ab0" }, children: event.at }) : null
|
|
255
738
|
] })
|
|
256
739
|
] }, event.id)) });
|
|
257
740
|
}
|
|
258
|
-
function
|
|
259
|
-
if (!items?.length) return /* @__PURE__ */
|
|
260
|
-
return /* @__PURE__ */
|
|
261
|
-
/* @__PURE__ */
|
|
262
|
-
/* @__PURE__ */
|
|
263
|
-
/* @__PURE__ */
|
|
264
|
-
/* @__PURE__ */
|
|
265
|
-
/* @__PURE__ */
|
|
741
|
+
function PackageContents2({ items }) {
|
|
742
|
+
if (!items?.length) return /* @__PURE__ */ jsx3("p", { style: { margin: 0, color: "#6b6b6b" }, children: "Package contents are not available for this shipment." });
|
|
743
|
+
return /* @__PURE__ */ jsx3("div", { style: { display: "grid", gap: 16 }, children: items.map((item) => /* @__PURE__ */ jsxs3("article", { style: { display: "flex", alignItems: "flex-start", gap: 14 }, children: [
|
|
744
|
+
/* @__PURE__ */ jsx3(ProductImage2, { src: item.imageUrl, alt: item.title }),
|
|
745
|
+
/* @__PURE__ */ jsxs3("div", { children: [
|
|
746
|
+
/* @__PURE__ */ jsx3("strong", { children: item.title }),
|
|
747
|
+
/* @__PURE__ */ jsx3("p", { style: { margin: "5px 0", color: "#6b6b6b", fontSize: 14 }, children: item.description ?? "Product details are available in your order." }),
|
|
748
|
+
/* @__PURE__ */ jsxs3("small", { style: { color: "#6b6b6b" }, children: [
|
|
266
749
|
"Qty ",
|
|
267
750
|
item.quantity
|
|
268
751
|
] })
|
|
@@ -273,39 +756,39 @@ function TrackingResult({ props }) {
|
|
|
273
756
|
const runtime = useBrandedRuntime();
|
|
274
757
|
const result = runtime.displayedResult;
|
|
275
758
|
if (!result) return null;
|
|
276
|
-
const progress = result.progress?.length ? result.progress :
|
|
759
|
+
const progress = result.progress?.length ? result.progress : defaultProgress2(result.status);
|
|
277
760
|
const events = result.events?.length ? result.events : result.latestEvent ? [{ id: "latest", title: result.latestEvent, at: result.updatedAt, state: "current" }] : [];
|
|
278
|
-
return /* @__PURE__ */
|
|
279
|
-
/* @__PURE__ */
|
|
280
|
-
/* @__PURE__ */
|
|
281
|
-
/* @__PURE__ */
|
|
761
|
+
return /* @__PURE__ */ jsxs3("section", { "aria-label": "Tracking result", style: { background: "#fff", borderTop: "1px solid #edf0f4", color: "#101828", fontFamily: "var(--pb-font-family)", padding: "clamp(36px, 6vw, 64px) 0" }, children: [
|
|
762
|
+
/* @__PURE__ */ jsxs3("div", { style: contentWidth2, children: [
|
|
763
|
+
/* @__PURE__ */ jsxs3("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 16, flexWrap: "wrap", textAlign: "center" }, children: [
|
|
764
|
+
/* @__PURE__ */ jsxs3("p", { style: { flex: "1 1 360px", margin: 0, fontSize: "clamp(18px, 2vw, 28px)" }, children: [
|
|
282
765
|
"Tracking: ",
|
|
283
766
|
result.trackingNumber
|
|
284
767
|
] }),
|
|
285
|
-
/* @__PURE__ */
|
|
768
|
+
/* @__PURE__ */ jsx3("button", { type: "button", onClick: runtime.reset, style: { padding: "8px 12px", border: "1px solid #cbd5e1", borderRadius: 6, background: "#fff", color: "#101828", font: "inherit", cursor: "pointer" }, children: text3(props, "trackAnotherLabel", "Track another order") })
|
|
286
769
|
] }),
|
|
287
|
-
/* @__PURE__ */
|
|
288
|
-
/* @__PURE__ */
|
|
770
|
+
/* @__PURE__ */ jsx3("h1", { style: { margin: "54px 0 0", fontSize: "clamp(36px, 5vw, 56px)", lineHeight: 1.1, textAlign: "center" }, children: result.status }),
|
|
771
|
+
/* @__PURE__ */ jsx3(TrackingProgress2, { steps: progress })
|
|
289
772
|
] }),
|
|
290
|
-
/* @__PURE__ */
|
|
291
|
-
/* @__PURE__ */
|
|
292
|
-
/* @__PURE__ */
|
|
293
|
-
/* @__PURE__ */
|
|
773
|
+
/* @__PURE__ */ jsx3("div", { style: { borderTop: "1px solid #edf0f4", marginTop: "clamp(28px, 5vw, 54px)", paddingTop: "clamp(36px, 5vw, 60px)" }, children: /* @__PURE__ */ jsxs3("div", { style: { ...contentWidth2, display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 340px), 1fr))", gap: "clamp(36px, 8vw, 120px)" }, children: [
|
|
774
|
+
/* @__PURE__ */ jsxs3("section", { "aria-label": "Shipping details", children: [
|
|
775
|
+
/* @__PURE__ */ jsx3("h2", { style: { margin: "0 0 28px", fontSize: 28 }, children: "Shipping Details" }),
|
|
776
|
+
/* @__PURE__ */ jsx3(ShippingTimeline2, { events })
|
|
294
777
|
] }),
|
|
295
|
-
/* @__PURE__ */
|
|
296
|
-
/* @__PURE__ */
|
|
297
|
-
/* @__PURE__ */
|
|
778
|
+
/* @__PURE__ */ jsxs3("section", { "aria-label": "Package contents", children: [
|
|
779
|
+
/* @__PURE__ */ jsx3("h2", { style: { margin: "0 0 28px", fontSize: 28 }, children: "Package Contents" }),
|
|
780
|
+
/* @__PURE__ */ jsx3(PackageContents2, { items: result.orderItems })
|
|
298
781
|
] })
|
|
299
782
|
] }) })
|
|
300
783
|
] });
|
|
301
784
|
}
|
|
302
785
|
function BrandedTextField({ value, onChange }) {
|
|
303
|
-
return /* @__PURE__ */
|
|
786
|
+
return /* @__PURE__ */ jsx3("input", { "aria-label": "Branded text", value: typeof value === "string" ? value : "", onChange: (event) => onChange(event.target.value) });
|
|
304
787
|
}
|
|
305
|
-
function
|
|
306
|
-
const value =
|
|
307
|
-
if (!block.selected) return /* @__PURE__ */
|
|
308
|
-
return /* @__PURE__ */
|
|
788
|
+
function InlineText2({ block, name, fallback }) {
|
|
789
|
+
const value = text3(block, name, fallback);
|
|
790
|
+
if (!block.selected) return /* @__PURE__ */ jsx3("span", { "data-branded-editor-field": name, children: value });
|
|
791
|
+
return /* @__PURE__ */ jsx3(
|
|
309
792
|
"input",
|
|
310
793
|
{
|
|
311
794
|
"aria-label": "Canvas " + name,
|
|
@@ -319,144 +802,145 @@ function InlineText({ block, name, fallback }) {
|
|
|
319
802
|
);
|
|
320
803
|
}
|
|
321
804
|
function EditorSurface({ block, children }) {
|
|
322
|
-
return /* @__PURE__ */
|
|
805
|
+
return /* @__PURE__ */ jsx3("section", { "aria-label": "Branded editor preview", style: { ...cardStyle, outline: block.selected ? "2px solid #2563eb" : "1px dashed #cbd5e1", outlineOffset: -2, padding: 24 }, children });
|
|
323
806
|
}
|
|
324
807
|
function BrandedAnnouncementEditor(block) {
|
|
325
|
-
return /* @__PURE__ */
|
|
808
|
+
return /* @__PURE__ */ jsx3("section", { "aria-label": "Branded announcement editor", style: { minHeight: 36, display: "grid", placeItems: "center", padding: "0 16px", background: "#252525", color: "#fff", fontFamily: "var(--pb-font-family)", fontSize: 12, textAlign: "center" }, children: /* @__PURE__ */ jsx3(InlineText2, { block, name: "message", fallback: "Check out our summer sale" }) });
|
|
326
809
|
}
|
|
327
810
|
function BrandedTrackingExperienceEditor(block) {
|
|
328
811
|
const labels = shipmentLabels(block.shipmentLabels);
|
|
329
|
-
return /* @__PURE__ */
|
|
330
|
-
/* @__PURE__ */
|
|
331
|
-
/* @__PURE__ */
|
|
332
|
-
/* @__PURE__ */
|
|
333
|
-
/* @__PURE__ */
|
|
334
|
-
/* @__PURE__ */
|
|
335
|
-
/* @__PURE__ */
|
|
812
|
+
return /* @__PURE__ */ jsxs3("section", { "aria-label": "Branded tracking experience editor", style: { background: "#fffdf0", fontFamily: "var(--pb-font-family)" }, children: [
|
|
813
|
+
/* @__PURE__ */ jsx3("div", { style: { ...contentWidth2, minHeight: 56, display: "flex", alignItems: "center", gap: 8, overflowX: "auto" }, children: labels.map((shipment, index) => /* @__PURE__ */ jsx3("span", { style: { minWidth: 92, padding: "9px 12px", border: index === 0 ? "1px solid #1a1a1a" : "1px solid #e7e7e7", borderRadius: 4, background: "#fff", fontSize: 11, fontWeight: index === 0 ? 700 : 400 }, children: shipment.label }, shipment.id)) }),
|
|
814
|
+
/* @__PURE__ */ jsx3("div", { style: { minHeight: 360, display: "grid", placeItems: "center", padding: 16, background: "linear-gradient(135deg, #dedbd4, #b9b3aa)" }, children: /* @__PURE__ */ jsxs3(EditorSurface, { block, children: [
|
|
815
|
+
/* @__PURE__ */ jsx3("h1", { style: { margin: "0 0 28px", textAlign: "center", fontSize: 32 }, children: /* @__PURE__ */ jsx3(InlineText2, { block, name: "heading", fallback: "Track your order" }) }),
|
|
816
|
+
/* @__PURE__ */ jsxs3("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", borderBottom: "1px solid #e7e7e7", marginBottom: 20, textAlign: "center" }, children: [
|
|
817
|
+
/* @__PURE__ */ jsx3("span", { style: { padding: 10 }, children: "Order Number" }),
|
|
818
|
+
/* @__PURE__ */ jsx3("strong", { style: { padding: 10, borderBottom: "2px solid #0a0a0a" }, children: "Tracking Number" })
|
|
336
819
|
] }),
|
|
337
|
-
/* @__PURE__ */
|
|
338
|
-
/* @__PURE__ */
|
|
339
|
-
/* @__PURE__ */
|
|
820
|
+
/* @__PURE__ */ jsx3("input", { "aria-label": "Canvas default tracking number", readOnly: !block.selected, value: text3(block, "defaultTrackingNumber", "DEMO-YQTRACK9999"), onMouseDown: (event) => block.selected && event.stopPropagation(), onClick: (event) => block.selected && event.stopPropagation(), onChange: (event) => block.onPropsChange({ defaultTrackingNumber: event.currentTarget.value }), style: { width: "100%", height: 44, boxSizing: "border-box", padding: "0 12px", border: block.selected ? "1px dashed #0a0a0a" : "1px solid #e2e2e2", borderRadius: 10, background: "#fff", font: "inherit" } }),
|
|
821
|
+
/* @__PURE__ */ jsx3("div", { style: { display: "grid", placeItems: "center", minHeight: 46, marginTop: 16, borderRadius: 10, background: "#000", color: "#fff", fontWeight: 700 }, children: /* @__PURE__ */ jsx3(InlineText2, { block, name: "submitLabel", fallback: "Track" }) }),
|
|
822
|
+
/* @__PURE__ */ jsx3("small", { style: { display: "block", marginTop: 10, color: "#8a8a8a", fontSize: 9, textAlign: "right" }, children: "Powered by BestTrack" })
|
|
340
823
|
] }) })
|
|
341
824
|
] });
|
|
342
825
|
}
|
|
343
826
|
function BrandedQueryEditor(block) {
|
|
344
|
-
return /* @__PURE__ */
|
|
827
|
+
return /* @__PURE__ */ jsx3(BrandedTrackingExperienceEditor, { ...block });
|
|
345
828
|
}
|
|
346
829
|
function BrandedOrderItemsEditor(block) {
|
|
347
|
-
return /* @__PURE__ */
|
|
348
|
-
/* @__PURE__ */
|
|
349
|
-
/* @__PURE__ */
|
|
830
|
+
return /* @__PURE__ */ jsxs3(EditorSurface, { block, children: [
|
|
831
|
+
/* @__PURE__ */ jsx3("h2", { style: { margin: 0 }, children: /* @__PURE__ */ jsx3(InlineText2, { block, name: "heading", fallback: "What's Inside" }) }),
|
|
832
|
+
/* @__PURE__ */ jsx3("p", { style: { color: "#6b6b6b" }, children: "Package contents appear after a consumer tracking query." })
|
|
350
833
|
] });
|
|
351
834
|
}
|
|
352
835
|
function BrandedRecommendationsEditor(block) {
|
|
353
|
-
return /* @__PURE__ */
|
|
354
|
-
/* @__PURE__ */
|
|
355
|
-
/* @__PURE__ */
|
|
836
|
+
return /* @__PURE__ */ jsxs3(EditorSurface, { block, children: [
|
|
837
|
+
/* @__PURE__ */ jsx3("h2", { style: { margin: 0, textAlign: "center" }, children: /* @__PURE__ */ jsx3(InlineText2, { block, name: "heading", fallback: "You might also like" }) }),
|
|
838
|
+
/* @__PURE__ */ jsx3("p", { style: { color: "#6b6b6b", textAlign: "center" }, children: "Recommendations appear with the active shipment." })
|
|
356
839
|
] });
|
|
357
840
|
}
|
|
358
841
|
function BrandedQuickLinksEditor(block) {
|
|
359
|
-
return /* @__PURE__ */
|
|
360
|
-
/* @__PURE__ */
|
|
361
|
-
/* @__PURE__ */
|
|
362
|
-
/* @__PURE__ */
|
|
363
|
-
/* @__PURE__ */
|
|
842
|
+
return /* @__PURE__ */ jsxs3(EditorSurface, { block, children: [
|
|
843
|
+
/* @__PURE__ */ jsx3("h2", { children: /* @__PURE__ */ jsx3(InlineText2, { block, name: "heading", fallback: "Need help?" }) }),
|
|
844
|
+
/* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: 20 }, children: [
|
|
845
|
+
/* @__PURE__ */ jsx3(InlineText2, { block, name: "primaryLabel", fallback: "Shipping help" }),
|
|
846
|
+
/* @__PURE__ */ jsx3(InlineText2, { block, name: "secondaryLabel", fallback: "Contact us" })
|
|
364
847
|
] })
|
|
365
848
|
] });
|
|
366
849
|
}
|
|
367
850
|
function BrandedBlogEditor(block) {
|
|
368
|
-
return /* @__PURE__ */
|
|
369
|
-
/* @__PURE__ */
|
|
370
|
-
/* @__PURE__ */
|
|
371
|
-
/* @__PURE__ */
|
|
372
|
-
/* @__PURE__ */
|
|
373
|
-
/* @__PURE__ */
|
|
851
|
+
return /* @__PURE__ */ jsxs3(EditorSurface, { block, children: [
|
|
852
|
+
/* @__PURE__ */ jsx3("h2", { children: /* @__PURE__ */ jsx3(InlineText2, { block, name: "heading", fallback: "From our journal" }) }),
|
|
853
|
+
/* @__PURE__ */ jsxs3("article", { children: [
|
|
854
|
+
/* @__PURE__ */ jsx3("strong", { children: /* @__PURE__ */ jsx3(InlineText2, { block, name: "articleTitle", fallback: "Delivery tips for every season" }) }),
|
|
855
|
+
/* @__PURE__ */ jsx3("p", { children: /* @__PURE__ */ jsx3(InlineText2, { block, name: "excerpt", fallback: "Simple ways to make every delivery feel considered." }) }),
|
|
856
|
+
/* @__PURE__ */ jsx3(InlineText2, { block, name: "linkLabel", fallback: "Read the story" })
|
|
374
857
|
] })
|
|
375
858
|
] });
|
|
376
859
|
}
|
|
377
860
|
function BrandedAnnouncementBlock(props) {
|
|
378
|
-
const message =
|
|
861
|
+
const message = text3(props, "message", "");
|
|
379
862
|
if (!message) return null;
|
|
380
|
-
return /* @__PURE__ */
|
|
863
|
+
return /* @__PURE__ */ jsx3("section", { "aria-label": "Branded announcement", style: { minHeight: 36, display: "grid", placeItems: "center", padding: "0 16px", background: "#252525", color: "#fff", fontFamily: "var(--pb-font-family)", fontSize: 12, textAlign: "center" }, children: /* @__PURE__ */ jsx3("a", { href: safeHref2(props.href), style: { color: "inherit", textDecoration: "none" }, children: message }) });
|
|
381
864
|
}
|
|
382
865
|
function BrandedTrackingExperienceBlock(props) {
|
|
383
866
|
const runtime = useBrandedRuntime();
|
|
384
|
-
return /* @__PURE__ */
|
|
385
|
-
/* @__PURE__ */
|
|
386
|
-
runtime.phase === "success" ? /* @__PURE__ */
|
|
867
|
+
return /* @__PURE__ */ jsxs3("section", { "aria-label": "Branded tracking experience", style: { background: "#fffdf0", fontFamily: "var(--pb-font-family)" }, children: [
|
|
868
|
+
/* @__PURE__ */ jsx3(ShipmentSwitcher, { shipmentLabels: props.shipmentLabels }),
|
|
869
|
+
runtime.phase === "success" ? /* @__PURE__ */ jsx3(TrackingResult, { props }) : /* @__PURE__ */ jsx3(QueryHero, { ...props })
|
|
387
870
|
] });
|
|
388
871
|
}
|
|
389
872
|
function BrandedQueryBlock(props) {
|
|
390
|
-
return /* @__PURE__ */
|
|
391
|
-
/* @__PURE__ */
|
|
392
|
-
/* @__PURE__ */
|
|
873
|
+
return /* @__PURE__ */ jsxs3("section", { "aria-label": "Branded tracking query", style: { background: "#fffdf0", fontFamily: "var(--pb-font-family)" }, children: [
|
|
874
|
+
/* @__PURE__ */ jsx3(ShipmentSwitcher, { shipmentLabels: props.shipmentLabels }),
|
|
875
|
+
/* @__PURE__ */ jsx3(QueryHero, { ...props })
|
|
393
876
|
] });
|
|
394
877
|
}
|
|
395
878
|
function BrandedOrderItemsBlock(props) {
|
|
396
879
|
const runtime = useBrandedRuntime();
|
|
397
880
|
const items = runtime.displayedResult?.orderItems ?? [];
|
|
398
|
-
const title =
|
|
399
|
-
return /* @__PURE__ */
|
|
400
|
-
/* @__PURE__ */
|
|
881
|
+
const title = text3(props, "heading", "What's Inside");
|
|
882
|
+
return /* @__PURE__ */ jsx3("section", { "aria-label": title, style: { background: "#fffdf0", color: "#0a0a0a", fontFamily: "var(--pb-font-family)", padding: "clamp(28px, 4vw, 48px) 0" }, children: /* @__PURE__ */ jsxs3("div", { style: contentWidth2, children: [
|
|
883
|
+
/* @__PURE__ */ jsxs3("h2", { style: { margin: "0 0 20px", fontSize: 20 }, children: [
|
|
401
884
|
title,
|
|
402
885
|
runtime.phase === "success" ? " (" + items.length + ")" : ""
|
|
403
886
|
] }),
|
|
404
|
-
runtime.phase === "success" ? /* @__PURE__ */
|
|
887
|
+
runtime.phase === "success" ? /* @__PURE__ */ jsx3(PackageContents2, { items }) : /* @__PURE__ */ jsx3("p", { style: { margin: 0, color: runtime.phase === "error" ? "#b42318" : "#6b6b6b" }, children: runtime.phase === "error" ? "Order items are temporarily unavailable." : "Track an order to see what is inside." })
|
|
405
888
|
] }) });
|
|
406
889
|
}
|
|
407
890
|
function RecommendationCard({ item }) {
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
/* @__PURE__ */
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
/* @__PURE__ */
|
|
414
|
-
/* @__PURE__ */
|
|
891
|
+
const href = safeHref2(item.href);
|
|
892
|
+
return /* @__PURE__ */ jsxs3("article", { style: { overflow: "hidden", borderRadius: 6, background: "#fff", boxShadow: "0 1px 2px rgb(0 0 0 / 8%)" }, children: [
|
|
893
|
+
/* @__PURE__ */ jsx3(ProductImage2, { src: item.imageUrl, alt: item.title }),
|
|
894
|
+
/* @__PURE__ */ jsxs3("div", { style: { padding: 14 }, children: [
|
|
895
|
+
/* @__PURE__ */ jsx3("strong", { children: item.title }),
|
|
896
|
+
item.price ? /* @__PURE__ */ jsx3("p", { style: { margin: "6px 0", fontWeight: 700 }, children: item.price }) : null,
|
|
897
|
+
/* @__PURE__ */ jsx3("p", { style: { margin: "6px 0", color: "#6b6b6b", fontSize: 13 }, children: item.description }),
|
|
898
|
+
href === "#" ? /* @__PURE__ */ jsx3("span", { style: { color: "#6b6b6b", fontSize: 13, fontWeight: 700 }, children: "View product" }) : /* @__PURE__ */ jsx3("a", { href, style: { color: "#0a0a0a", fontSize: 13, fontWeight: 700 }, children: "View product" })
|
|
415
899
|
] })
|
|
416
900
|
] });
|
|
417
901
|
}
|
|
418
902
|
function BrandedRecommendationsBlock(props) {
|
|
419
903
|
const runtime = useBrandedRuntime();
|
|
420
904
|
const recommendations = runtime.displayedResult?.recommendations ?? [];
|
|
421
|
-
const title =
|
|
422
|
-
if (runtime.phase === "success" && !recommendations.length &&
|
|
423
|
-
return /* @__PURE__ */
|
|
424
|
-
/* @__PURE__ */
|
|
425
|
-
runtime.phase === "loading" ? /* @__PURE__ */
|
|
905
|
+
const title = text3(props, "heading", "You might also like");
|
|
906
|
+
if ((runtime.phase === "success" || runtime.phase === "empty") && !recommendations.length && text3(props, "hideWhenEmpty", "false") === "true") return null;
|
|
907
|
+
return /* @__PURE__ */ jsx3("section", { "aria-label": title, style: { background: "#fffdf0", color: "#0a0a0a", fontFamily: "var(--pb-font-family)", padding: "clamp(28px, 4vw, 48px) 0" }, children: /* @__PURE__ */ jsxs3("div", { style: contentWidth2, children: [
|
|
908
|
+
/* @__PURE__ */ jsx3("h2", { style: { margin: "0 0 24px", textAlign: "center", fontSize: 20 }, children: title }),
|
|
909
|
+
runtime.phase === "loading" ? /* @__PURE__ */ jsx3("div", { "aria-label": "Loading recommendations", style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 16 }, children: [0, 1, 2].map((item) => /* @__PURE__ */ jsx3("span", { style: { display: "block", height: 220, borderRadius: 6, background: "#e7e7e7" } }, item)) }) : runtime.phase === "success" && recommendations.length ? /* @__PURE__ */ jsx3("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 16 }, children: recommendations.map((item) => /* @__PURE__ */ jsx3(RecommendationCard, { item }, item.id)) }) : /* @__PURE__ */ jsx3("p", { style: { margin: 0, textAlign: "center", color: runtime.phase === "error" ? "#b42318" : "#6b6b6b" }, children: runtime.phase === "error" ? "Recommendations are temporarily unavailable." : runtime.phase === "empty" ? "No recommendations are available for that number." : "Recommendations will appear with your order." })
|
|
426
910
|
] }) });
|
|
427
911
|
}
|
|
428
912
|
function BrandedQuickLinksBlock(props) {
|
|
429
|
-
const title =
|
|
430
|
-
return /* @__PURE__ */
|
|
431
|
-
/* @__PURE__ */
|
|
432
|
-
/* @__PURE__ */
|
|
433
|
-
/* @__PURE__ */
|
|
434
|
-
/* @__PURE__ */
|
|
913
|
+
const title = text3(props, "heading", "Need help?");
|
|
914
|
+
return /* @__PURE__ */ jsxs3("section", { "aria-label": title, style: { ...cardStyle, margin: "24px auto", maxWidth: 1200, padding: 24 }, children: [
|
|
915
|
+
/* @__PURE__ */ jsx3("h2", { children: title }),
|
|
916
|
+
/* @__PURE__ */ jsxs3("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: 16 }, children: [
|
|
917
|
+
/* @__PURE__ */ jsx3("a", { href: safeHref2(props.primaryHref), style: { color: "#0a0a0a" }, children: text3(props, "primaryLabel", "Shipping help") }),
|
|
918
|
+
/* @__PURE__ */ jsx3("a", { href: safeHref2(props.secondaryHref), style: { color: "#0a0a0a" }, children: text3(props, "secondaryLabel", "Contact us") })
|
|
435
919
|
] })
|
|
436
920
|
] });
|
|
437
921
|
}
|
|
438
922
|
function BrandedBlogBlock(props) {
|
|
439
|
-
const title =
|
|
440
|
-
return /* @__PURE__ */
|
|
441
|
-
/* @__PURE__ */
|
|
442
|
-
/* @__PURE__ */
|
|
443
|
-
/* @__PURE__ */
|
|
444
|
-
/* @__PURE__ */
|
|
445
|
-
/* @__PURE__ */
|
|
923
|
+
const title = text3(props, "heading", "From our journal");
|
|
924
|
+
return /* @__PURE__ */ jsxs3("section", { "aria-label": title, style: { ...cardStyle, margin: "24px auto", maxWidth: 1200, padding: 24 }, children: [
|
|
925
|
+
/* @__PURE__ */ jsx3("h2", { children: title }),
|
|
926
|
+
/* @__PURE__ */ jsxs3("article", { children: [
|
|
927
|
+
/* @__PURE__ */ jsx3("strong", { children: text3(props, "articleTitle", "Delivery tips for every season") }),
|
|
928
|
+
/* @__PURE__ */ jsx3("p", { children: text3(props, "excerpt", "Simple ways to make every delivery feel considered.") }),
|
|
929
|
+
/* @__PURE__ */ jsx3("a", { href: safeHref2(props.articleHref), style: { color: "#0a0a0a" }, children: text3(props, "linkLabel", "Read the story") })
|
|
446
930
|
] })
|
|
447
931
|
] });
|
|
448
932
|
}
|
|
449
933
|
|
|
450
934
|
// src/branded-definition.ts
|
|
451
|
-
var
|
|
935
|
+
var text4 = (label, options = {}) => ({ field: "besttrack.branded.text", label, control: "text", ...options });
|
|
452
936
|
var brandedBlocks = [
|
|
453
|
-
{ type: "besttrack.branded.announcement", version: 1, label: "Announcement", category: "BestTrack Branded", targets: ["web"], defaultProps: { message: "Check out our summer sale", href: "/collections/sale" }, defaultVariant: "brand", variants: [{ id: "brand", label: "Brand" }, { id: "minimal", label: "Minimal", theme: { "color.primary": "#202223" } }], fields: { message:
|
|
454
|
-
{ type: "besttrack.branded.tracking-experience", version: 1, label: "Tracking experience", category: "BestTrack Branded", targets: ["web"], defaultProps: { heading: "Track your order", submitLabel: "Track", trackAnotherLabel: "Track another order", defaultTrackingNumber: "DEMO-YQTRACK9999", defaultQueryMode: "tracking", shipmentLabels: "Shipment #1|Shipment #2|Shipment #3", heroImageUrl: "https://images.unsplash.com/photo-1596462502278-27bfdc403348?auto=format&fit=crop&w=1600&q=85" }, defaultVariant: "brand", variants: [{ id: "brand", label: "Brand" }, { id: "compact", label: "Compact", theme: { spacing: "12px" } }], fields: { heading:
|
|
455
|
-
{ type: "besttrack.branded.query", version: 1, label: "Order query", category: "BestTrack Branded", targets: ["web"], defaultProps: { heading: "Track your order", submitLabel: "Track", defaultTrackingNumber: "DEMO-YQTRACK9999", defaultQueryMode: "tracking", shipmentLabels: "Shipment #1|Shipment #2|Shipment #3", heroImageUrl: "https://images.unsplash.com/photo-1596462502278-27bfdc403348?auto=format&fit=crop&w=1600&q=85" }, defaultVariant: "brand", variants: [{ id: "brand", label: "Brand" }, { id: "compact", label: "Compact", theme: { spacing: "12px" } }], fields: { heading:
|
|
456
|
-
{ type: "besttrack.branded.order-items", version: 1, label: "Order items", category: "BestTrack Branded", targets: ["web"], defaultProps: { heading: "What's Inside" }, defaultVariant: "brand", variants: [{ id: "brand", label: "Brand" }, { id: "minimal", label: "Minimal" }], fields: { heading:
|
|
457
|
-
{ type: "besttrack.branded.recommendations", version: 1, label: "Recommended products", category: "BestTrack Branded", targets: ["web"], defaultProps: { heading: "You might also like", hideWhenEmpty: "false" }, defaultVariant: "brand", variants: [{ id: "brand", label: "Brand" }, { id: "editorial", label: "Editorial", theme: { "color.surface": "#fffdf0" } }], fields: { heading:
|
|
458
|
-
{ type: "besttrack.branded.quick-links", version: 1, label: "Quick links", category: "BestTrack Branded", targets: ["web"], defaultProps: { heading: "Need help?", primaryLabel: "Shipping help", primaryHref: "/pages/shipping", secondaryLabel: "Contact us", secondaryHref: "/pages/contact" }, defaultVariant: "brand", variants: [{ id: "brand", label: "Brand" }], fields: { heading:
|
|
459
|
-
{ type: "besttrack.branded.blog", version: 1, label: "Blog", category: "BestTrack Branded", targets: ["web"], defaultProps: { heading: "From our journal", articleTitle: "Delivery tips for every season", excerpt: "Simple ways to make every delivery feel considered.", articleHref: "/blogs/news", linkLabel: "Read the story" }, defaultVariant: "brand", variants: [{ id: "brand", label: "Brand" }], fields: { heading:
|
|
937
|
+
{ type: "besttrack.branded.announcement", version: 1, label: "Announcement", category: "BestTrack Branded", targets: ["web"], defaultProps: { message: "Check out our summer sale", href: "/collections/sale" }, defaultVariant: "brand", variants: [{ id: "brand", label: "Brand" }, { id: "minimal", label: "Minimal", theme: { "color.primary": "#202223" } }], fields: { message: text4("Announcement", { control: "textarea" }), href: text4("Announcement URL", { control: "url" }) }, render: { web: BrandedAnnouncementBlock, editor: BrandedAnnouncementEditor } },
|
|
938
|
+
{ type: "besttrack.branded.tracking-experience", version: 1, label: "Tracking experience", category: "BestTrack Branded", targets: ["web"], defaultProps: { heading: "Track your order", submitLabel: "Track", trackAnotherLabel: "Track another order", defaultTrackingNumber: "DEMO-YQTRACK9999", defaultQueryMode: "tracking", shipmentLabels: "Shipment #1|Shipment #2|Shipment #3", heroImageUrl: "https://images.unsplash.com/photo-1596462502278-27bfdc403348?auto=format&fit=crop&w=1600&q=85" }, defaultVariant: "brand", variants: [{ id: "brand", label: "Brand" }, { id: "compact", label: "Compact", theme: { spacing: "12px" } }], fields: { heading: text4("Heading"), submitLabel: text4("Button label"), trackAnotherLabel: text4("Track another label"), defaultTrackingNumber: text4("Default tracking number"), defaultQueryMode: text4("Default query mode"), shipmentLabels: text4("Shipment labels (separate with |)"), heroImageUrl: text4("Hero image URL", { control: "url" }) }, render: { web: BrandedTrackingExperienceBlock, editor: BrandedTrackingExperienceEditor } },
|
|
939
|
+
{ type: "besttrack.branded.query", version: 1, label: "Order query", category: "BestTrack Branded", targets: ["web"], defaultProps: { heading: "Track your order", submitLabel: "Track", defaultTrackingNumber: "DEMO-YQTRACK9999", defaultQueryMode: "tracking", shipmentLabels: "Shipment #1|Shipment #2|Shipment #3", heroImageUrl: "https://images.unsplash.com/photo-1596462502278-27bfdc403348?auto=format&fit=crop&w=1600&q=85" }, defaultVariant: "brand", variants: [{ id: "brand", label: "Brand" }, { id: "compact", label: "Compact", theme: { spacing: "12px" } }], fields: { heading: text4("Heading"), submitLabel: text4("Button label"), defaultTrackingNumber: text4("Default tracking number"), defaultQueryMode: text4("Default query mode"), shipmentLabels: text4("Shipment labels (separate with |)"), heroImageUrl: text4("Hero image URL", { control: "url" }) }, render: { web: BrandedQueryBlock, editor: BrandedQueryEditor } },
|
|
940
|
+
{ type: "besttrack.branded.order-items", version: 1, label: "Order items", category: "BestTrack Branded", targets: ["web"], defaultProps: { heading: "What's Inside" }, defaultVariant: "brand", variants: [{ id: "brand", label: "Brand" }, { id: "minimal", label: "Minimal" }], fields: { heading: text4("Heading") }, render: { web: BrandedOrderItemsBlock, editor: BrandedOrderItemsEditor } },
|
|
941
|
+
{ type: "besttrack.branded.recommendations", version: 1, label: "Recommended products", category: "BestTrack Branded", targets: ["web"], defaultProps: { heading: "You might also like", hideWhenEmpty: "false" }, defaultVariant: "brand", variants: [{ id: "brand", label: "Brand" }, { id: "editorial", label: "Editorial", theme: { "color.surface": "#fffdf0" } }], fields: { heading: text4("Heading"), hideWhenEmpty: text4("Hide when empty (true/false)") }, render: { web: BrandedRecommendationsBlock, editor: BrandedRecommendationsEditor } },
|
|
942
|
+
{ type: "besttrack.branded.quick-links", version: 1, label: "Quick links", category: "BestTrack Branded", targets: ["web"], defaultProps: { heading: "Need help?", primaryLabel: "Shipping help", primaryHref: "/pages/shipping", secondaryLabel: "Contact us", secondaryHref: "/pages/contact" }, defaultVariant: "brand", variants: [{ id: "brand", label: "Brand" }], fields: { heading: text4("Heading"), primaryLabel: text4("Primary link label"), primaryHref: text4("Primary link URL", { control: "url" }), secondaryLabel: text4("Secondary link label"), secondaryHref: text4("Secondary link URL", { control: "url" }) }, render: { web: BrandedQuickLinksBlock, editor: BrandedQuickLinksEditor } },
|
|
943
|
+
{ type: "besttrack.branded.blog", version: 1, label: "Blog", category: "BestTrack Branded", targets: ["web"], defaultProps: { heading: "From our journal", articleTitle: "Delivery tips for every season", excerpt: "Simple ways to make every delivery feel considered.", articleHref: "/blogs/news", linkLabel: "Read the story" }, defaultVariant: "brand", variants: [{ id: "brand", label: "Brand" }], fields: { heading: text4("Heading"), articleTitle: text4("Article title"), excerpt: text4("Excerpt", { control: "textarea" }), articleHref: text4("Article URL", { control: "url" }), linkLabel: text4("Link label") }, render: { web: BrandedBlogBlock, editor: BrandedBlogEditor } }
|
|
460
944
|
];
|
|
461
945
|
function createBrandedTemplate() {
|
|
462
946
|
const templateBlocks = brandedBlocks.filter((block) => !["besttrack.branded.query", "besttrack.branded.order-items"].includes(block.type));
|
|
@@ -468,140 +952,347 @@ var bestTrackBrandedExtension = Object.freeze({ name: "besttrack.branded", versi
|
|
|
468
952
|
import { createPageDocument as createPageDocument3 } from "@standhigher/puck-page-builder/runtime";
|
|
469
953
|
|
|
470
954
|
// src/sales.tsx
|
|
471
|
-
import { createContext as createContext3, useCallback as useCallback3, useContext as useContext3, useMemo as useMemo3, useState as
|
|
472
|
-
import { jsx as
|
|
955
|
+
import { createContext as createContext3, useCallback as useCallback3, useContext as useContext3, useId, useMemo as useMemo3, useRef as useRef2, useState as useState4 } from "react";
|
|
956
|
+
import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
473
957
|
var initialRuntime3 = { phase: "idle", async query() {
|
|
474
958
|
return void 0;
|
|
475
959
|
} };
|
|
476
960
|
var SalesRuntimeContext = createContext3(initialRuntime3);
|
|
477
|
-
var
|
|
478
|
-
var
|
|
961
|
+
var contentWidth3 = { boxSizing: "border-box", width: "min(1120px, calc(100% - 32px))", margin: "0 auto" };
|
|
962
|
+
var sectionStyle = { ...contentWidth3, marginTop: "clamp(32px, 6vw, 72px)", color: "var(--pb-color-text)", fontFamily: "var(--pb-font-family)" };
|
|
963
|
+
var panelStyle = { boxSizing: "border-box", border: "1px solid var(--pb-color-border)", borderRadius: "var(--pb-radius)", padding: "clamp(20px, 3vw, 32px)", background: "var(--pb-color-surface)", color: "var(--pb-color-text)", overflowWrap: "anywhere" };
|
|
964
|
+
var gridStyle = { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 220px), 1fr))", gap: "clamp(16px, 2vw, 24px)" };
|
|
965
|
+
var trackingNumberPattern = /^[A-Za-z0-9-]{4,64}$/;
|
|
479
966
|
function SalesRuntimeProvider({ children, queryTracking }) {
|
|
480
|
-
const [state, setState] =
|
|
967
|
+
const [state, setState] = useState4({ phase: "idle" });
|
|
968
|
+
const requestId = useRef2(0);
|
|
481
969
|
const query = useCallback3(async (trackingNumber) => {
|
|
970
|
+
const currentRequestId = ++requestId.current;
|
|
482
971
|
setState({ phase: "loading" });
|
|
483
972
|
try {
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
setState({ phase:
|
|
973
|
+
const result = await queryTracking(trackingNumber);
|
|
974
|
+
if (currentRequestId !== requestId.current) return;
|
|
975
|
+
setState({ phase: isEmptyTrackingPageResult(result) ? "empty" : "success", result });
|
|
976
|
+
} catch {
|
|
977
|
+
if (currentRequestId !== requestId.current) return;
|
|
978
|
+
setState({ phase: "error" });
|
|
487
979
|
}
|
|
488
980
|
}, [queryTracking]);
|
|
489
981
|
const value = useMemo3(() => ({ ...state, query }), [query, state]);
|
|
490
|
-
return /* @__PURE__ */
|
|
982
|
+
return /* @__PURE__ */ jsx4(SalesRuntimeContext.Provider, { value, children });
|
|
491
983
|
}
|
|
492
984
|
function useSalesRuntime() {
|
|
493
985
|
return useContext3(SalesRuntimeContext);
|
|
494
986
|
}
|
|
495
|
-
function
|
|
496
|
-
|
|
987
|
+
function text5(props, key, fallback) {
|
|
988
|
+
const value = props[key];
|
|
989
|
+
return typeof value === "string" && value.trim() ? value.trim() : fallback;
|
|
497
990
|
}
|
|
498
|
-
function
|
|
499
|
-
|
|
500
|
-
|
|
991
|
+
function hasControlCharacter(value) {
|
|
992
|
+
return [...value].some((character) => character.charCodeAt(0) < 32);
|
|
993
|
+
}
|
|
994
|
+
function safeHref3(value) {
|
|
995
|
+
if (typeof value !== "string") return void 0;
|
|
996
|
+
if (value.startsWith("/") && !value.startsWith("//") && !value.startsWith("/\\") && !value.includes("\\") && !hasControlCharacter(value)) return value;
|
|
501
997
|
try {
|
|
502
998
|
const url = new URL(value);
|
|
503
|
-
return url.protocol === "https:"
|
|
999
|
+
return url.protocol === "https:" ? url.toString() : void 0;
|
|
504
1000
|
} catch {
|
|
505
|
-
return
|
|
1001
|
+
return void 0;
|
|
506
1002
|
}
|
|
507
1003
|
}
|
|
508
|
-
function
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
1004
|
+
function safeImageUrl3(value) {
|
|
1005
|
+
if (typeof value !== "string") return void 0;
|
|
1006
|
+
try {
|
|
1007
|
+
const url = new URL(value);
|
|
1008
|
+
return url.protocol === "https:" ? url.toString() : void 0;
|
|
1009
|
+
} catch {
|
|
1010
|
+
return void 0;
|
|
1011
|
+
}
|
|
513
1012
|
}
|
|
514
1013
|
function resourceState(value) {
|
|
515
1014
|
return typeof value !== "string" ? "invalid" : value.trim() ? "ready" : "empty";
|
|
516
1015
|
}
|
|
1016
|
+
function Status({ children, alert = false }) {
|
|
1017
|
+
return /* @__PURE__ */ jsx4("p", { role: alert ? "alert" : "status", "aria-live": alert ? "assertive" : "polite", style: { margin: "16px 0 0", color: alert ? "#a61b1b" : "var(--pb-color-muted)" }, children });
|
|
1018
|
+
}
|
|
1019
|
+
function Section({ title, children, busy = false }) {
|
|
1020
|
+
return /* @__PURE__ */ jsx4("section", { "aria-label": title, "aria-busy": busy || void 0, style: sectionStyle, children: /* @__PURE__ */ jsxs4("div", { style: panelStyle, children: [
|
|
1021
|
+
/* @__PURE__ */ jsx4("h2", { style: { margin: "0 0 20px", fontSize: "clamp(24px, 3vw, 34px)", lineHeight: 1.15 }, children: title }),
|
|
1022
|
+
children
|
|
1023
|
+
] }) });
|
|
1024
|
+
}
|
|
1025
|
+
function ProductImage3({ src, alt }) {
|
|
1026
|
+
const [failed, setFailed] = useState4(false);
|
|
1027
|
+
const safeSrc = safeImageUrl3(src);
|
|
1028
|
+
if (!safeSrc || failed) return /* @__PURE__ */ jsx4("span", { "aria-label": `${alt} image unavailable`, role: "img", style: { display: "grid", placeItems: "center", width: 76, height: 76, flex: "0 0 auto", border: "1px solid var(--pb-color-border)", borderRadius: "calc(var(--pb-radius) / 1.5)", background: "var(--pb-color-background)", color: "var(--pb-color-muted)", fontWeight: 700 }, children: alt.slice(0, 1).toUpperCase() });
|
|
1029
|
+
return /* @__PURE__ */ jsx4("img", { src: safeSrc, alt, onError: () => setFailed(true), style: { width: 76, height: 76, flex: "0 0 auto", borderRadius: "calc(var(--pb-radius) / 1.5)", objectFit: "cover", background: "var(--pb-color-background)" } });
|
|
1030
|
+
}
|
|
1031
|
+
function HeroAsset({ src }) {
|
|
1032
|
+
const [failed, setFailed] = useState4(false);
|
|
1033
|
+
const safeSrc = safeImageUrl3(src);
|
|
1034
|
+
if (!safeSrc || failed) return null;
|
|
1035
|
+
return /* @__PURE__ */ jsx4("img", { "data-sales-hero-image": true, src: safeSrc, alt: "", "aria-hidden": "true", onError: () => setFailed(true), style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.62 } });
|
|
1036
|
+
}
|
|
517
1037
|
function SalesTextField({ value, onChange }) {
|
|
518
|
-
return /* @__PURE__ */
|
|
1038
|
+
return /* @__PURE__ */ jsx4("input", { "aria-label": "Sales text", value: typeof value === "string" ? value : "", onChange: (event) => onChange(event.target.value) });
|
|
1039
|
+
}
|
|
1040
|
+
var editorSurfaceStyle = { boxSizing: "border-box", border: "1px solid #dfddd7", borderRadius: 10, padding: 24, background: "#ffffff", color: "#0a0a0a", fontFamily: "Arial, Helvetica, sans-serif" };
|
|
1041
|
+
var editorCardStyle = { boxSizing: "border-box", padding: 18, border: "1px solid #dfddd7", borderRadius: 7, background: "#f7f5f0" };
|
|
1042
|
+
function editorText(block, name, fallback) {
|
|
1043
|
+
return text5(block, name, fallback);
|
|
1044
|
+
}
|
|
1045
|
+
function SalesInlineText({ block, name, fallback, style }) {
|
|
1046
|
+
const value = editorText(block, name, fallback);
|
|
1047
|
+
if (!block.selected) return /* @__PURE__ */ jsx4("span", { "data-sales-editor-field": name, style, children: value });
|
|
1048
|
+
return /* @__PURE__ */ jsx4("input", { "aria-label": `Canvas ${name}`, "data-sales-editor-field": name, value, onMouseDown: (event) => event.stopPropagation(), onClick: (event) => event.stopPropagation(), onChange: (event) => block.onPropsChange({ [name]: event.currentTarget.value }), style: { boxSizing: "border-box", width: "100%", border: "1px dashed currentColor", borderRadius: 3, padding: "2px 5px", background: "transparent", color: "inherit", font: "inherit", fontWeight: "inherit", lineHeight: "inherit", textAlign: "inherit", ...style } });
|
|
1049
|
+
}
|
|
1050
|
+
function SalesEditorSurface({ block, children }) {
|
|
1051
|
+
return /* @__PURE__ */ jsx4("section", { "aria-label": "Sales editor preview", style: { ...editorSurfaceStyle, outline: block.selected ? "2px solid #2563eb" : void 0, outlineOffset: -2 }, children });
|
|
1052
|
+
}
|
|
1053
|
+
function SalesAnnouncementEditor(block) {
|
|
1054
|
+
return /* @__PURE__ */ jsx4("section", { "aria-label": "Sales announcement editor", style: { display: "grid", minHeight: 38, placeItems: "center", boxSizing: "border-box", padding: "10px 16px", borderBottom: "1px solid #dfddd7", background: "#f7f5f0", color: "#0a0a0a", fontFamily: "Arial, Helvetica, sans-serif", fontSize: 13, fontWeight: 700, textAlign: "center" }, children: /* @__PURE__ */ jsx4(SalesInlineText, { block, name: "message", fallback: "Free delivery on orders over $50" }) });
|
|
1055
|
+
}
|
|
1056
|
+
function SalesQueryEditor(block) {
|
|
1057
|
+
const imageUrl = safeImageUrl3(block.heroImageUrl);
|
|
1058
|
+
const trackingNumber = editorText(block, "defaultTrackingNumber", "BT-2048-DEMO");
|
|
1059
|
+
return /* @__PURE__ */ jsxs4("section", { "aria-label": "Sales Hero query editor", style: { position: "relative", display: "grid", minHeight: "clamp(460px, 52vw, 620px)", placeItems: "center", boxSizing: "border-box", overflow: "hidden", padding: "clamp(28px, 6vw, 72px) 16px", background: "#0a0a0a", fontFamily: "Arial, Helvetica, sans-serif" }, children: [
|
|
1060
|
+
imageUrl ? /* @__PURE__ */ jsx4("img", { src: imageUrl, alt: "", "aria-hidden": "true", style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.62 } }) : null,
|
|
1061
|
+
/* @__PURE__ */ jsx4("div", { "aria-hidden": "true", style: { position: "absolute", inset: 0, background: "rgb(0 0 0 / 42%)" } }),
|
|
1062
|
+
/* @__PURE__ */ jsxs4("div", { style: { position: "relative", zIndex: 1, boxSizing: "border-box", width: "min(560px, 100%)", padding: "clamp(28px, 5vw, 48px)", borderRadius: 10, background: "#ffffff", color: "#0a0a0a", boxShadow: "0 20px 56px rgb(0 0 0 / 28%)" }, children: [
|
|
1063
|
+
/* @__PURE__ */ jsx4("h1", { style: { margin: "0 0 28px", fontSize: "clamp(32px, 5vw, 48px)", fontWeight: 800, letterSpacing: "-0.035em", lineHeight: 1.02, textAlign: "center" }, children: /* @__PURE__ */ jsx4(SalesInlineText, { block, name: "heading", fallback: "Track your order" }) }),
|
|
1064
|
+
/* @__PURE__ */ jsx4("input", { "aria-label": "Canvas default tracking number", readOnly: !block.selected, value: trackingNumber, onMouseDown: (event) => block.selected && event.stopPropagation(), onClick: (event) => block.selected && event.stopPropagation(), onChange: (event) => block.onPropsChange({ defaultTrackingNumber: event.currentTarget.value }), style: { boxSizing: "border-box", width: "100%", minHeight: 58, padding: "12px 16px", border: "1px solid #dfddd7", borderRadius: 8, background: "#ffffff", color: "#0a0a0a", font: "inherit", fontSize: 17 } }),
|
|
1065
|
+
/* @__PURE__ */ jsx4("div", { style: { display: "grid", minHeight: 58, placeItems: "center", marginTop: 14, padding: "12px 18px", borderRadius: 8, background: "#0a0a0a", color: "#ffffff", fontSize: 16, fontWeight: 700 }, children: /* @__PURE__ */ jsx4(SalesInlineText, { block, name: "submitLabel", fallback: "Track order" }) }),
|
|
1066
|
+
/* @__PURE__ */ jsx4("small", { style: { display: "block", marginTop: 14, color: "#6b6b6b", fontSize: 11, textAlign: "right" }, children: "Powered by BestTrack" })
|
|
1067
|
+
] })
|
|
1068
|
+
] });
|
|
1069
|
+
}
|
|
1070
|
+
function SalesOrderItemsEditor(block) {
|
|
1071
|
+
return /* @__PURE__ */ jsxs4(SalesEditorSurface, { block, children: [
|
|
1072
|
+
/* @__PURE__ */ jsx4("h2", { style: { margin: "0 0 20px" }, children: /* @__PURE__ */ jsx4(SalesInlineText, { block, name: "heading", fallback: "Items in your order" }) }),
|
|
1073
|
+
/* @__PURE__ */ jsxs4("article", { style: { ...editorCardStyle, display: "flex", alignItems: "center", gap: 14 }, children: [
|
|
1074
|
+
/* @__PURE__ */ jsx4("span", { "aria-hidden": "true", style: { width: 68, height: 68, borderRadius: 7, background: "#dfddd7" } }),
|
|
1075
|
+
/* @__PURE__ */ jsxs4("span", { children: [
|
|
1076
|
+
/* @__PURE__ */ jsx4("strong", { children: "Order item" }),
|
|
1077
|
+
/* @__PURE__ */ jsx4("br", {}),
|
|
1078
|
+
/* @__PURE__ */ jsx4("small", { style: { color: "#6b6b6b" }, children: "Items appear after a successful tracking query." })
|
|
1079
|
+
] })
|
|
1080
|
+
] })
|
|
1081
|
+
] });
|
|
1082
|
+
}
|
|
1083
|
+
function SalesOtherTrackingEditor(block) {
|
|
1084
|
+
return /* @__PURE__ */ jsxs4(SalesEditorSurface, { block, children: [
|
|
1085
|
+
/* @__PURE__ */ jsx4("h2", { style: { margin: "0 0 20px" }, children: /* @__PURE__ */ jsx4(SalesInlineText, { block, name: "heading", fallback: "Other shipments" }) }),
|
|
1086
|
+
/* @__PURE__ */ jsx4("p", { style: { margin: 0, color: "#6b6b6b" }, children: /* @__PURE__ */ jsx4(SalesInlineText, { block, name: "emptyMessage", fallback: "No other shipments are linked to this order." }) })
|
|
1087
|
+
] });
|
|
1088
|
+
}
|
|
1089
|
+
function SalesServiceCardsEditor(block) {
|
|
1090
|
+
return /* @__PURE__ */ jsxs4(SalesEditorSurface, { block, children: [
|
|
1091
|
+
/* @__PURE__ */ jsx4("h2", { style: { margin: "0 0 20px" }, children: /* @__PURE__ */ jsx4(SalesInlineText, { block, name: "heading", fallback: "Shop with confidence" }) }),
|
|
1092
|
+
/* @__PURE__ */ jsxs4("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 180px), 1fr))", gap: 14 }, children: [
|
|
1093
|
+
/* @__PURE__ */ jsxs4("article", { style: editorCardStyle, children: [
|
|
1094
|
+
/* @__PURE__ */ jsx4("strong", { children: /* @__PURE__ */ jsx4(SalesInlineText, { block, name: "firstTitle", fallback: "Easy returns" }) }),
|
|
1095
|
+
/* @__PURE__ */ jsx4("p", { style: { marginBottom: 0, color: "#6b6b6b" }, children: /* @__PURE__ */ jsx4(SalesInlineText, { block, name: "firstDescription", fallback: "Simple support when plans change." }) })
|
|
1096
|
+
] }),
|
|
1097
|
+
/* @__PURE__ */ jsxs4("article", { style: editorCardStyle, children: [
|
|
1098
|
+
/* @__PURE__ */ jsx4("strong", { children: /* @__PURE__ */ jsx4(SalesInlineText, { block, name: "secondTitle", fallback: "Secure delivery" }) }),
|
|
1099
|
+
/* @__PURE__ */ jsx4("p", { style: { marginBottom: 0, color: "#6b6b6b" }, children: /* @__PURE__ */ jsx4(SalesInlineText, { block, name: "secondDescription", fallback: "Follow every milestone in one place." }) })
|
|
1100
|
+
] })
|
|
1101
|
+
] })
|
|
1102
|
+
] });
|
|
1103
|
+
}
|
|
1104
|
+
function SalesProductCategoriesEditor(block) {
|
|
1105
|
+
return /* @__PURE__ */ jsxs4(SalesEditorSurface, { block, children: [
|
|
1106
|
+
/* @__PURE__ */ jsx4("h2", { style: { margin: "0 0 20px" }, children: /* @__PURE__ */ jsx4(SalesInlineText, { block, name: "heading", fallback: "Shop by category" }) }),
|
|
1107
|
+
/* @__PURE__ */ jsxs4("div", { style: { ...editorCardStyle, display: "flex", justifyContent: "space-between", fontWeight: 700 }, children: [
|
|
1108
|
+
/* @__PURE__ */ jsx4(SalesInlineText, { block, name: "collectionLabel", fallback: "Featured collection" }),
|
|
1109
|
+
/* @__PURE__ */ jsx4("span", { "aria-hidden": "true", children: "\u2192" })
|
|
1110
|
+
] })
|
|
1111
|
+
] });
|
|
1112
|
+
}
|
|
1113
|
+
function SalesRecommendationsEditor(block) {
|
|
1114
|
+
return /* @__PURE__ */ jsxs4(SalesEditorSurface, { block, children: [
|
|
1115
|
+
/* @__PURE__ */ jsx4("h2", { style: { margin: "0 0 20px" }, children: /* @__PURE__ */ jsx4(SalesInlineText, { block, name: "heading", fallback: "Complete your order" }) }),
|
|
1116
|
+
/* @__PURE__ */ jsx4("div", { style: { ...editorCardStyle, color: "#6b6b6b" }, children: "Recommended products appear after a successful tracking query." })
|
|
1117
|
+
] });
|
|
519
1118
|
}
|
|
520
1119
|
function SalesAnnouncementBlock(props) {
|
|
521
|
-
return /* @__PURE__ */
|
|
1120
|
+
return /* @__PURE__ */ jsx4("section", { "aria-label": "Sales announcement", "data-sales-announcement": true, style: { display: "grid", minHeight: 38, placeItems: "center", boxSizing: "border-box", padding: "10px 16px", borderBottom: "1px solid var(--pb-color-border)", background: "var(--pb-color-background)", color: "var(--pb-color-text)", fontFamily: "var(--pb-font-family)", fontSize: 13, textAlign: "center" }, children: /* @__PURE__ */ jsx4("strong", { children: text5(props, "message", "Free delivery on orders over $50") }) });
|
|
522
1121
|
}
|
|
523
1122
|
function SalesQueryBlock(props) {
|
|
524
1123
|
const runtime = useSalesRuntime();
|
|
525
|
-
const
|
|
1124
|
+
const inputId = useId();
|
|
1125
|
+
const errorId = useId();
|
|
1126
|
+
const [trackingNumber, setTrackingNumber] = useState4(text5(props, "defaultTrackingNumber", "BT-2048-DEMO"));
|
|
1127
|
+
const [inputError, setInputError] = useState4(null);
|
|
526
1128
|
const submit = (event) => {
|
|
527
1129
|
event.preventDefault();
|
|
528
|
-
|
|
1130
|
+
const normalizedTrackingNumber = trackingNumber.trim();
|
|
1131
|
+
if (!trackingNumberPattern.test(normalizedTrackingNumber)) {
|
|
1132
|
+
setInputError("Enter a tracking number using 4\u201364 letters, numbers, or hyphens.");
|
|
1133
|
+
return;
|
|
1134
|
+
}
|
|
1135
|
+
setInputError(null);
|
|
1136
|
+
void runtime.query(normalizedTrackingNumber);
|
|
529
1137
|
};
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
/* @__PURE__ */
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
1138
|
+
const description = inputError ?? (runtime.phase === "empty" ? "We couldn\u2019t find an order for that number." : runtime.phase === "error" ? "We couldn\u2019t retrieve this order right now. Please try again later." : void 0);
|
|
1139
|
+
return /* @__PURE__ */ jsxs4("section", { "aria-label": "Sales tracking query", "aria-busy": runtime.phase === "loading" || void 0, "data-sales-hero": true, style: { position: "relative", display: "grid", minHeight: "clamp(460px, 52vw, 620px)", placeItems: "center", boxSizing: "border-box", overflow: "hidden", padding: "clamp(28px, 6vw, 72px) 16px", background: "var(--pb-color-text)", color: "var(--pb-color-surface)", fontFamily: "var(--pb-font-family)" }, children: [
|
|
1140
|
+
/* @__PURE__ */ jsx4(HeroAsset, { src: props.heroImageUrl }),
|
|
1141
|
+
/* @__PURE__ */ jsx4("div", { "aria-hidden": "true", style: { position: "absolute", inset: 0, background: "rgb(0 0 0 / 42%)" } }),
|
|
1142
|
+
/* @__PURE__ */ jsxs4("div", { "data-sales-query-card": true, style: { position: "relative", zIndex: 1, boxSizing: "border-box", width: "min(560px, 100%)", padding: "clamp(28px, 5vw, 48px)", borderRadius: "var(--pb-radius)", background: "var(--pb-color-surface)", color: "var(--pb-color-text)", boxShadow: "0 20px 56px rgb(0 0 0 / 28%)" }, children: [
|
|
1143
|
+
/* @__PURE__ */ jsx4("h1", { style: { margin: "0 0 28px", color: "var(--pb-color-text)", fontSize: "clamp(32px, 5vw, 48px)", fontWeight: 800, letterSpacing: "-0.035em", lineHeight: 1.02, textAlign: "center" }, children: text5(props, "heading", "Track an order") }),
|
|
1144
|
+
/* @__PURE__ */ jsxs4("form", { noValidate: true, onSubmit: submit, style: { display: "grid", gap: 14 }, children: [
|
|
1145
|
+
/* @__PURE__ */ jsx4("label", { htmlFor: inputId, style: { position: "absolute", width: 1, height: 1, padding: 0, margin: -1, overflow: "hidden", clip: "rect(0, 0, 0, 0)", whiteSpace: "nowrap", border: 0 }, children: "Tracking number" }),
|
|
1146
|
+
/* @__PURE__ */ jsx4("input", { id: inputId, "aria-describedby": description ? errorId : void 0, "aria-invalid": Boolean(inputError) || void 0, "aria-label": "Sales tracking number", value: trackingNumber, onChange: (event) => {
|
|
1147
|
+
setTrackingNumber(event.target.value);
|
|
1148
|
+
if (inputError) setInputError(null);
|
|
1149
|
+
}, inputMode: "text", autoComplete: "off", pattern: "[A-Za-z0-9-]{4,64}", minLength: 4, maxLength: 64, required: true, placeholder: "Enter your tracking number", style: { boxSizing: "border-box", width: "100%", minHeight: 58, padding: "12px 16px", border: "1px solid var(--pb-color-border)", borderRadius: "calc(var(--pb-radius) / 1.25)", background: "var(--pb-color-surface)", color: "var(--pb-color-text)", font: "inherit", fontSize: 17 } }),
|
|
1150
|
+
/* @__PURE__ */ jsx4("button", { type: "submit", disabled: runtime.phase === "loading", style: { width: "100%", minHeight: 58, padding: "12px 18px", border: 0, borderRadius: "calc(var(--pb-radius) / 1.25)", background: "var(--pb-color-text)", color: "var(--pb-color-surface)", font: "inherit", fontSize: 16, fontWeight: 700, cursor: runtime.phase === "loading" ? "wait" : "pointer" }, children: runtime.phase === "loading" ? "Checking\u2026" : text5(props, "submitLabel", "Track order") })
|
|
1151
|
+
] }),
|
|
1152
|
+
runtime.phase === "loading" ? /* @__PURE__ */ jsx4(Status, { children: "Checking your order\u2026" }) : null,
|
|
1153
|
+
inputError ? /* @__PURE__ */ jsx4("p", { id: errorId, role: "alert", children: inputError }) : null,
|
|
1154
|
+
!inputError && runtime.phase === "empty" ? /* @__PURE__ */ jsx4("p", { id: errorId, role: "status", children: "We couldn\u2019t find an order for that number." }) : null,
|
|
1155
|
+
!inputError && runtime.phase === "error" ? /* @__PURE__ */ jsx4("p", { id: errorId, role: "alert", children: "We couldn\u2019t retrieve this order right now. Please try again later." }) : null,
|
|
1156
|
+
/* @__PURE__ */ jsx4("small", { style: { display: "block", marginTop: 14, color: "var(--pb-color-muted)", fontSize: 11, textAlign: "right" }, children: "Powered by BestTrack" })
|
|
1157
|
+
] })
|
|
540
1158
|
] });
|
|
541
1159
|
}
|
|
542
1160
|
function SalesOrderItemsBlock(props) {
|
|
543
1161
|
const runtime = useSalesRuntime();
|
|
544
|
-
const title =
|
|
1162
|
+
const title = text5(props, "heading", "Items in your order");
|
|
545
1163
|
const items = runtime.result?.orderItems ?? [];
|
|
546
|
-
return /* @__PURE__ */
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
1164
|
+
return /* @__PURE__ */ jsx4(Section, { title, busy: runtime.phase === "loading", children: runtime.phase === "error" ? /* @__PURE__ */ jsx4(Status, { alert: true, children: "Order items are temporarily unavailable." }) : runtime.phase === "empty" ? /* @__PURE__ */ jsx4(Status, { children: "No order items are available for that number." }) : runtime.phase === "success" && items.length ? /* @__PURE__ */ jsx4("ul", { style: { display: "grid", gap: 12, margin: 0, padding: 0, listStyle: "none" }, children: items.map((item) => {
|
|
1165
|
+
const href = safeHref3(item.href);
|
|
1166
|
+
const itemTitle = text5(item, "title", "Order item");
|
|
1167
|
+
const itemContent = href ? /* @__PURE__ */ jsx4("a", { href, style: { color: "inherit" }, children: itemTitle }) : itemTitle;
|
|
1168
|
+
return /* @__PURE__ */ jsxs4("li", { style: { display: "flex", alignItems: "center", gap: 16, minWidth: 0, padding: 14, border: "1px solid var(--pb-color-border)", borderRadius: "calc(var(--pb-radius) / 1.5)", background: "var(--pb-color-background)" }, children: [
|
|
1169
|
+
/* @__PURE__ */ jsx4(ProductImage3, { src: item.imageUrl, alt: itemTitle }),
|
|
1170
|
+
/* @__PURE__ */ jsxs4("span", { style: { minWidth: 0 }, children: [
|
|
1171
|
+
/* @__PURE__ */ jsx4("strong", { children: itemContent }),
|
|
1172
|
+
/* @__PURE__ */ jsx4("br", {}),
|
|
1173
|
+
/* @__PURE__ */ jsxs4("small", { style: { color: "var(--pb-color-muted)" }, children: [
|
|
1174
|
+
"Qty ",
|
|
1175
|
+
Number.isFinite(item.quantity) && item.quantity > 0 ? item.quantity : 1
|
|
1176
|
+
] }),
|
|
1177
|
+
item.description ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
|
|
1178
|
+
/* @__PURE__ */ jsx4("br", {}),
|
|
1179
|
+
/* @__PURE__ */ jsx4("small", { style: { color: "var(--pb-color-muted)" }, children: item.description })
|
|
1180
|
+
] }) : null
|
|
1181
|
+
] })
|
|
1182
|
+
] }, item.id);
|
|
1183
|
+
}) }) : /* @__PURE__ */ jsx4(Status, { children: runtime.phase === "loading" ? "Loading order items\u2026" : "Order items appear after a successful query." }) });
|
|
551
1184
|
}
|
|
552
1185
|
function SalesOtherTrackingBlock(props) {
|
|
553
1186
|
const runtime = useSalesRuntime();
|
|
554
|
-
const title =
|
|
555
|
-
|
|
1187
|
+
const title = text5(props, "heading", "Other shipments");
|
|
1188
|
+
const shipments = (runtime.result?.shipments ?? []).filter((shipment) => shipment.trackingNumber !== runtime.result?.trackingNumber);
|
|
1189
|
+
return /* @__PURE__ */ jsx4(Section, { title, busy: runtime.phase === "loading", children: runtime.phase === "error" ? /* @__PURE__ */ jsx4(Status, { alert: true, children: "Additional shipments are unavailable." }) : runtime.phase === "empty" ? /* @__PURE__ */ jsx4(Status, { children: "No additional shipments are available for that number." }) : runtime.phase === "success" && shipments.length ? /* @__PURE__ */ jsx4("ul", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 220px), 1fr))", gap: 12, margin: 0, padding: 0, listStyle: "none" }, children: shipments.map((shipment) => /* @__PURE__ */ jsxs4("li", { style: { padding: 16, border: "1px solid var(--pb-color-border)", borderRadius: "calc(var(--pb-radius) / 1.5)", background: "var(--pb-color-background)" }, children: [
|
|
1190
|
+
/* @__PURE__ */ jsx4("strong", { children: text5(shipment, "label", "Shipment") }),
|
|
1191
|
+
shipment.status ? /* @__PURE__ */ jsx4("p", { style: { margin: "8px 0 0", color: "var(--pb-color-muted)" }, children: shipment.status }) : null,
|
|
1192
|
+
shipment.trackingNumber ? /* @__PURE__ */ jsx4("small", { style: { display: "block", marginTop: 8, color: "var(--pb-color-muted)" }, children: shipment.trackingNumber }) : null
|
|
1193
|
+
] }, shipment.id)) }) : runtime.phase === "success" ? /* @__PURE__ */ jsx4(Status, { children: text5(props, "emptyMessage", "No other shipments are linked to this order.") }) : /* @__PURE__ */ jsx4(Status, { children: runtime.phase === "loading" ? "Loading other shipments\u2026" : "Other tracking numbers appear with your order result." }) });
|
|
556
1194
|
}
|
|
557
1195
|
function SalesServiceCardsBlock(props) {
|
|
558
|
-
const title =
|
|
559
|
-
return /* @__PURE__ */
|
|
560
|
-
/* @__PURE__ */
|
|
561
|
-
/* @__PURE__ */
|
|
562
|
-
/* @__PURE__ */
|
|
1196
|
+
const title = text5(props, "heading", "Shop with confidence");
|
|
1197
|
+
return /* @__PURE__ */ jsx4(Section, { title, children: /* @__PURE__ */ jsxs4("div", { style: gridStyle, children: [
|
|
1198
|
+
/* @__PURE__ */ jsxs4("article", { style: { padding: 20, border: "1px solid var(--pb-color-border)", borderRadius: "calc(var(--pb-radius) / 1.5)", background: "var(--pb-color-background)" }, children: [
|
|
1199
|
+
/* @__PURE__ */ jsx4("strong", { children: text5(props, "firstTitle", "Easy returns") }),
|
|
1200
|
+
/* @__PURE__ */ jsx4("p", { style: { marginBottom: 0, color: "var(--pb-color-muted)" }, children: text5(props, "firstDescription", "Simple support when plans change.") })
|
|
563
1201
|
] }),
|
|
564
|
-
/* @__PURE__ */
|
|
565
|
-
/* @__PURE__ */
|
|
566
|
-
/* @__PURE__ */
|
|
1202
|
+
/* @__PURE__ */ jsxs4("article", { style: { padding: 20, border: "1px solid var(--pb-color-border)", borderRadius: "calc(var(--pb-radius) / 1.5)", background: "var(--pb-color-background)" }, children: [
|
|
1203
|
+
/* @__PURE__ */ jsx4("strong", { children: text5(props, "secondTitle", "Secure delivery") }),
|
|
1204
|
+
/* @__PURE__ */ jsx4("p", { style: { marginBottom: 0, color: "var(--pb-color-muted)" }, children: text5(props, "secondDescription", "Follow every milestone in one place.") })
|
|
567
1205
|
] })
|
|
568
1206
|
] }) });
|
|
569
1207
|
}
|
|
570
1208
|
function SalesProductCategoriesBlock(props) {
|
|
571
|
-
const title =
|
|
572
|
-
const
|
|
573
|
-
const
|
|
574
|
-
return /* @__PURE__ */
|
|
575
|
-
/* @__PURE__ */
|
|
576
|
-
/* @__PURE__ */
|
|
577
|
-
|
|
578
|
-
collectionId
|
|
579
|
-
] })
|
|
580
|
-
] }) });
|
|
1209
|
+
const title = text5(props, "heading", "Shop by category");
|
|
1210
|
+
const state = resourceState(props.collectionId);
|
|
1211
|
+
const href = safeHref3(props.collectionHref);
|
|
1212
|
+
return /* @__PURE__ */ jsx4(Section, { title, children: state === "invalid" ? /* @__PURE__ */ jsx4(Status, { alert: true, children: "Collection reference is invalid." }) : state === "empty" ? /* @__PURE__ */ jsx4(Status, { children: "No collection selected. Choose a collection through an authorized resource integration." }) : href ? /* @__PURE__ */ jsxs4("a", { href, style: { display: "flex", alignItems: "center", justifyContent: "space-between", minHeight: 74, boxSizing: "border-box", padding: "14px 18px", border: "1px solid var(--pb-color-border)", borderRadius: "calc(var(--pb-radius) / 1.5)", background: "var(--pb-color-background)", color: "var(--pb-color-text)", fontWeight: 700, textDecoration: "none" }, children: [
|
|
1213
|
+
/* @__PURE__ */ jsx4("span", { children: text5(props, "collectionLabel", "Featured collection") }),
|
|
1214
|
+
/* @__PURE__ */ jsx4("span", { "aria-hidden": "true", children: "\u2192" })
|
|
1215
|
+
] }) : /* @__PURE__ */ jsx4(Status, { alert: true, children: "Collection link is unavailable." }) });
|
|
581
1216
|
}
|
|
582
1217
|
function SalesRecommendationsBlock(props) {
|
|
583
1218
|
const runtime = useSalesRuntime();
|
|
584
|
-
const title =
|
|
1219
|
+
const title = text5(props, "heading", "Complete your order");
|
|
585
1220
|
const recommendations = runtime.result?.recommendations ?? [];
|
|
586
|
-
return /* @__PURE__ */
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
1221
|
+
return /* @__PURE__ */ jsx4(Section, { title, busy: runtime.phase === "loading", children: runtime.phase === "error" ? /* @__PURE__ */ jsx4(Status, { alert: true, children: "Recommendations are temporarily unavailable." }) : runtime.phase === "empty" ? /* @__PURE__ */ jsx4(Status, { children: "No recommendations are available for that number." }) : runtime.phase === "success" && recommendations.length ? /* @__PURE__ */ jsx4("div", { style: gridStyle, children: recommendations.map((item) => {
|
|
1222
|
+
const href = safeHref3(item.href);
|
|
1223
|
+
const itemTitle = text5(item, "title", "Recommended product");
|
|
1224
|
+
return /* @__PURE__ */ jsxs4("article", { style: { display: "grid", gap: 14, minWidth: 0, padding: 18, border: "1px solid var(--pb-color-border)", borderRadius: "calc(var(--pb-radius) / 1.5)", background: "var(--pb-color-background)" }, children: [
|
|
1225
|
+
/* @__PURE__ */ jsx4(ProductImage3, { src: item.imageUrl, alt: itemTitle }),
|
|
1226
|
+
/* @__PURE__ */ jsxs4("div", { children: [
|
|
1227
|
+
/* @__PURE__ */ jsx4("strong", { children: href ? /* @__PURE__ */ jsx4("a", { href, style: { color: "inherit" }, children: itemTitle }) : itemTitle }),
|
|
1228
|
+
item.price ? /* @__PURE__ */ jsx4("small", { style: { display: "block", marginTop: 5, color: "var(--pb-color-muted)" }, children: item.price }) : null,
|
|
1229
|
+
item.description ? /* @__PURE__ */ jsx4("p", { style: { marginBottom: 0, color: "var(--pb-color-muted)" }, children: item.description }) : null
|
|
1230
|
+
] })
|
|
1231
|
+
] }, item.id);
|
|
1232
|
+
}) }) : /* @__PURE__ */ jsx4(Status, { children: runtime.phase === "success" ? "No recommendations are available for this order." : runtime.phase === "loading" ? "Loading recommendations\u2026" : "Recommended products appear with your order result." }) });
|
|
590
1233
|
}
|
|
591
1234
|
|
|
592
1235
|
// src/sales-definition.ts
|
|
593
|
-
var
|
|
1236
|
+
var trackingNumberPattern2 = /^[A-Za-z0-9-]{4,64}$/;
|
|
1237
|
+
var text6 = (label, options = {}) => ({ field: "besttrack.sales.text", label, control: "text", required: true, ...options });
|
|
1238
|
+
var shortText = (label, description) => text6(label, { description, group: "Content" });
|
|
1239
|
+
var longText = (label, description) => text6(label, { control: "textarea", description, group: "Content" });
|
|
1240
|
+
var link = (label, description) => text6(label, { control: "url", description: description ?? "Use a site-relative path or HTTPS URL.", group: "Links" });
|
|
1241
|
+
function safeLink(value) {
|
|
1242
|
+
if (typeof value !== "string") return false;
|
|
1243
|
+
if (value.startsWith("/") && !value.startsWith("//") && !value.startsWith("/\\") && !value.includes("\\") && !hasControlCharacter2(value)) return true;
|
|
1244
|
+
try {
|
|
1245
|
+
return new URL(value).protocol === "https:";
|
|
1246
|
+
} catch {
|
|
1247
|
+
return false;
|
|
1248
|
+
}
|
|
1249
|
+
}
|
|
1250
|
+
function hasControlCharacter2(value) {
|
|
1251
|
+
return [...value].some((character) => character.charCodeAt(0) < 32);
|
|
1252
|
+
}
|
|
1253
|
+
function requiredString(props, key, issues, maxLength = 160) {
|
|
1254
|
+
const value = props[key];
|
|
1255
|
+
if (typeof value !== "string" || !value.trim()) issues.push({ path: `props.${key}`, message: "A non-empty value is required." });
|
|
1256
|
+
else if (value.length > maxLength) issues.push({ path: `props.${key}`, message: `Must be at most ${maxLength} characters.` });
|
|
1257
|
+
}
|
|
1258
|
+
function textProps(keys) {
|
|
1259
|
+
return (props) => {
|
|
1260
|
+
const issues = [];
|
|
1261
|
+
keys.forEach(([key, maxLength]) => requiredString(props, key, issues, maxLength));
|
|
1262
|
+
return issues;
|
|
1263
|
+
};
|
|
1264
|
+
}
|
|
1265
|
+
function validateQuery(props) {
|
|
1266
|
+
const issues = textProps([["heading", 120], ["submitLabel", 80]])(props);
|
|
1267
|
+
const trackingNumber = props.defaultTrackingNumber;
|
|
1268
|
+
if (typeof trackingNumber !== "string" || !trackingNumberPattern2.test(trackingNumber)) issues.push({ path: "props.defaultTrackingNumber", message: "Use 4\u201364 letters, numbers, or hyphens. Use a non-sensitive preview placeholder only." });
|
|
1269
|
+
if (props.heroImageUrl !== void 0 && !safeImage(props.heroImageUrl)) issues.push({ path: "props.heroImageUrl", message: "Use an HTTPS URL for the merchant-configured hero image." });
|
|
1270
|
+
return issues;
|
|
1271
|
+
}
|
|
1272
|
+
function safeImage(value) {
|
|
1273
|
+
if (typeof value !== "string") return false;
|
|
1274
|
+
try {
|
|
1275
|
+
return new URL(value).protocol === "https:";
|
|
1276
|
+
} catch {
|
|
1277
|
+
return false;
|
|
1278
|
+
}
|
|
1279
|
+
}
|
|
1280
|
+
function validateCategories(props) {
|
|
1281
|
+
const issues = textProps([["heading", 120], ["collectionId", 256], ["collectionLabel", 120]])(props);
|
|
1282
|
+
if (!safeLink(props.collectionHref)) issues.push({ path: "props.collectionHref", message: "Use a site-relative path or HTTPS URL." });
|
|
1283
|
+
return issues;
|
|
1284
|
+
}
|
|
594
1285
|
var salesBlocks = [
|
|
595
|
-
{ type: "besttrack.sales.announcement", version: 1, label: "Announcement", category: "BestTrack Sales", targets: ["web"], defaultProps: { message: "Free delivery on orders over $50" }, defaultVariant: "
|
|
596
|
-
{ type: "besttrack.sales.query", version: 1, label: "Order query", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Track
|
|
597
|
-
{ type: "besttrack.sales.order-items", version: 1, label: "Order items", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Items in your order" }, defaultVariant: "
|
|
598
|
-
{ type: "besttrack.sales.other-tracking", version: 1, label: "Other tracking", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Other shipments", emptyMessage: "No other shipments are linked to this order." }, defaultVariant: "
|
|
599
|
-
{ type: "besttrack.sales.service-cards", version: 1, label: "Service cards", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Shop with confidence", firstTitle: "Easy returns", firstDescription: "Simple support when plans change.", secondTitle: "Secure delivery", secondDescription: "Follow every milestone in one place." }, defaultVariant: "
|
|
600
|
-
{ type: "besttrack.sales.product-categories", version: 1, label: "Product categories", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Shop by category", collectionId: "gid://shopify/Collection/featured", collectionLabel: "Featured collection", collectionHref: "/collections/featured" }, defaultVariant: "
|
|
601
|
-
{ type: "besttrack.sales.recommendations", version: 1, label: "Recommended products", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Complete your order" }, defaultVariant: "
|
|
1286
|
+
{ type: "besttrack.sales.announcement", version: 1, label: "Announcement", category: "BestTrack Sales", targets: ["web"], defaultProps: { message: "Free delivery on orders over $50" }, defaultVariant: "hero", variants: [{ id: "hero", label: "Sales Hero" }, { id: "commerce", label: "Commerce" }, { id: "minimal", label: "Minimal", theme: { "color.primary": "#202223" } }], fields: { message: longText("Announcement", "Short, customer-facing promotion copy.") }, validate: textProps([["message", 280]]), render: { web: SalesAnnouncementBlock, editor: SalesAnnouncementEditor } },
|
|
1287
|
+
{ type: "besttrack.sales.query", version: 1, label: "Order query", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Track your order", submitLabel: "Track order", defaultTrackingNumber: "BT-2048-DEMO", heroImageUrl: "https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&w=1800&q=85" }, defaultVariant: "hero", variants: [{ id: "hero", label: "Sales Hero" }, { id: "commerce", label: "Commerce" }, { id: "compact", label: "Compact", theme: { spacing: "12px" } }], fields: { heading: shortText("Heading"), submitLabel: shortText("Button label"), defaultTrackingNumber: text6("Default tracking number", { group: "Tracking settings", description: "Preview-only placeholder; never save a customer's tracking number." }), heroImageUrl: text6("Hero image URL", { control: "url", group: "Hero asset", description: "Merchant-configured HTTPS image. It is rendered as an image element, never as CSS." }) }, validate: validateQuery, render: { web: SalesQueryBlock, editor: SalesQueryEditor } },
|
|
1288
|
+
{ type: "besttrack.sales.order-items", version: 1, label: "Order items", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Items in your order" }, defaultVariant: "hero", variants: [{ id: "hero", label: "Sales Hero" }, { id: "commerce", label: "Commerce" }], fields: { heading: shortText("Heading") }, validate: textProps([["heading", 120]]), render: { web: SalesOrderItemsBlock, editor: SalesOrderItemsEditor } },
|
|
1289
|
+
{ type: "besttrack.sales.other-tracking", version: 1, label: "Other tracking", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Other shipments", emptyMessage: "No other shipments are linked to this order." }, defaultVariant: "hero", variants: [{ id: "hero", label: "Sales Hero" }, { id: "commerce", label: "Commerce" }], fields: { heading: shortText("Heading"), emptyMessage: longText("Empty message") }, validate: textProps([["heading", 120], ["emptyMessage", 280]]), render: { web: SalesOtherTrackingBlock, editor: SalesOtherTrackingEditor } },
|
|
1290
|
+
{ type: "besttrack.sales.service-cards", version: 1, label: "Service cards", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Shop with confidence", firstTitle: "Easy returns", firstDescription: "Simple support when plans change.", secondTitle: "Secure delivery", secondDescription: "Follow every milestone in one place." }, defaultVariant: "hero", variants: [{ id: "hero", label: "Sales Hero" }, { id: "commerce", label: "Commerce" }], fields: { heading: shortText("Heading"), firstTitle: shortText("First card title"), firstDescription: longText("First card description"), secondTitle: shortText("Second card title"), secondDescription: longText("Second card description") }, validate: textProps([["heading", 120], ["firstTitle", 120], ["firstDescription", 280], ["secondTitle", 120], ["secondDescription", 280]]), render: { web: SalesServiceCardsBlock, editor: SalesServiceCardsEditor } },
|
|
1291
|
+
{ type: "besttrack.sales.product-categories", version: 1, label: "Product categories", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Shop by category", collectionId: "gid://shopify/Collection/featured", collectionLabel: "Featured collection", collectionHref: "/collections/featured" }, defaultVariant: "hero", variants: [{ id: "hero", label: "Sales Hero" }, { id: "commerce", label: "Commerce" }, { id: "grid", label: "Grid", theme: { "color.surface": "#f8fafc" } }], fields: { heading: shortText("Heading"), collectionId: text6("Collection ID", { group: "Resource", description: "JSON-only reference selected by an authorized integration." }), collectionLabel: shortText("Collection label"), collectionHref: link("Collection URL") }, validate: validateCategories, render: { web: SalesProductCategoriesBlock, editor: SalesProductCategoriesEditor } },
|
|
1292
|
+
{ type: "besttrack.sales.recommendations", version: 1, label: "Recommended products", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Complete your order" }, defaultVariant: "hero", variants: [{ id: "hero", label: "Sales Hero" }, { id: "commerce", label: "Commerce" }, { id: "grid", label: "Product grid", theme: { "color.surface": "#f8fafc" } }], fields: { heading: shortText("Heading") }, validate: textProps([["heading", 120]]), render: { web: SalesRecommendationsBlock, editor: SalesRecommendationsEditor } }
|
|
602
1293
|
];
|
|
603
1294
|
function createSalesTemplate() {
|
|
604
|
-
return { id: "besttrack.sales", version: 1, name: "Sales", target: "web", source: "built-in", requiredBlocks: salesBlocks.map((block) => block.type), theme: { "color.primary": "#
|
|
1295
|
+
return { id: "besttrack.sales", version: 1, name: "Sales", target: "web", source: "built-in", requiredBlocks: salesBlocks.map((block) => block.type), theme: { "color.primary": "#000000", "color.background": "#f7f5f0", "color.surface": "#ffffff", "color.text": "#0a0a0a", "color.muted": "#6b6b6b", "color.border": "#dfddd7", "font.family": "Arial, Helvetica, sans-serif", radius: "10px", spacing: "24px" }, create: () => createPageDocument3({ pageId: "besttrack-sales", target: "web", templateId: "besttrack.sales", templateVersion: 1, settings: { locale: "en", seoTitle: "Shop and track your order" }, blocks: salesBlocks.map((block, index) => ({ id: "sales-" + (index + 1), type: block.type, version: block.version, props: block.defaultProps, variant: block.defaultVariant, style: {} })) }) };
|
|
605
1296
|
}
|
|
606
1297
|
var bestTrackSalesExtension = Object.freeze({ name: "besttrack.sales", version: "0.7.2", fields: [{ type: "besttrack.sales.text", component: SalesTextField }], blocks: salesBlocks, templates: [createSalesTemplate()] });
|
|
607
1298
|
export {
|
|
@@ -613,5 +1304,6 @@ export {
|
|
|
613
1304
|
bestTrackSalesExtension,
|
|
614
1305
|
createBrandedTemplate,
|
|
615
1306
|
createReadyToGoTemplate,
|
|
616
|
-
createSalesTemplate
|
|
1307
|
+
createSalesTemplate,
|
|
1308
|
+
isEmptyTrackingPageResult
|
|
617
1309
|
};
|