@standhigher/besttrack-page-extension 0.2.0 → 0.2.1
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 +6 -1
- package/dist/index.d.ts +5 -0
- package/dist/index.js +723 -255
- 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,382 @@ 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(_block) {
|
|
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
|
-
import { jsx as
|
|
580
|
+
import { createContext as createContext2, useCallback as useCallback2, useContext as useContext2, useMemo as useMemo2, useState as useState3 } from "react";
|
|
581
|
+
import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
114
582
|
var initialRuntime2 = {
|
|
115
583
|
phase: "idle",
|
|
116
584
|
selectedShipmentId: null,
|
|
@@ -125,11 +593,11 @@ var initialRuntime2 = {
|
|
|
125
593
|
}
|
|
126
594
|
};
|
|
127
595
|
var BrandedRuntimeContext = createContext2(initialRuntime2);
|
|
128
|
-
var
|
|
129
|
-
var
|
|
596
|
+
var contentWidth2 = { width: "min(1200px, 100%)", margin: "0 auto", padding: "0 clamp(16px, 4vw, 48px)", boxSizing: "border-box" };
|
|
597
|
+
var cardStyle = { background: "#fff", color: "#0a0a0a", border: "1px solid #e7e7e7", borderRadius: 10, fontFamily: "var(--pb-font-family)" };
|
|
130
598
|
function BrandedRuntimeProvider({ children, queryTracking }) {
|
|
131
|
-
const [state, setState] =
|
|
132
|
-
const [selectedShipmentId, setSelectedShipmentId] =
|
|
599
|
+
const [state, setState] = useState3({ phase: "idle" });
|
|
600
|
+
const [selectedShipmentId, setSelectedShipmentId] = useState3(null);
|
|
133
601
|
const query = useCallback2(async (trackingNumber) => {
|
|
134
602
|
setState({ phase: "loading" });
|
|
135
603
|
try {
|
|
@@ -154,15 +622,15 @@ function BrandedRuntimeProvider({ children, queryTracking }) {
|
|
|
154
622
|
() => ({ ...state, displayedResult, selectedShipmentId, query, reset, selectShipment }),
|
|
155
623
|
[displayedResult, query, reset, selectedShipmentId, selectShipment, state]
|
|
156
624
|
);
|
|
157
|
-
return /* @__PURE__ */
|
|
625
|
+
return /* @__PURE__ */ jsx3(BrandedRuntimeContext.Provider, { value, children });
|
|
158
626
|
}
|
|
159
627
|
function useBrandedRuntime() {
|
|
160
628
|
return useContext2(BrandedRuntimeContext);
|
|
161
629
|
}
|
|
162
|
-
function
|
|
630
|
+
function text3(props, key, fallback) {
|
|
163
631
|
return typeof props[key] === "string" ? props[key] : fallback;
|
|
164
632
|
}
|
|
165
|
-
function
|
|
633
|
+
function safeHref2(value) {
|
|
166
634
|
if (typeof value !== "string") return "#";
|
|
167
635
|
if (value.startsWith("/")) return value;
|
|
168
636
|
try {
|
|
@@ -172,7 +640,7 @@ function safeHref(value) {
|
|
|
172
640
|
return "#";
|
|
173
641
|
}
|
|
174
642
|
}
|
|
175
|
-
function
|
|
643
|
+
function safeImageUrl2(value) {
|
|
176
644
|
if (typeof value !== "string") return "";
|
|
177
645
|
try {
|
|
178
646
|
const url = new URL(value);
|
|
@@ -184,85 +652,85 @@ function safeImageUrl(value) {
|
|
|
184
652
|
function shipmentLabels(value) {
|
|
185
653
|
return typeof value === "string" ? value.split("|").map((label, index) => ({ id: "configured-" + index, label: label.trim() })).filter((item) => item.label) : [];
|
|
186
654
|
}
|
|
187
|
-
function
|
|
188
|
-
const [failed, setFailed] =
|
|
189
|
-
const safeSrc =
|
|
655
|
+
function ProductImage2({ src, alt }) {
|
|
656
|
+
const [failed, setFailed] = useState3(false);
|
|
657
|
+
const safeSrc = safeImageUrl2(src);
|
|
190
658
|
if (!safeSrc || failed) {
|
|
191
|
-
return /* @__PURE__ */
|
|
659
|
+
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
660
|
}
|
|
193
|
-
return /* @__PURE__ */
|
|
661
|
+
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
662
|
}
|
|
195
663
|
function ShipmentSwitcher({ shipmentLabels: configuredLabels }) {
|
|
196
664
|
const runtime = useBrandedRuntime();
|
|
197
665
|
const configuredShipments = shipmentLabels(configuredLabels);
|
|
198
666
|
const shipments = runtime.result?.shipments?.length ? runtime.result.shipments : configuredShipments;
|
|
199
667
|
if (!shipments.length) return null;
|
|
200
|
-
return /* @__PURE__ */
|
|
668
|
+
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
669
|
const selected = (runtime.selectedShipmentId ?? shipments[0]?.id) === shipment.id;
|
|
202
|
-
return /* @__PURE__ */
|
|
670
|
+
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
671
|
}) });
|
|
204
672
|
}
|
|
205
673
|
function QueryHero(props) {
|
|
206
674
|
const runtime = useBrandedRuntime();
|
|
207
|
-
const [trackingNumber, setTrackingNumber] =
|
|
208
|
-
const [mode, setMode] =
|
|
209
|
-
const [heroImageFailed, setHeroImageFailed] =
|
|
675
|
+
const [trackingNumber, setTrackingNumber] = useState3(text3(props, "defaultTrackingNumber", "DEMO-YQTRACK9999"));
|
|
676
|
+
const [mode, setMode] = useState3(text3(props, "defaultQueryMode", "tracking") === "order" ? "order" : "tracking");
|
|
677
|
+
const [heroImageFailed, setHeroImageFailed] = useState3(false);
|
|
210
678
|
const submit = (event) => {
|
|
211
679
|
event.preventDefault();
|
|
212
680
|
void runtime.query(trackingNumber);
|
|
213
681
|
};
|
|
214
|
-
return /* @__PURE__ */
|
|
215
|
-
!heroImageFailed &&
|
|
216
|
-
/* @__PURE__ */
|
|
217
|
-
/* @__PURE__ */
|
|
218
|
-
/* @__PURE__ */
|
|
219
|
-
/* @__PURE__ */
|
|
220
|
-
/* @__PURE__ */
|
|
221
|
-
/* @__PURE__ */
|
|
682
|
+
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: [
|
|
683
|
+
!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,
|
|
684
|
+
/* @__PURE__ */ jsx3("div", { "aria-hidden": "true", style: { position: "absolute", inset: 0, background: "rgba(255,255,255,0.12)" } }),
|
|
685
|
+
/* @__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: [
|
|
686
|
+
/* @__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") }),
|
|
687
|
+
/* @__PURE__ */ jsxs3("div", { role: "tablist", "aria-label": "Tracking method", style: { display: "grid", gridTemplateColumns: "1fr 1fr", borderBottom: "1px solid #e7e7e7", marginBottom: 24 }, children: [
|
|
688
|
+
/* @__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" }),
|
|
689
|
+
/* @__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
690
|
] }),
|
|
223
|
-
/* @__PURE__ */
|
|
224
|
-
/* @__PURE__ */
|
|
225
|
-
/* @__PURE__ */
|
|
226
|
-
/* @__PURE__ */
|
|
691
|
+
/* @__PURE__ */ jsxs3("form", { onSubmit: submit, children: [
|
|
692
|
+
/* @__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" }),
|
|
693
|
+
/* @__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" } }),
|
|
694
|
+
/* @__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
695
|
] }),
|
|
228
|
-
runtime.phase === "error" ? /* @__PURE__ */
|
|
229
|
-
/* @__PURE__ */
|
|
696
|
+
runtime.phase === "error" ? /* @__PURE__ */ jsx3("p", { role: "alert", style: { marginBottom: 0, color: "#b42318" }, children: runtime.error }) : null,
|
|
697
|
+
/* @__PURE__ */ jsx3("small", { style: { display: "block", marginTop: 10, color: "#8a8a8a", fontSize: 8, textAlign: "right" }, children: "Powered by BestTrack" })
|
|
230
698
|
] })
|
|
231
699
|
] });
|
|
232
700
|
}
|
|
233
|
-
function
|
|
701
|
+
function defaultProgress2(status) {
|
|
234
702
|
const steps = ["Ordered", "Order Ready", "In Transit", "Out for Delivery", "Delivered"];
|
|
235
703
|
const normalized = status.toLowerCase();
|
|
236
704
|
const current = normalized.includes("deliver") ? normalized.includes("out for") ? 3 : 4 : normalized.includes("transit") ? 2 : normalized.includes("ready") ? 1 : 0;
|
|
237
705
|
return steps.map((label, index) => ({ id: label.toLowerCase().replaceAll(" ", "-"), label, state: index < current ? "complete" : index === current ? "current" : "upcoming" }));
|
|
238
706
|
}
|
|
239
|
-
function
|
|
240
|
-
return /* @__PURE__ */
|
|
241
|
-
index > 0 ? /* @__PURE__ */
|
|
242
|
-
/* @__PURE__ */
|
|
243
|
-
/* @__PURE__ */
|
|
707
|
+
function TrackingProgress2({ steps }) {
|
|
708
|
+
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: [
|
|
709
|
+
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,
|
|
710
|
+
/* @__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 }),
|
|
711
|
+
/* @__PURE__ */ jsx3("strong", { style: { fontSize: 14 }, children: step.label })
|
|
244
712
|
] }, step.id)) }) });
|
|
245
713
|
}
|
|
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__ */
|
|
714
|
+
function ShippingTimeline2({ events }) {
|
|
715
|
+
if (!events.length) return /* @__PURE__ */ jsx3("p", { style: { margin: 0, color: "#6b6b6b" }, children: "Shipping events will appear when the carrier publishes them." });
|
|
716
|
+
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: [
|
|
717
|
+
/* @__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" } }),
|
|
718
|
+
index < events.length - 1 ? /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", style: { position: "absolute", left: 6, top: 18, bottom: -26, width: 2, background: "#e0e7f0" } }) : null,
|
|
719
|
+
/* @__PURE__ */ jsxs3("div", { children: [
|
|
720
|
+
/* @__PURE__ */ jsx3("strong", { style: { color: index === 0 ? "#cb4d34" : "#51657f" }, children: event.title }),
|
|
721
|
+
event.detail ? /* @__PURE__ */ jsx3("p", { style: { margin: "4px 0", color: "#6b6b6b" }, children: event.detail }) : null,
|
|
722
|
+
event.at ? /* @__PURE__ */ jsx3("small", { style: { color: "#8a9ab0" }, children: event.at }) : null
|
|
255
723
|
] })
|
|
256
724
|
] }, event.id)) });
|
|
257
725
|
}
|
|
258
|
-
function
|
|
259
|
-
if (!items?.length) return /* @__PURE__ */
|
|
260
|
-
return /* @__PURE__ */
|
|
261
|
-
/* @__PURE__ */
|
|
262
|
-
/* @__PURE__ */
|
|
263
|
-
/* @__PURE__ */
|
|
264
|
-
/* @__PURE__ */
|
|
265
|
-
/* @__PURE__ */
|
|
726
|
+
function PackageContents2({ items }) {
|
|
727
|
+
if (!items?.length) return /* @__PURE__ */ jsx3("p", { style: { margin: 0, color: "#6b6b6b" }, children: "Package contents are not available for this shipment." });
|
|
728
|
+
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: [
|
|
729
|
+
/* @__PURE__ */ jsx3(ProductImage2, { src: item.imageUrl, alt: item.title }),
|
|
730
|
+
/* @__PURE__ */ jsxs3("div", { children: [
|
|
731
|
+
/* @__PURE__ */ jsx3("strong", { children: item.title }),
|
|
732
|
+
/* @__PURE__ */ jsx3("p", { style: { margin: "5px 0", color: "#6b6b6b", fontSize: 14 }, children: item.description ?? "Product details are available in your order." }),
|
|
733
|
+
/* @__PURE__ */ jsxs3("small", { style: { color: "#6b6b6b" }, children: [
|
|
266
734
|
"Qty ",
|
|
267
735
|
item.quantity
|
|
268
736
|
] })
|
|
@@ -273,39 +741,39 @@ function TrackingResult({ props }) {
|
|
|
273
741
|
const runtime = useBrandedRuntime();
|
|
274
742
|
const result = runtime.displayedResult;
|
|
275
743
|
if (!result) return null;
|
|
276
|
-
const progress = result.progress?.length ? result.progress :
|
|
744
|
+
const progress = result.progress?.length ? result.progress : defaultProgress2(result.status);
|
|
277
745
|
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__ */
|
|
746
|
+
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: [
|
|
747
|
+
/* @__PURE__ */ jsxs3("div", { style: contentWidth2, children: [
|
|
748
|
+
/* @__PURE__ */ jsxs3("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 16, flexWrap: "wrap", textAlign: "center" }, children: [
|
|
749
|
+
/* @__PURE__ */ jsxs3("p", { style: { flex: "1 1 360px", margin: 0, fontSize: "clamp(18px, 2vw, 28px)" }, children: [
|
|
282
750
|
"Tracking: ",
|
|
283
751
|
result.trackingNumber
|
|
284
752
|
] }),
|
|
285
|
-
/* @__PURE__ */
|
|
753
|
+
/* @__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
754
|
] }),
|
|
287
|
-
/* @__PURE__ */
|
|
288
|
-
/* @__PURE__ */
|
|
755
|
+
/* @__PURE__ */ jsx3("h1", { style: { margin: "54px 0 0", fontSize: "clamp(36px, 5vw, 56px)", lineHeight: 1.1, textAlign: "center" }, children: result.status }),
|
|
756
|
+
/* @__PURE__ */ jsx3(TrackingProgress2, { steps: progress })
|
|
289
757
|
] }),
|
|
290
|
-
/* @__PURE__ */
|
|
291
|
-
/* @__PURE__ */
|
|
292
|
-
/* @__PURE__ */
|
|
293
|
-
/* @__PURE__ */
|
|
758
|
+
/* @__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: [
|
|
759
|
+
/* @__PURE__ */ jsxs3("section", { "aria-label": "Shipping details", children: [
|
|
760
|
+
/* @__PURE__ */ jsx3("h2", { style: { margin: "0 0 28px", fontSize: 28 }, children: "Shipping Details" }),
|
|
761
|
+
/* @__PURE__ */ jsx3(ShippingTimeline2, { events })
|
|
294
762
|
] }),
|
|
295
|
-
/* @__PURE__ */
|
|
296
|
-
/* @__PURE__ */
|
|
297
|
-
/* @__PURE__ */
|
|
763
|
+
/* @__PURE__ */ jsxs3("section", { "aria-label": "Package contents", children: [
|
|
764
|
+
/* @__PURE__ */ jsx3("h2", { style: { margin: "0 0 28px", fontSize: 28 }, children: "Package Contents" }),
|
|
765
|
+
/* @__PURE__ */ jsx3(PackageContents2, { items: result.orderItems })
|
|
298
766
|
] })
|
|
299
767
|
] }) })
|
|
300
768
|
] });
|
|
301
769
|
}
|
|
302
770
|
function BrandedTextField({ value, onChange }) {
|
|
303
|
-
return /* @__PURE__ */
|
|
771
|
+
return /* @__PURE__ */ jsx3("input", { "aria-label": "Branded text", value: typeof value === "string" ? value : "", onChange: (event) => onChange(event.target.value) });
|
|
304
772
|
}
|
|
305
|
-
function
|
|
306
|
-
const value =
|
|
307
|
-
if (!block.selected) return /* @__PURE__ */
|
|
308
|
-
return /* @__PURE__ */
|
|
773
|
+
function InlineText2({ block, name, fallback }) {
|
|
774
|
+
const value = text3(block, name, fallback);
|
|
775
|
+
if (!block.selected) return /* @__PURE__ */ jsx3("span", { "data-branded-editor-field": name, children: value });
|
|
776
|
+
return /* @__PURE__ */ jsx3(
|
|
309
777
|
"input",
|
|
310
778
|
{
|
|
311
779
|
"aria-label": "Canvas " + name,
|
|
@@ -319,144 +787,144 @@ function InlineText({ block, name, fallback }) {
|
|
|
319
787
|
);
|
|
320
788
|
}
|
|
321
789
|
function EditorSurface({ block, children }) {
|
|
322
|
-
return /* @__PURE__ */
|
|
790
|
+
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
791
|
}
|
|
324
792
|
function BrandedAnnouncementEditor(block) {
|
|
325
|
-
return /* @__PURE__ */
|
|
793
|
+
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
794
|
}
|
|
327
795
|
function BrandedTrackingExperienceEditor(block) {
|
|
328
796
|
const labels = shipmentLabels(block.shipmentLabels);
|
|
329
|
-
return /* @__PURE__ */
|
|
330
|
-
/* @__PURE__ */
|
|
331
|
-
/* @__PURE__ */
|
|
332
|
-
/* @__PURE__ */
|
|
333
|
-
/* @__PURE__ */
|
|
334
|
-
/* @__PURE__ */
|
|
335
|
-
/* @__PURE__ */
|
|
797
|
+
return /* @__PURE__ */ jsxs3("section", { "aria-label": "Branded tracking experience editor", style: { background: "#fffdf0", fontFamily: "var(--pb-font-family)" }, children: [
|
|
798
|
+
/* @__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)) }),
|
|
799
|
+
/* @__PURE__ */ jsx3("div", { style: { minHeight: 360, display: "grid", placeItems: "center", padding: 16, background: "linear-gradient(135deg, #dedbd4, #b9b3aa)" }, children: /* @__PURE__ */ jsxs3(EditorSurface, { block, children: [
|
|
800
|
+
/* @__PURE__ */ jsx3("h1", { style: { margin: "0 0 28px", textAlign: "center", fontSize: 32 }, children: /* @__PURE__ */ jsx3(InlineText2, { block, name: "heading", fallback: "Track your order" }) }),
|
|
801
|
+
/* @__PURE__ */ jsxs3("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", borderBottom: "1px solid #e7e7e7", marginBottom: 20, textAlign: "center" }, children: [
|
|
802
|
+
/* @__PURE__ */ jsx3("span", { style: { padding: 10 }, children: "Order Number" }),
|
|
803
|
+
/* @__PURE__ */ jsx3("strong", { style: { padding: 10, borderBottom: "2px solid #0a0a0a" }, children: "Tracking Number" })
|
|
336
804
|
] }),
|
|
337
|
-
/* @__PURE__ */
|
|
338
|
-
/* @__PURE__ */
|
|
339
|
-
/* @__PURE__ */
|
|
805
|
+
/* @__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" } }),
|
|
806
|
+
/* @__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" }) }),
|
|
807
|
+
/* @__PURE__ */ jsx3("small", { style: { display: "block", marginTop: 10, color: "#8a8a8a", fontSize: 9, textAlign: "right" }, children: "Powered by BestTrack" })
|
|
340
808
|
] }) })
|
|
341
809
|
] });
|
|
342
810
|
}
|
|
343
811
|
function BrandedQueryEditor(block) {
|
|
344
|
-
return /* @__PURE__ */
|
|
812
|
+
return /* @__PURE__ */ jsx3(BrandedTrackingExperienceEditor, { ...block });
|
|
345
813
|
}
|
|
346
814
|
function BrandedOrderItemsEditor(block) {
|
|
347
|
-
return /* @__PURE__ */
|
|
348
|
-
/* @__PURE__ */
|
|
349
|
-
/* @__PURE__ */
|
|
815
|
+
return /* @__PURE__ */ jsxs3(EditorSurface, { block, children: [
|
|
816
|
+
/* @__PURE__ */ jsx3("h2", { style: { margin: 0 }, children: /* @__PURE__ */ jsx3(InlineText2, { block, name: "heading", fallback: "What's Inside" }) }),
|
|
817
|
+
/* @__PURE__ */ jsx3("p", { style: { color: "#6b6b6b" }, children: "Package contents appear after a consumer tracking query." })
|
|
350
818
|
] });
|
|
351
819
|
}
|
|
352
820
|
function BrandedRecommendationsEditor(block) {
|
|
353
|
-
return /* @__PURE__ */
|
|
354
|
-
/* @__PURE__ */
|
|
355
|
-
/* @__PURE__ */
|
|
821
|
+
return /* @__PURE__ */ jsxs3(EditorSurface, { block, children: [
|
|
822
|
+
/* @__PURE__ */ jsx3("h2", { style: { margin: 0, textAlign: "center" }, children: /* @__PURE__ */ jsx3(InlineText2, { block, name: "heading", fallback: "You might also like" }) }),
|
|
823
|
+
/* @__PURE__ */ jsx3("p", { style: { color: "#6b6b6b", textAlign: "center" }, children: "Recommendations appear with the active shipment." })
|
|
356
824
|
] });
|
|
357
825
|
}
|
|
358
826
|
function BrandedQuickLinksEditor(block) {
|
|
359
|
-
return /* @__PURE__ */
|
|
360
|
-
/* @__PURE__ */
|
|
361
|
-
/* @__PURE__ */
|
|
362
|
-
/* @__PURE__ */
|
|
363
|
-
/* @__PURE__ */
|
|
827
|
+
return /* @__PURE__ */ jsxs3(EditorSurface, { block, children: [
|
|
828
|
+
/* @__PURE__ */ jsx3("h2", { children: /* @__PURE__ */ jsx3(InlineText2, { block, name: "heading", fallback: "Need help?" }) }),
|
|
829
|
+
/* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: 20 }, children: [
|
|
830
|
+
/* @__PURE__ */ jsx3(InlineText2, { block, name: "primaryLabel", fallback: "Shipping help" }),
|
|
831
|
+
/* @__PURE__ */ jsx3(InlineText2, { block, name: "secondaryLabel", fallback: "Contact us" })
|
|
364
832
|
] })
|
|
365
833
|
] });
|
|
366
834
|
}
|
|
367
835
|
function BrandedBlogEditor(block) {
|
|
368
|
-
return /* @__PURE__ */
|
|
369
|
-
/* @__PURE__ */
|
|
370
|
-
/* @__PURE__ */
|
|
371
|
-
/* @__PURE__ */
|
|
372
|
-
/* @__PURE__ */
|
|
373
|
-
/* @__PURE__ */
|
|
836
|
+
return /* @__PURE__ */ jsxs3(EditorSurface, { block, children: [
|
|
837
|
+
/* @__PURE__ */ jsx3("h2", { children: /* @__PURE__ */ jsx3(InlineText2, { block, name: "heading", fallback: "From our journal" }) }),
|
|
838
|
+
/* @__PURE__ */ jsxs3("article", { children: [
|
|
839
|
+
/* @__PURE__ */ jsx3("strong", { children: /* @__PURE__ */ jsx3(InlineText2, { block, name: "articleTitle", fallback: "Delivery tips for every season" }) }),
|
|
840
|
+
/* @__PURE__ */ jsx3("p", { children: /* @__PURE__ */ jsx3(InlineText2, { block, name: "excerpt", fallback: "Simple ways to make every delivery feel considered." }) }),
|
|
841
|
+
/* @__PURE__ */ jsx3(InlineText2, { block, name: "linkLabel", fallback: "Read the story" })
|
|
374
842
|
] })
|
|
375
843
|
] });
|
|
376
844
|
}
|
|
377
845
|
function BrandedAnnouncementBlock(props) {
|
|
378
|
-
const message =
|
|
846
|
+
const message = text3(props, "message", "");
|
|
379
847
|
if (!message) return null;
|
|
380
|
-
return /* @__PURE__ */
|
|
848
|
+
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
849
|
}
|
|
382
850
|
function BrandedTrackingExperienceBlock(props) {
|
|
383
851
|
const runtime = useBrandedRuntime();
|
|
384
|
-
return /* @__PURE__ */
|
|
385
|
-
/* @__PURE__ */
|
|
386
|
-
runtime.phase === "success" ? /* @__PURE__ */
|
|
852
|
+
return /* @__PURE__ */ jsxs3("section", { "aria-label": "Branded tracking experience", style: { background: "#fffdf0", fontFamily: "var(--pb-font-family)" }, children: [
|
|
853
|
+
/* @__PURE__ */ jsx3(ShipmentSwitcher, { shipmentLabels: props.shipmentLabels }),
|
|
854
|
+
runtime.phase === "success" ? /* @__PURE__ */ jsx3(TrackingResult, { props }) : /* @__PURE__ */ jsx3(QueryHero, { ...props })
|
|
387
855
|
] });
|
|
388
856
|
}
|
|
389
857
|
function BrandedQueryBlock(props) {
|
|
390
|
-
return /* @__PURE__ */
|
|
391
|
-
/* @__PURE__ */
|
|
392
|
-
/* @__PURE__ */
|
|
858
|
+
return /* @__PURE__ */ jsxs3("section", { "aria-label": "Branded tracking query", style: { background: "#fffdf0", fontFamily: "var(--pb-font-family)" }, children: [
|
|
859
|
+
/* @__PURE__ */ jsx3(ShipmentSwitcher, { shipmentLabels: props.shipmentLabels }),
|
|
860
|
+
/* @__PURE__ */ jsx3(QueryHero, { ...props })
|
|
393
861
|
] });
|
|
394
862
|
}
|
|
395
863
|
function BrandedOrderItemsBlock(props) {
|
|
396
864
|
const runtime = useBrandedRuntime();
|
|
397
865
|
const items = runtime.displayedResult?.orderItems ?? [];
|
|
398
|
-
const title =
|
|
399
|
-
return /* @__PURE__ */
|
|
400
|
-
/* @__PURE__ */
|
|
866
|
+
const title = text3(props, "heading", "What's Inside");
|
|
867
|
+
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: [
|
|
868
|
+
/* @__PURE__ */ jsxs3("h2", { style: { margin: "0 0 20px", fontSize: 20 }, children: [
|
|
401
869
|
title,
|
|
402
870
|
runtime.phase === "success" ? " (" + items.length + ")" : ""
|
|
403
871
|
] }),
|
|
404
|
-
runtime.phase === "success" ? /* @__PURE__ */
|
|
872
|
+
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
873
|
] }) });
|
|
406
874
|
}
|
|
407
875
|
function RecommendationCard({ item }) {
|
|
408
|
-
return /* @__PURE__ */
|
|
409
|
-
/* @__PURE__ */
|
|
410
|
-
/* @__PURE__ */
|
|
411
|
-
/* @__PURE__ */
|
|
412
|
-
item.price ? /* @__PURE__ */
|
|
413
|
-
/* @__PURE__ */
|
|
414
|
-
/* @__PURE__ */
|
|
876
|
+
return /* @__PURE__ */ jsxs3("article", { style: { overflow: "hidden", borderRadius: 6, background: "#fff", boxShadow: "0 1px 2px rgb(0 0 0 / 8%)" }, children: [
|
|
877
|
+
/* @__PURE__ */ jsx3(ProductImage2, { src: item.imageUrl, alt: item.title }),
|
|
878
|
+
/* @__PURE__ */ jsxs3("div", { style: { padding: 14 }, children: [
|
|
879
|
+
/* @__PURE__ */ jsx3("strong", { children: item.title }),
|
|
880
|
+
item.price ? /* @__PURE__ */ jsx3("p", { style: { margin: "6px 0", fontWeight: 700 }, children: item.price }) : null,
|
|
881
|
+
/* @__PURE__ */ jsx3("p", { style: { margin: "6px 0", color: "#6b6b6b", fontSize: 13 }, children: item.description }),
|
|
882
|
+
/* @__PURE__ */ jsx3("a", { href: safeHref2(item.href), style: { color: "#0a0a0a", fontSize: 13, fontWeight: 700 }, children: "View product" })
|
|
415
883
|
] })
|
|
416
884
|
] });
|
|
417
885
|
}
|
|
418
886
|
function BrandedRecommendationsBlock(props) {
|
|
419
887
|
const runtime = useBrandedRuntime();
|
|
420
888
|
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__ */
|
|
889
|
+
const title = text3(props, "heading", "You might also like");
|
|
890
|
+
if (runtime.phase === "success" && !recommendations.length && text3(props, "hideWhenEmpty", "false") === "true") return null;
|
|
891
|
+
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: [
|
|
892
|
+
/* @__PURE__ */ jsx3("h2", { style: { margin: "0 0 24px", textAlign: "center", fontSize: 20 }, children: title }),
|
|
893
|
+
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." : "Recommendations will appear with your order." })
|
|
426
894
|
] }) });
|
|
427
895
|
}
|
|
428
896
|
function BrandedQuickLinksBlock(props) {
|
|
429
|
-
const title =
|
|
430
|
-
return /* @__PURE__ */
|
|
431
|
-
/* @__PURE__ */
|
|
432
|
-
/* @__PURE__ */
|
|
433
|
-
/* @__PURE__ */
|
|
434
|
-
/* @__PURE__ */
|
|
897
|
+
const title = text3(props, "heading", "Need help?");
|
|
898
|
+
return /* @__PURE__ */ jsxs3("section", { "aria-label": title, style: { ...cardStyle, margin: "24px auto", maxWidth: 1200, padding: 24 }, children: [
|
|
899
|
+
/* @__PURE__ */ jsx3("h2", { children: title }),
|
|
900
|
+
/* @__PURE__ */ jsxs3("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: 16 }, children: [
|
|
901
|
+
/* @__PURE__ */ jsx3("a", { href: safeHref2(props.primaryHref), style: { color: "#0a0a0a" }, children: text3(props, "primaryLabel", "Shipping help") }),
|
|
902
|
+
/* @__PURE__ */ jsx3("a", { href: safeHref2(props.secondaryHref), style: { color: "#0a0a0a" }, children: text3(props, "secondaryLabel", "Contact us") })
|
|
435
903
|
] })
|
|
436
904
|
] });
|
|
437
905
|
}
|
|
438
906
|
function BrandedBlogBlock(props) {
|
|
439
|
-
const title =
|
|
440
|
-
return /* @__PURE__ */
|
|
441
|
-
/* @__PURE__ */
|
|
442
|
-
/* @__PURE__ */
|
|
443
|
-
/* @__PURE__ */
|
|
444
|
-
/* @__PURE__ */
|
|
445
|
-
/* @__PURE__ */
|
|
907
|
+
const title = text3(props, "heading", "From our journal");
|
|
908
|
+
return /* @__PURE__ */ jsxs3("section", { "aria-label": title, style: { ...cardStyle, margin: "24px auto", maxWidth: 1200, padding: 24 }, children: [
|
|
909
|
+
/* @__PURE__ */ jsx3("h2", { children: title }),
|
|
910
|
+
/* @__PURE__ */ jsxs3("article", { children: [
|
|
911
|
+
/* @__PURE__ */ jsx3("strong", { children: text3(props, "articleTitle", "Delivery tips for every season") }),
|
|
912
|
+
/* @__PURE__ */ jsx3("p", { children: text3(props, "excerpt", "Simple ways to make every delivery feel considered.") }),
|
|
913
|
+
/* @__PURE__ */ jsx3("a", { href: safeHref2(props.articleHref), style: { color: "#0a0a0a" }, children: text3(props, "linkLabel", "Read the story") })
|
|
446
914
|
] })
|
|
447
915
|
] });
|
|
448
916
|
}
|
|
449
917
|
|
|
450
918
|
// src/branded-definition.ts
|
|
451
|
-
var
|
|
919
|
+
var text4 = (label, options = {}) => ({ field: "besttrack.branded.text", label, control: "text", ...options });
|
|
452
920
|
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:
|
|
921
|
+
{ 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 } },
|
|
922
|
+
{ 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 } },
|
|
923
|
+
{ 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 } },
|
|
924
|
+
{ 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 } },
|
|
925
|
+
{ 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 } },
|
|
926
|
+
{ 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 } },
|
|
927
|
+
{ 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
928
|
];
|
|
461
929
|
function createBrandedTemplate() {
|
|
462
930
|
const templateBlocks = brandedBlocks.filter((block) => !["besttrack.branded.query", "besttrack.branded.order-items"].includes(block.type));
|
|
@@ -468,16 +936,16 @@ var bestTrackBrandedExtension = Object.freeze({ name: "besttrack.branded", versi
|
|
|
468
936
|
import { createPageDocument as createPageDocument3 } from "@standhigher/puck-page-builder/runtime";
|
|
469
937
|
|
|
470
938
|
// src/sales.tsx
|
|
471
|
-
import { createContext as createContext3, useCallback as useCallback3, useContext as useContext3, useMemo as useMemo3, useState as
|
|
472
|
-
import { jsx as
|
|
939
|
+
import { createContext as createContext3, useCallback as useCallback3, useContext as useContext3, useMemo as useMemo3, useState as useState4 } from "react";
|
|
940
|
+
import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
473
941
|
var initialRuntime3 = { phase: "idle", async query() {
|
|
474
942
|
return void 0;
|
|
475
943
|
} };
|
|
476
944
|
var SalesRuntimeContext = createContext3(initialRuntime3);
|
|
477
|
-
var
|
|
945
|
+
var cardStyle2 = { border: "1px solid var(--pb-color-border)", borderRadius: "var(--pb-radius)", padding: "var(--pb-spacing)", background: "var(--pb-color-surface)", color: "var(--pb-color-text)", fontFamily: "var(--pb-font-family)" };
|
|
478
946
|
var gridStyle = { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))", gap: "var(--pb-spacing)" };
|
|
479
947
|
function SalesRuntimeProvider({ children, queryTracking }) {
|
|
480
|
-
const [state, setState] =
|
|
948
|
+
const [state, setState] = useState4({ phase: "idle" });
|
|
481
949
|
const query = useCallback3(async (trackingNumber) => {
|
|
482
950
|
setState({ phase: "loading" });
|
|
483
951
|
try {
|
|
@@ -487,15 +955,15 @@ function SalesRuntimeProvider({ children, queryTracking }) {
|
|
|
487
955
|
}
|
|
488
956
|
}, [queryTracking]);
|
|
489
957
|
const value = useMemo3(() => ({ ...state, query }), [query, state]);
|
|
490
|
-
return /* @__PURE__ */
|
|
958
|
+
return /* @__PURE__ */ jsx4(SalesRuntimeContext.Provider, { value, children });
|
|
491
959
|
}
|
|
492
960
|
function useSalesRuntime() {
|
|
493
961
|
return useContext3(SalesRuntimeContext);
|
|
494
962
|
}
|
|
495
|
-
function
|
|
963
|
+
function text5(props, key, fallback) {
|
|
496
964
|
return typeof props[key] === "string" ? props[key] : fallback;
|
|
497
965
|
}
|
|
498
|
-
function
|
|
966
|
+
function safeHref3(value) {
|
|
499
967
|
if (typeof value !== "string") return "#";
|
|
500
968
|
if (value.startsWith("/")) return value;
|
|
501
969
|
try {
|
|
@@ -506,8 +974,8 @@ function safeHref2(value) {
|
|
|
506
974
|
}
|
|
507
975
|
}
|
|
508
976
|
function Section({ title, children }) {
|
|
509
|
-
return /* @__PURE__ */
|
|
510
|
-
/* @__PURE__ */
|
|
977
|
+
return /* @__PURE__ */ jsxs4("section", { "aria-label": title, style: cardStyle2, children: [
|
|
978
|
+
/* @__PURE__ */ jsx4("h2", { style: { marginTop: 0 }, children: title }),
|
|
511
979
|
children
|
|
512
980
|
] });
|
|
513
981
|
}
|
|
@@ -515,25 +983,25 @@ function resourceState(value) {
|
|
|
515
983
|
return typeof value !== "string" ? "invalid" : value.trim() ? "ready" : "empty";
|
|
516
984
|
}
|
|
517
985
|
function SalesTextField({ value, onChange }) {
|
|
518
|
-
return /* @__PURE__ */
|
|
986
|
+
return /* @__PURE__ */ jsx4("input", { "aria-label": "Sales text", value: typeof value === "string" ? value : "", onChange: (event) => onChange(event.target.value) });
|
|
519
987
|
}
|
|
520
988
|
function SalesAnnouncementBlock(props) {
|
|
521
|
-
return /* @__PURE__ */
|
|
989
|
+
return /* @__PURE__ */ jsx4("section", { "aria-label": "Sales announcement", style: { ...cardStyle2, background: "var(--pb-color-primary)", color: "white", textAlign: "center" }, children: /* @__PURE__ */ jsx4("strong", { children: text5(props, "message", "Free delivery on orders over $50") }) });
|
|
522
990
|
}
|
|
523
991
|
function SalesQueryBlock(props) {
|
|
524
992
|
const runtime = useSalesRuntime();
|
|
525
|
-
const [trackingNumber, setTrackingNumber] =
|
|
993
|
+
const [trackingNumber, setTrackingNumber] = useState4(text5(props, "defaultTrackingNumber", "BT-2048-DEMO"));
|
|
526
994
|
const submit = (event) => {
|
|
527
995
|
event.preventDefault();
|
|
528
996
|
void runtime.query(trackingNumber);
|
|
529
997
|
};
|
|
530
|
-
return /* @__PURE__ */
|
|
531
|
-
/* @__PURE__ */
|
|
532
|
-
/* @__PURE__ */
|
|
533
|
-
/* @__PURE__ */
|
|
534
|
-
/* @__PURE__ */
|
|
998
|
+
return /* @__PURE__ */ jsxs4("section", { "aria-label": "Sales tracking query", style: { ...cardStyle2, boxShadow: "0 12px 32px rgb(0 0 0 / 8%)" }, children: [
|
|
999
|
+
/* @__PURE__ */ jsx4("h1", { style: { marginTop: 0 }, children: text5(props, "heading", "Track an order") }),
|
|
1000
|
+
/* @__PURE__ */ jsxs4("form", { onSubmit: submit, style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
|
|
1001
|
+
/* @__PURE__ */ jsx4("input", { "aria-label": "Sales tracking number", value: trackingNumber, onChange: (event) => setTrackingNumber(event.target.value), minLength: 4, maxLength: 64, required: true, style: { flex: "1 1 220px", padding: 12, borderRadius: "var(--pb-radius)", border: "1px solid var(--pb-color-border)" } }),
|
|
1002
|
+
/* @__PURE__ */ jsx4("button", { type: "submit", disabled: runtime.phase === "loading", style: { padding: "12px 18px", border: 0, borderRadius: "var(--pb-radius)", color: "white", background: "var(--pb-color-primary)" }, children: runtime.phase === "loading" ? "Checking\u2026" : text5(props, "submitLabel", "Track order") })
|
|
535
1003
|
] }),
|
|
536
|
-
runtime.phase === "error" ? /* @__PURE__ */
|
|
1004
|
+
runtime.phase === "error" ? /* @__PURE__ */ jsxs4("p", { role: "alert", children: [
|
|
537
1005
|
"We could not retrieve this order: ",
|
|
538
1006
|
runtime.error
|
|
539
1007
|
] }) : null
|
|
@@ -541,39 +1009,39 @@ function SalesQueryBlock(props) {
|
|
|
541
1009
|
}
|
|
542
1010
|
function SalesOrderItemsBlock(props) {
|
|
543
1011
|
const runtime = useSalesRuntime();
|
|
544
|
-
const title =
|
|
1012
|
+
const title = text5(props, "heading", "Items in your order");
|
|
545
1013
|
const items = runtime.result?.orderItems ?? [];
|
|
546
|
-
return /* @__PURE__ */
|
|
547
|
-
/* @__PURE__ */
|
|
1014
|
+
return /* @__PURE__ */ jsx4(Section, { title, children: runtime.phase === "error" ? /* @__PURE__ */ jsx4("p", { role: "alert", children: "Order items are temporarily unavailable." }) : runtime.phase === "success" && items.length ? /* @__PURE__ */ jsx4("ul", { style: { marginBottom: 0, paddingLeft: 20 }, children: items.map((item) => /* @__PURE__ */ jsxs4("li", { children: [
|
|
1015
|
+
/* @__PURE__ */ jsx4("strong", { children: item.title }),
|
|
548
1016
|
" \xB7 Qty ",
|
|
549
1017
|
item.quantity
|
|
550
|
-
] }, item.id)) }) : /* @__PURE__ */
|
|
1018
|
+
] }, item.id)) }) : /* @__PURE__ */ jsx4("p", { children: runtime.phase === "loading" ? "Loading order items\u2026" : "Order items appear after a successful query." }) });
|
|
551
1019
|
}
|
|
552
1020
|
function SalesOtherTrackingBlock(props) {
|
|
553
1021
|
const runtime = useSalesRuntime();
|
|
554
|
-
const title =
|
|
555
|
-
return /* @__PURE__ */
|
|
1022
|
+
const title = text5(props, "heading", "Other shipments");
|
|
1023
|
+
return /* @__PURE__ */ jsx4(Section, { title, children: runtime.phase === "error" ? /* @__PURE__ */ jsx4("p", { role: "alert", children: "Additional shipments are unavailable." }) : runtime.phase === "success" ? /* @__PURE__ */ jsx4("p", { children: text5(props, "emptyMessage", "No other shipments are linked to this order.") }) : /* @__PURE__ */ jsx4("p", { children: "Other tracking numbers appear with your order result." }) });
|
|
556
1024
|
}
|
|
557
1025
|
function SalesServiceCardsBlock(props) {
|
|
558
|
-
const title =
|
|
559
|
-
return /* @__PURE__ */
|
|
560
|
-
/* @__PURE__ */
|
|
561
|
-
/* @__PURE__ */
|
|
562
|
-
/* @__PURE__ */
|
|
1026
|
+
const title = text5(props, "heading", "Shop with confidence");
|
|
1027
|
+
return /* @__PURE__ */ jsx4(Section, { title, children: /* @__PURE__ */ jsxs4("div", { style: gridStyle, children: [
|
|
1028
|
+
/* @__PURE__ */ jsxs4("article", { children: [
|
|
1029
|
+
/* @__PURE__ */ jsx4("strong", { children: text5(props, "firstTitle", "Easy returns") }),
|
|
1030
|
+
/* @__PURE__ */ jsx4("p", { children: text5(props, "firstDescription", "Simple support when plans change.") })
|
|
563
1031
|
] }),
|
|
564
|
-
/* @__PURE__ */
|
|
565
|
-
/* @__PURE__ */
|
|
566
|
-
/* @__PURE__ */
|
|
1032
|
+
/* @__PURE__ */ jsxs4("article", { children: [
|
|
1033
|
+
/* @__PURE__ */ jsx4("strong", { children: text5(props, "secondTitle", "Secure delivery") }),
|
|
1034
|
+
/* @__PURE__ */ jsx4("p", { children: text5(props, "secondDescription", "Follow every milestone in one place.") })
|
|
567
1035
|
] })
|
|
568
1036
|
] }) });
|
|
569
1037
|
}
|
|
570
1038
|
function SalesProductCategoriesBlock(props) {
|
|
571
|
-
const title =
|
|
572
|
-
const collectionId =
|
|
1039
|
+
const title = text5(props, "heading", "Shop by category");
|
|
1040
|
+
const collectionId = text5(props, "collectionId", "");
|
|
573
1041
|
const state = resourceState(collectionId);
|
|
574
|
-
return /* @__PURE__ */
|
|
575
|
-
/* @__PURE__ */
|
|
576
|
-
/* @__PURE__ */
|
|
1042
|
+
return /* @__PURE__ */ jsx4(Section, { title, children: state === "invalid" ? /* @__PURE__ */ jsx4("p", { role: "alert", children: "Collection reference is invalid." }) : state === "empty" ? /* @__PURE__ */ jsx4("p", { children: "No collection selected. Choose a collection through the authorized resource BFF." }) : /* @__PURE__ */ jsxs4("div", { style: gridStyle, children: [
|
|
1043
|
+
/* @__PURE__ */ jsx4("a", { href: safeHref3(props.collectionHref), style: { color: "var(--pb-color-primary)" }, children: text5(props, "collectionLabel", "Featured collection") }),
|
|
1044
|
+
/* @__PURE__ */ jsxs4("small", { children: [
|
|
577
1045
|
"Collection reference: ",
|
|
578
1046
|
collectionId
|
|
579
1047
|
] })
|
|
@@ -581,24 +1049,24 @@ function SalesProductCategoriesBlock(props) {
|
|
|
581
1049
|
}
|
|
582
1050
|
function SalesRecommendationsBlock(props) {
|
|
583
1051
|
const runtime = useSalesRuntime();
|
|
584
|
-
const title =
|
|
1052
|
+
const title = text5(props, "heading", "Complete your order");
|
|
585
1053
|
const recommendations = runtime.result?.recommendations ?? [];
|
|
586
|
-
return /* @__PURE__ */
|
|
587
|
-
/* @__PURE__ */
|
|
588
|
-
/* @__PURE__ */
|
|
589
|
-
] }, item.id)) }) : /* @__PURE__ */
|
|
1054
|
+
return /* @__PURE__ */ jsx4(Section, { title, children: runtime.phase === "error" ? /* @__PURE__ */ jsx4("p", { role: "alert", children: "Recommendations are temporarily unavailable." }) : runtime.phase === "success" && recommendations.length ? /* @__PURE__ */ jsx4("div", { style: gridStyle, children: recommendations.map((item) => /* @__PURE__ */ jsxs4("article", { style: { borderTop: "3px solid var(--pb-color-primary)", paddingTop: 8 }, children: [
|
|
1055
|
+
/* @__PURE__ */ jsx4("strong", { children: item.title }),
|
|
1056
|
+
/* @__PURE__ */ jsx4("p", { children: item.description })
|
|
1057
|
+
] }, item.id)) }) : /* @__PURE__ */ jsx4("p", { children: runtime.phase === "success" ? "No recommendations are available for this order." : "Recommended products appear with your order result." }) });
|
|
590
1058
|
}
|
|
591
1059
|
|
|
592
1060
|
// src/sales-definition.ts
|
|
593
|
-
var
|
|
1061
|
+
var text6 = (label, options = {}) => ({ field: "besttrack.sales.text", label, control: "text", ...options });
|
|
594
1062
|
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: "commerce", variants: [{ id: "commerce", label: "Commerce" }, { id: "minimal", label: "Minimal", theme: { "color.primary": "#202223" } }], fields: { message:
|
|
596
|
-
{ type: "besttrack.sales.query", version: 1, label: "Order query", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Track an order", submitLabel: "Track order", defaultTrackingNumber: "BT-2048-DEMO" }, defaultVariant: "commerce", variants: [{ id: "commerce", label: "Commerce" }, { id: "compact", label: "Compact", theme: { spacing: "12px" } }], fields: { heading:
|
|
597
|
-
{ type: "besttrack.sales.order-items", version: 1, label: "Order items", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Items in your order" }, defaultVariant: "commerce", variants: [{ id: "commerce", label: "Commerce" }], fields: { heading:
|
|
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: "commerce", variants: [{ id: "commerce", label: "Commerce" }], fields: { heading:
|
|
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: "commerce", variants: [{ id: "commerce", label: "Commerce" }], fields: { heading:
|
|
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: "commerce", variants: [{ id: "commerce", label: "Commerce" }, { id: "grid", label: "Grid", theme: { "color.surface": "#f8fafc" } }], fields: { heading:
|
|
601
|
-
{ type: "besttrack.sales.recommendations", version: 1, label: "Recommended products", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Complete your order" }, defaultVariant: "commerce", variants: [{ id: "commerce", label: "Commerce" }, { id: "grid", label: "Product grid", theme: { "color.surface": "#f8fafc" } }], fields: { heading:
|
|
1063
|
+
{ type: "besttrack.sales.announcement", version: 1, label: "Announcement", category: "BestTrack Sales", targets: ["web"], defaultProps: { message: "Free delivery on orders over $50" }, defaultVariant: "commerce", variants: [{ id: "commerce", label: "Commerce" }, { id: "minimal", label: "Minimal", theme: { "color.primary": "#202223" } }], fields: { message: text6("Announcement", { control: "textarea" }) }, render: { web: SalesAnnouncementBlock } },
|
|
1064
|
+
{ type: "besttrack.sales.query", version: 1, label: "Order query", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Track an order", submitLabel: "Track order", defaultTrackingNumber: "BT-2048-DEMO" }, defaultVariant: "commerce", variants: [{ id: "commerce", label: "Commerce" }, { id: "compact", label: "Compact", theme: { spacing: "12px" } }], fields: { heading: text6("Heading"), submitLabel: text6("Button label"), defaultTrackingNumber: text6("Default tracking number") }, render: { web: SalesQueryBlock } },
|
|
1065
|
+
{ type: "besttrack.sales.order-items", version: 1, label: "Order items", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Items in your order" }, defaultVariant: "commerce", variants: [{ id: "commerce", label: "Commerce" }], fields: { heading: text6("Heading") }, render: { web: SalesOrderItemsBlock } },
|
|
1066
|
+
{ 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: "commerce", variants: [{ id: "commerce", label: "Commerce" }], fields: { heading: text6("Heading"), emptyMessage: text6("Empty message", { control: "textarea" }) }, render: { web: SalesOtherTrackingBlock } },
|
|
1067
|
+
{ 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: "commerce", variants: [{ id: "commerce", label: "Commerce" }], fields: { heading: text6("Heading"), firstTitle: text6("First card title"), firstDescription: text6("First card description", { control: "textarea" }), secondTitle: text6("Second card title"), secondDescription: text6("Second card description", { control: "textarea" }) }, render: { web: SalesServiceCardsBlock } },
|
|
1068
|
+
{ 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: "commerce", variants: [{ id: "commerce", label: "Commerce" }, { id: "grid", label: "Grid", theme: { "color.surface": "#f8fafc" } }], fields: { heading: text6("Heading"), collectionId: text6("Collection ID"), collectionLabel: text6("Collection label"), collectionHref: text6("Collection URL", { control: "url" }) }, render: { web: SalesProductCategoriesBlock } },
|
|
1069
|
+
{ type: "besttrack.sales.recommendations", version: 1, label: "Recommended products", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Complete your order" }, defaultVariant: "commerce", variants: [{ id: "commerce", label: "Commerce" }, { id: "grid", label: "Product grid", theme: { "color.surface": "#f8fafc" } }], fields: { heading: text6("Heading") }, render: { web: SalesRecommendationsBlock } }
|
|
602
1070
|
];
|
|
603
1071
|
function createSalesTemplate() {
|
|
604
1072
|
return { id: "besttrack.sales", version: 1, name: "Sales", target: "web", source: "built-in", requiredBlocks: salesBlocks.map((block) => block.type), theme: { "color.primary": "#dc2626", "color.background": "#fffaf5", "color.surface": "#ffffff", "color.text": "#1c1917", "color.border": "#fed7aa", "font.family": "system-ui, sans-serif", radius: "10px", spacing: "20px" }, 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: {} })) }) };
|