@standhigher/besttrack-page-extension 0.5.3 → 0.5.5
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/dist/index.d.ts +6 -1
- package/dist/index.js +540 -415
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -564,6 +564,78 @@ function syncTrackingQueryToUrl(type, value, contactValue = "") {
|
|
|
564
564
|
url.hash = params.toString();
|
|
565
565
|
window.history.replaceState(window.history.state, "", url);
|
|
566
566
|
}
|
|
567
|
+
var TRACKING_RESULT_SELECTOR = "[data-tracking-result]";
|
|
568
|
+
var TRACKING_RESULT_SCROLL_GAP = 8;
|
|
569
|
+
function scrollingParent(node) {
|
|
570
|
+
let parent = node.parentElement;
|
|
571
|
+
while (parent && parent !== document.body && parent !== document.documentElement) {
|
|
572
|
+
const overflowY = getComputedStyle(parent).overflowY;
|
|
573
|
+
if (overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay") return parent;
|
|
574
|
+
parent = parent.parentElement;
|
|
575
|
+
}
|
|
576
|
+
return null;
|
|
577
|
+
}
|
|
578
|
+
function isTopPinned(style) {
|
|
579
|
+
if (style.position !== "sticky" && style.position !== "fixed") return false;
|
|
580
|
+
if (style.display === "none" || style.visibility === "hidden") return false;
|
|
581
|
+
const top = Number.parseFloat(style.top);
|
|
582
|
+
return Number.isFinite(top) && top >= 0 && top <= 240;
|
|
583
|
+
}
|
|
584
|
+
function trackingResultScrollOffset(node) {
|
|
585
|
+
if (typeof window === "undefined" || typeof document === "undefined") return 0;
|
|
586
|
+
const scrollPort = scrollingParent(node);
|
|
587
|
+
const portRect = scrollPort?.getBoundingClientRect();
|
|
588
|
+
const portTop = portRect?.top ?? 0;
|
|
589
|
+
const portLeft = portRect?.left ?? 0;
|
|
590
|
+
const portRight = portRect?.right ?? window.innerWidth;
|
|
591
|
+
const targetRect = node.getBoundingClientRect();
|
|
592
|
+
let covered = 0;
|
|
593
|
+
const seen = /* @__PURE__ */ new Set();
|
|
594
|
+
const consider = (el) => {
|
|
595
|
+
if (!(el instanceof HTMLElement) || seen.has(el) || el === node || node.contains(el)) return;
|
|
596
|
+
seen.add(el);
|
|
597
|
+
const style = getComputedStyle(el);
|
|
598
|
+
if (!isTopPinned(style)) return;
|
|
599
|
+
if (style.position !== "fixed" && scrollingParent(el) !== scrollPort) return;
|
|
600
|
+
const rect = el.getBoundingClientRect();
|
|
601
|
+
if (rect.width <= 0 || rect.height <= 0) return;
|
|
602
|
+
const overlapLeft = Math.max(rect.left, portLeft, targetRect.left);
|
|
603
|
+
const overlapRight = Math.min(rect.right, portRight, Math.max(targetRect.right, targetRect.left));
|
|
604
|
+
if (overlapRight - overlapLeft <= 8) return;
|
|
605
|
+
const pinTop = Number.parseFloat(style.top) || 0;
|
|
606
|
+
const precedes = (node.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_PRECEDING) !== 0;
|
|
607
|
+
const coversPortTop = rect.bottom > portTop && rect.top <= portTop + pinTop + 1;
|
|
608
|
+
if (!precedes && !coversPortTop) return;
|
|
609
|
+
covered = Math.max(covered, pinTop + rect.height);
|
|
610
|
+
};
|
|
611
|
+
if (typeof document.elementsFromPoint === "function") {
|
|
612
|
+
const x = targetRect.width > 0 ? Math.min(Math.max(targetRect.left + targetRect.width / 2, portLeft), portRight) : portLeft + (portRight - portLeft) / 2;
|
|
613
|
+
document.elementsFromPoint(x, portTop + 1).forEach(consider);
|
|
614
|
+
}
|
|
615
|
+
document.querySelectorAll("header, nav, [role='banner']").forEach(consider);
|
|
616
|
+
return covered > 0 ? Math.ceil(covered + TRACKING_RESULT_SCROLL_GAP) : 0;
|
|
617
|
+
}
|
|
618
|
+
function scrollToTrackingResult(root = typeof document === "undefined" ? null : document, schedule = typeof requestAnimationFrame === "function" ? (callback) => {
|
|
619
|
+
requestAnimationFrame(callback);
|
|
620
|
+
} : (callback) => {
|
|
621
|
+
callback();
|
|
622
|
+
}) {
|
|
623
|
+
const tryScroll = (attempts = 0) => {
|
|
624
|
+
const node = root?.querySelector(TRACKING_RESULT_SELECTOR);
|
|
625
|
+
if (node) {
|
|
626
|
+
if (typeof node.scrollIntoView === "function") {
|
|
627
|
+
const offset = trackingResultScrollOffset(node);
|
|
628
|
+
node.style.scrollMarginTop = offset > 0 ? `${offset}px` : "";
|
|
629
|
+
node.scrollIntoView({ behavior: "smooth", block: "start" });
|
|
630
|
+
}
|
|
631
|
+
return;
|
|
632
|
+
}
|
|
633
|
+
if (attempts < 10) {
|
|
634
|
+
schedule(() => tryScroll(attempts + 1));
|
|
635
|
+
}
|
|
636
|
+
};
|
|
637
|
+
schedule(() => tryScroll());
|
|
638
|
+
}
|
|
567
639
|
function readTrackingQueryLocationState(search = typeof window === "undefined" ? "" : window.location.search, hash = typeof window === "undefined" ? "" : window.location.hash) {
|
|
568
640
|
const searchParams = new URLSearchParams(search);
|
|
569
641
|
const hashParams = new URLSearchParams(hash.replace(/^#/, ""));
|
|
@@ -1046,6 +1118,7 @@ function RecommendationCards({ items }) {
|
|
|
1046
1118
|
] });
|
|
1047
1119
|
}
|
|
1048
1120
|
var trackingPageAdSlotStyle = {
|
|
1121
|
+
position: "relative",
|
|
1049
1122
|
display: "block",
|
|
1050
1123
|
width: "100%",
|
|
1051
1124
|
maxWidth: 500,
|
|
@@ -1055,6 +1128,8 @@ var trackingPageAdSlotStyle = {
|
|
|
1055
1128
|
textDecoration: "none"
|
|
1056
1129
|
};
|
|
1057
1130
|
var trackingPageAdImageStyle = {
|
|
1131
|
+
position: "absolute",
|
|
1132
|
+
inset: 0,
|
|
1058
1133
|
display: "block",
|
|
1059
1134
|
width: "100%",
|
|
1060
1135
|
height: "100%",
|
|
@@ -1077,18 +1152,8 @@ function EstimatedDeliveryCard({ dateText }) {
|
|
|
1077
1152
|
/* @__PURE__ */ jsx("p", { style: { margin: "6px 0 0", color: "#5f6368", fontSize: 13, fontWeight: 400, lineHeight: 1.35 }, children: "Estimated time may update as tracking progresses." })
|
|
1078
1153
|
] });
|
|
1079
1154
|
}
|
|
1080
|
-
function SectionShell({ title, children, bordered = true }) {
|
|
1081
|
-
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 });
|
|
1082
|
-
}
|
|
1083
|
-
function IdleMessage({ children }) {
|
|
1084
|
-
return /* @__PURE__ */ jsx("p", { style: { margin: 0, textAlign: "center", color: "var(--pb-color-muted, #64748b)" }, children });
|
|
1085
|
-
}
|
|
1086
|
-
function SkeletonRow() {
|
|
1087
|
-
return /* @__PURE__ */ jsxs("div", { className: "bt-progress", "aria-hidden": "true", style: { position: "relative", display: "grid", gridTemplateColumns: "repeat(5, minmax(0, 1fr))", columnGap: 4, width: "100%", maxWidth: 1200, margin: "32px auto 0" }, children: [
|
|
1088
|
-
/* @__PURE__ */ jsx("style", { children: trackingProgressStyles }),
|
|
1089
|
-
/* @__PURE__ */ jsx("span", { className: "bt-progress__line", style: { position: "absolute", left: "10%", right: "10%", height: 6, borderRadius: 999, background: "#e2e8f0" } }),
|
|
1090
|
-
Array.from({ length: 5 }, (_, index) => /* @__PURE__ */ jsx("span", { className: "bt-progress__icon", style: { display: "block", justifySelf: "center", borderRadius: 9999, background: "#e2e8f0" } }, index))
|
|
1091
|
-
] });
|
|
1155
|
+
function SectionShell({ title, children, bordered = true, resultAnchor = false }) {
|
|
1156
|
+
return /* @__PURE__ */ jsx("section", { "aria-label": title, "data-tracking-result": resultAnchor ? "" : void 0, style: { ...pageFont, background: "var(--pb-color-background, #fff)", color: "var(--pb-color-text, #0f172a)", borderBottom: bordered ? "1px solid #f1f5f9" : "0" }, children });
|
|
1092
1157
|
}
|
|
1093
1158
|
|
|
1094
1159
|
// src/shopify-track-page/assets/not-found.png.ts
|
|
@@ -1096,19 +1161,73 @@ var not_found_png_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcQAA
|
|
|
1096
1161
|
|
|
1097
1162
|
// src/tracking-not-found.tsx
|
|
1098
1163
|
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
1099
|
-
function TrackingNotFound() {
|
|
1100
|
-
return /* @__PURE__ */ jsxs2("section", { "aria-label": "Order not found", role: "status", style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "80px 24px", gap: 16 }, children: [
|
|
1164
|
+
function TrackingNotFound({ resultAnchor = false } = {}) {
|
|
1165
|
+
return /* @__PURE__ */ jsxs2("section", { "aria-label": "Order not found", role: "status", "data-tracking-result": resultAnchor ? "" : void 0, style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "80px 24px", gap: 16 }, children: [
|
|
1101
1166
|
/* @__PURE__ */ jsx2("img", { src: not_found_png_default, alt: "", width: 180, height: 180, style: { width: 180, height: 180, objectFit: "contain" } }),
|
|
1102
1167
|
/* @__PURE__ */ jsx2("p", { style: { margin: 0, fontSize: 16, fontWeight: 500, color: "#475569" }, children: "Can not find order" })
|
|
1103
1168
|
] });
|
|
1104
1169
|
}
|
|
1105
1170
|
|
|
1106
|
-
// src/
|
|
1171
|
+
// src/tracking-loading.tsx
|
|
1172
|
+
import { useId } from "react";
|
|
1107
1173
|
import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
1174
|
+
var loadingStyles = `
|
|
1175
|
+
@keyframes bt-tracking-pin-float {
|
|
1176
|
+
0%, 100% { transform: translateY(-1px); }
|
|
1177
|
+
50% { transform: translateY(-5px); }
|
|
1178
|
+
}
|
|
1179
|
+
.bt-tracking-loading__pin {
|
|
1180
|
+
transform-box: fill-box;
|
|
1181
|
+
transform-origin: center;
|
|
1182
|
+
animation: bt-tracking-pin-float 1.8s ease-in-out infinite;
|
|
1183
|
+
}
|
|
1184
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1185
|
+
.bt-tracking-loading__pin { animation: none; transform: translateY(-1px); }
|
|
1186
|
+
}
|
|
1187
|
+
`;
|
|
1188
|
+
function TrackingLoading() {
|
|
1189
|
+
const id = useId();
|
|
1190
|
+
return /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1191
|
+
/* @__PURE__ */ jsx3("style", { children: loadingStyles }),
|
|
1192
|
+
/* @__PURE__ */ jsxs3("div", { role: "status", "aria-label": "\u67E5\u8BE2\u4E2D...", "aria-live": "polite", "aria-atomic": "true", style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 16, marginTop: 56, paddingBottom: 8, textAlign: "center" }, children: [
|
|
1193
|
+
/* @__PURE__ */ jsx3("p", { style: { margin: 0, color: "var(--pb-color-muted, #64748b)", fontSize: 14, fontWeight: 400, lineHeight: "20px" }, children: "\u67E5\u8BE2\u4E2D..." }),
|
|
1194
|
+
/* @__PURE__ */ jsxs3("svg", { width: "56", height: "64", viewBox: "0 0 56 64", fill: "none", "aria-hidden": "true", focusable: "false", style: { display: "block", flexShrink: 0, overflow: "visible" }, children: [
|
|
1195
|
+
/* @__PURE__ */ jsxs3("defs", { children: [
|
|
1196
|
+
/* @__PURE__ */ jsxs3("linearGradient", { id: `${id}-top`, x1: "10", y1: "28", x2: "44", y2: "40", gradientUnits: "userSpaceOnUse", children: [
|
|
1197
|
+
/* @__PURE__ */ jsx3("stop", { stopColor: "#FFF0DA" }),
|
|
1198
|
+
/* @__PURE__ */ jsx3("stop", { offset: "1", stopColor: "#EABD8E" })
|
|
1199
|
+
] }),
|
|
1200
|
+
/* @__PURE__ */ jsxs3("linearGradient", { id: `${id}-left`, x1: "11", y1: "35", x2: "29", y2: "60", gradientUnits: "userSpaceOnUse", children: [
|
|
1201
|
+
/* @__PURE__ */ jsx3("stop", { stopColor: "#FFE8CD" }),
|
|
1202
|
+
/* @__PURE__ */ jsx3("stop", { offset: "1", stopColor: "#F3C79C" })
|
|
1203
|
+
] }),
|
|
1204
|
+
/* @__PURE__ */ jsxs3("linearGradient", { id: `${id}-right`, x1: "28", y1: "40", x2: "45", y2: "52", gradientUnits: "userSpaceOnUse", children: [
|
|
1205
|
+
/* @__PURE__ */ jsx3("stop", { stopColor: "#F8D2AA" }),
|
|
1206
|
+
/* @__PURE__ */ jsx3("stop", { offset: "1", stopColor: "#DCA574" })
|
|
1207
|
+
] }),
|
|
1208
|
+
/* @__PURE__ */ jsxs3("linearGradient", { id: `${id}-pin`, x1: "21", y1: "8", x2: "35", y2: "25", gradientUnits: "userSpaceOnUse", children: [
|
|
1209
|
+
/* @__PURE__ */ jsx3("stop", { stopColor: "#FFD18A" }),
|
|
1210
|
+
/* @__PURE__ */ jsx3("stop", { offset: "1", stopColor: "#F6A34A" })
|
|
1211
|
+
] })
|
|
1212
|
+
] }),
|
|
1213
|
+
/* @__PURE__ */ jsx3("path", { d: "m11 35 17-10 17 10-17 10-17-10Z", fill: `url(#${id}-top)` }),
|
|
1214
|
+
/* @__PURE__ */ jsx3("path", { d: "M11 35v19l17 10V45L11 35Z", fill: `url(#${id}-left)` }),
|
|
1215
|
+
/* @__PURE__ */ jsx3("path", { d: "M28 45v19l17-10V35L28 45Z", fill: `url(#${id}-right)` }),
|
|
1216
|
+
/* @__PURE__ */ jsx3("path", { d: "m18 31 17 10v19l4-2V39L22 29l-4 2Z", fill: "#FFF3E0", fillOpacity: ".6" }),
|
|
1217
|
+
/* @__PURE__ */ jsx3("path", { d: "M11 35 28 45 45 35M28 45v19", stroke: "#FFF8EC", strokeOpacity: ".35", strokeWidth: ".7" }),
|
|
1218
|
+
/* @__PURE__ */ jsx3("g", { className: "bt-tracking-loading__pin", children: /* @__PURE__ */ jsx3("path", { d: "M28 8a7 7 0 0 0-7 7c0 5 7 12 7 12s7-7 7-12a7 7 0 0 0-7-7Zm0 4a3 3 0 1 1 0 6 3 3 0 0 1 0-6Z", fill: `url(#${id}-pin)`, fillRule: "evenodd" }) })
|
|
1219
|
+
] })
|
|
1220
|
+
] })
|
|
1221
|
+
] });
|
|
1222
|
+
}
|
|
1223
|
+
|
|
1224
|
+
// src/ready-to-go.tsx
|
|
1225
|
+
import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
1108
1226
|
var initialRuntime = {
|
|
1109
1227
|
phase: "idle",
|
|
1110
1228
|
recommendations: { phase: "idle", items: [] },
|
|
1111
1229
|
autoQueryFromUrl: false,
|
|
1230
|
+
autoQueryDemo: false,
|
|
1112
1231
|
async query() {
|
|
1113
1232
|
return void 0;
|
|
1114
1233
|
}
|
|
@@ -1138,9 +1257,9 @@ function previewReadyToGoTracking(trackingNumber = "BT-2048-DEMO") {
|
|
|
1138
1257
|
async function queryMockReadyToGoTracking(request) {
|
|
1139
1258
|
return previewReadyToGoTracking(request.mode === "tracking" ? request.trackingNumber : request.orderNumber);
|
|
1140
1259
|
}
|
|
1141
|
-
function ReadyToGoRuntimeProvider({ children, query: injectedQuery, queryRecommendations, transport, autoQueryFromUrl, watermark, adPreview }) {
|
|
1260
|
+
function ReadyToGoRuntimeProvider({ children, query: injectedQuery, queryRecommendations, transport, autoQueryFromUrl, autoQueryDemo = false, watermark, adPreview }) {
|
|
1142
1261
|
const [state, setState] = useState2({ phase: "idle" });
|
|
1143
|
-
const [recommendations, setRecommendations] = useState2(() => queryRecommendations || transport ? { phase: "loading", items: [] } : { phase: "
|
|
1262
|
+
const [recommendations, setRecommendations] = useState2(() => queryRecommendations || transport ? { phase: "loading", items: [] } : { phase: "idle", items: [] });
|
|
1144
1263
|
const requestId = useRef(0);
|
|
1145
1264
|
const resolvedQuery = useMemo2(() => {
|
|
1146
1265
|
if (injectedQuery) return injectedQuery;
|
|
@@ -1184,14 +1303,14 @@ function ReadyToGoRuntimeProvider({ children, query: injectedQuery, queryRecomme
|
|
|
1184
1303
|
() => watermark ?? { visible: !shouldHidePoweredBy() },
|
|
1185
1304
|
[watermark]
|
|
1186
1305
|
);
|
|
1187
|
-
const value = useMemo2(() => ({ ...state, adPreview, query, recommendations, autoQueryFromUrl: resolveAutoQuery, watermark: resolvedWatermark }), [adPreview, query, recommendations, resolveAutoQuery, resolvedWatermark, state]);
|
|
1188
|
-
return /* @__PURE__ */
|
|
1306
|
+
const value = useMemo2(() => ({ ...state, adPreview, query, recommendations, autoQueryFromUrl: resolveAutoQuery, autoQueryDemo, watermark: resolvedWatermark }), [adPreview, autoQueryDemo, query, recommendations, resolveAutoQuery, resolvedWatermark, state]);
|
|
1307
|
+
return /* @__PURE__ */ jsx4(ReadyToGoRuntimeContext.Provider, { value, children });
|
|
1189
1308
|
}
|
|
1190
1309
|
function useReadyToGoRuntime() {
|
|
1191
1310
|
return useContext(ReadyToGoRuntimeContext);
|
|
1192
1311
|
}
|
|
1193
1312
|
function RuntimeWatermark({ watermark }) {
|
|
1194
|
-
return watermark?.visible ? /* @__PURE__ */
|
|
1313
|
+
return watermark?.visible ? /* @__PURE__ */ jsx4("small", { style: { display: "block", marginTop: "auto", paddingTop: 28, textAlign: "center", fontSize: 12, lineHeight: "17px", fontStyle: "italic", color: "#b8b8b8" }, children: watermark.label || "Powered by BestTrack" }) : null;
|
|
1195
1314
|
}
|
|
1196
1315
|
var heroStyle = {
|
|
1197
1316
|
...pageFont,
|
|
@@ -1283,12 +1402,12 @@ function submitButtonStyle(props, loading = false) {
|
|
|
1283
1402
|
};
|
|
1284
1403
|
}
|
|
1285
1404
|
function ReadyToGoTextField({ value, onChange }) {
|
|
1286
|
-
return /* @__PURE__ */
|
|
1405
|
+
return /* @__PURE__ */ jsx4("input", { "aria-label": "Ready-to-go text", value: typeof value === "string" ? value : "", onChange: (event) => onChange(event.target.value) });
|
|
1287
1406
|
}
|
|
1288
1407
|
function InlineText({ block, name, fallback }) {
|
|
1289
1408
|
const value = text(block, name, fallback);
|
|
1290
|
-
if (!block.selected) return /* @__PURE__ */
|
|
1291
|
-
return /* @__PURE__ */
|
|
1409
|
+
if (!block.selected) return /* @__PURE__ */ jsx4("span", { "data-ready-to-go-editor-field": name, children: value });
|
|
1410
|
+
return /* @__PURE__ */ jsx4(
|
|
1292
1411
|
"input",
|
|
1293
1412
|
{
|
|
1294
1413
|
"aria-label": "Canvas " + name,
|
|
@@ -1324,45 +1443,45 @@ function eventsFrom(result) {
|
|
|
1324
1443
|
}
|
|
1325
1444
|
function ProgressResult({ result, showEstimatedDelivery = true, color }) {
|
|
1326
1445
|
const steps = result.progress?.length ? result.progress : defaultProgress(result.status);
|
|
1327
|
-
return /* @__PURE__ */
|
|
1328
|
-
/* @__PURE__ */
|
|
1446
|
+
return /* @__PURE__ */ jsxs4(Fragment3, { children: [
|
|
1447
|
+
/* @__PURE__ */ jsxs4("p", { style: { margin: 0, fontSize: 20, lineHeight: 1.4, color: "#000", overflowWrap: "anywhere" }, children: [
|
|
1329
1448
|
"Tracking: ",
|
|
1330
1449
|
result.trackingNumber
|
|
1331
1450
|
] }),
|
|
1332
|
-
/* @__PURE__ */
|
|
1333
|
-
showEstimatedDelivery && result.estimatedDelivery ? /* @__PURE__ */
|
|
1334
|
-
/* @__PURE__ */
|
|
1451
|
+
/* @__PURE__ */ jsx4("h2", { style: { margin: "clamp(24px, 8%, 48px) 0 0", fontSize: 32, lineHeight: 1.25, fontWeight: 700, color: "#303030", overflowWrap: "anywhere" }, children: result.status }),
|
|
1452
|
+
showEstimatedDelivery && result.estimatedDelivery ? /* @__PURE__ */ jsx4(EstimatedDeliveryCard, { dateText: result.estimatedDelivery }) : null,
|
|
1453
|
+
/* @__PURE__ */ jsx4(TrackingProgress, { steps, color })
|
|
1335
1454
|
] });
|
|
1336
1455
|
}
|
|
1337
1456
|
function DeliveryResult({ heading, contentsHeading, carrierHeading, result, editing }) {
|
|
1338
|
-
return /* @__PURE__ */
|
|
1339
|
-
/* @__PURE__ */
|
|
1340
|
-
/* @__PURE__ */
|
|
1341
|
-
/* @__PURE__ */
|
|
1457
|
+
return /* @__PURE__ */ jsxs4("div", { style: { ...contentWidth, display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 280px), 500px))", gap: 40, justifyContent: "center", alignItems: "start" }, children: [
|
|
1458
|
+
/* @__PURE__ */ jsxs4("div", { children: [
|
|
1459
|
+
/* @__PURE__ */ jsx4("h3", { style: { margin: 0, fontSize: 20, lineHeight: "20px", fontWeight: 700 }, children: heading }),
|
|
1460
|
+
/* @__PURE__ */ jsx4(ShippingTimeline, { events: eventsFrom(result) })
|
|
1342
1461
|
] }),
|
|
1343
|
-
/* @__PURE__ */
|
|
1344
|
-
/* @__PURE__ */
|
|
1345
|
-
/* @__PURE__ */
|
|
1346
|
-
/* @__PURE__ */
|
|
1347
|
-
/* @__PURE__ */
|
|
1462
|
+
/* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", gap: 24 }, children: [
|
|
1463
|
+
/* @__PURE__ */ jsx4(TrackingPageAdSlot, { ad: result.ad, disableLink: editing }),
|
|
1464
|
+
/* @__PURE__ */ jsxs4("div", { children: [
|
|
1465
|
+
/* @__PURE__ */ jsx4("h3", { style: { margin: "0 0 12px", fontSize: 18, fontWeight: 700 }, children: contentsHeading }),
|
|
1466
|
+
/* @__PURE__ */ jsx4(PackageContents, { items: result.orderItems ?? [] })
|
|
1348
1467
|
] }),
|
|
1349
|
-
/* @__PURE__ */
|
|
1350
|
-
/* @__PURE__ */
|
|
1351
|
-
/* @__PURE__ */
|
|
1352
|
-
/* @__PURE__ */
|
|
1468
|
+
/* @__PURE__ */ jsxs4("div", { children: [
|
|
1469
|
+
/* @__PURE__ */ jsx4("h3", { style: { margin: "0 0 12px", fontSize: 18, fontWeight: 700 }, children: carrierHeading }),
|
|
1470
|
+
/* @__PURE__ */ jsx4("p", { style: { margin: 0, fontSize: 14, fontWeight: 600, color: "#1e293b" }, children: result.carrier ?? "Not available" }),
|
|
1471
|
+
/* @__PURE__ */ jsx4("p", { style: { margin: "8px 0 0", fontSize: 14, color: "#64748b" }, children: result.destination ?? "Destination details are not available." })
|
|
1353
1472
|
] })
|
|
1354
1473
|
] })
|
|
1355
1474
|
] });
|
|
1356
1475
|
}
|
|
1357
1476
|
function ReadyToGoQueryEditor(block) {
|
|
1358
|
-
return /* @__PURE__ */
|
|
1359
|
-
/* @__PURE__ */
|
|
1360
|
-
/* @__PURE__ */
|
|
1361
|
-
/* @__PURE__ */
|
|
1362
|
-
/* @__PURE__ */
|
|
1477
|
+
return /* @__PURE__ */ jsx4("section", { "aria-label": "Ready-to-go query editor", style: editorHeroStyle, children: /* @__PURE__ */ jsxs4("div", { role: "region", "aria-label": "Ready-to-go tracking query", style: editorFormCardStyle, children: [
|
|
1478
|
+
/* @__PURE__ */ jsx4("h1", { style: { margin: "0 0 24px", textAlign: "center", fontSize: 28, lineHeight: 1.15, overflowWrap: "anywhere" }, children: /* @__PURE__ */ jsx4(InlineText, { block, name: "heading", fallback: "Track your order" }) }),
|
|
1479
|
+
/* @__PURE__ */ jsxs4("div", { style: { display: "flex", width: "100%", borderBottom: "1px solid #cbd5e1" }, children: [
|
|
1480
|
+
/* @__PURE__ */ jsx4("div", { style: { ...tabStyle(true), display: "flex", alignItems: "center", justifyContent: "center", cursor: "default" }, children: /* @__PURE__ */ jsx4(InlineText, { block, name: "trackingTabLabel", fallback: "Tracking Number" }) }),
|
|
1481
|
+
/* @__PURE__ */ jsx4("div", { style: { ...tabStyle(false), display: "flex", alignItems: "center", justifyContent: "center", cursor: "default" }, children: /* @__PURE__ */ jsx4(InlineText, { block, name: "orderTabLabel", fallback: "Order Number" }) })
|
|
1363
1482
|
] }),
|
|
1364
|
-
/* @__PURE__ */
|
|
1365
|
-
/* @__PURE__ */
|
|
1483
|
+
/* @__PURE__ */ jsxs4("div", { style: { marginTop: 24, display: "flex", flexDirection: "column", gap: 16, flex: 1 }, children: [
|
|
1484
|
+
/* @__PURE__ */ jsx4(
|
|
1366
1485
|
"input",
|
|
1367
1486
|
{
|
|
1368
1487
|
"aria-label": "Canvas default tracking number",
|
|
@@ -1377,39 +1496,42 @@ function ReadyToGoQueryEditor(block) {
|
|
|
1377
1496
|
}
|
|
1378
1497
|
}
|
|
1379
1498
|
),
|
|
1380
|
-
/* @__PURE__ */
|
|
1499
|
+
/* @__PURE__ */ jsx4("div", { style: submitButtonStyle(block), children: /* @__PURE__ */ jsx4(InlineText, { block, name: "submitLabel", fallback: "Track Your Order" }) })
|
|
1381
1500
|
] }),
|
|
1382
|
-
/* @__PURE__ */
|
|
1501
|
+
/* @__PURE__ */ jsx4("p", { style: { marginTop: "auto", paddingTop: 28, textAlign: "center", fontSize: 12, lineHeight: "17px", fontStyle: "italic", color: "#b8b8b8" }, children: "Powered by BestTrack" })
|
|
1383
1502
|
] }) });
|
|
1384
1503
|
}
|
|
1385
1504
|
function ReadyToGoProgressEditor(block) {
|
|
1386
|
-
return /* @__PURE__ */
|
|
1505
|
+
return /* @__PURE__ */ jsx4("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__ */ jsx4("div", { style: { ...contentWidth, textAlign: "center", width: "min(1248px, 100%)" }, children: /* @__PURE__ */ jsx4(ProgressResult, { result: previewReadyToGoTracking(), showEstimatedDelivery: false, color: text(block, "progressColor") }) }) });
|
|
1387
1506
|
}
|
|
1388
1507
|
function ReadyToGoDeliveryEditor(block) {
|
|
1389
1508
|
const { adPreview } = useReadyToGoRuntime();
|
|
1390
|
-
return /* @__PURE__ */
|
|
1509
|
+
return /* @__PURE__ */ jsx4("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__ */ jsx4(
|
|
1391
1510
|
DeliveryResult,
|
|
1392
1511
|
{
|
|
1393
|
-
heading: /* @__PURE__ */
|
|
1394
|
-
contentsHeading: /* @__PURE__ */
|
|
1395
|
-
carrierHeading: /* @__PURE__ */
|
|
1512
|
+
heading: /* @__PURE__ */ jsx4(InlineText, { block, name: "heading", fallback: "Shipping Details" }),
|
|
1513
|
+
contentsHeading: /* @__PURE__ */ jsx4(InlineText, { block, name: "contentsHeading", fallback: "Package Contents" }),
|
|
1514
|
+
carrierHeading: /* @__PURE__ */ jsx4(InlineText, { block, name: "carrierHeading", fallback: "Carrier" }),
|
|
1396
1515
|
editing: true,
|
|
1397
1516
|
result: { ...previewReadyToGoTracking(), ad: adPreview ?? void 0 }
|
|
1398
1517
|
}
|
|
1399
1518
|
) });
|
|
1400
1519
|
}
|
|
1401
|
-
function
|
|
1402
|
-
|
|
1520
|
+
function configuredRecommendations(products) {
|
|
1521
|
+
return parseProductReferences(products).map((product) => ({
|
|
1403
1522
|
id: product.id,
|
|
1404
1523
|
title: product.title || product.id,
|
|
1405
1524
|
description: "",
|
|
1406
1525
|
imageUrl: product.imageUrl,
|
|
1407
1526
|
href: product.handle ? `/products/${product.handle}` : void 0
|
|
1408
1527
|
}));
|
|
1528
|
+
}
|
|
1529
|
+
function ReadyToGoRecommendationsEditor(block) {
|
|
1530
|
+
const selected = configuredRecommendations(block.products);
|
|
1409
1531
|
const items = selected.length ? selected : previewReadyToGoTracking().recommendations ?? [];
|
|
1410
|
-
return /* @__PURE__ */
|
|
1411
|
-
/* @__PURE__ */
|
|
1412
|
-
/* @__PURE__ */
|
|
1532
|
+
return /* @__PURE__ */ jsx4("section", { "aria-label": "Ready-to-go recommendations editor", style: { ...pageFont, background: "var(--pb-color-background, #fff)", color: "var(--pb-color-text, #0f172a)" }, children: /* @__PURE__ */ jsxs4("div", { style: contentWidth, children: [
|
|
1533
|
+
/* @__PURE__ */ jsx4("h3", { style: { margin: 0, textAlign: "center", fontSize: 20, lineHeight: "20px", fontWeight: 700 }, children: /* @__PURE__ */ jsx4(InlineText, { block, name: "heading", fallback: "You may also like..." }) }),
|
|
1534
|
+
/* @__PURE__ */ jsx4("div", { style: { marginTop: 24 }, children: /* @__PURE__ */ jsx4(RecommendationCards, { items }) })
|
|
1413
1535
|
] }) });
|
|
1414
1536
|
}
|
|
1415
1537
|
function ReadyToGoQueryBlock(props) {
|
|
@@ -1421,17 +1543,26 @@ function ReadyToGoQueryBlock(props) {
|
|
|
1421
1543
|
const [email, setEmail] = useState2(locationState?.email ?? "");
|
|
1422
1544
|
const [localError, setLocalError] = useState2("");
|
|
1423
1545
|
const autoQueryStarted = useRef(false);
|
|
1546
|
+
const previewDemoTrackingNumber = useRef(trackingNumber);
|
|
1424
1547
|
const heading = text(props, "heading");
|
|
1425
1548
|
const submitLabel = text(props, "submitLabel", "Track Your Order");
|
|
1426
1549
|
const trackingTabLabel = text(props, "trackingTabLabel", "Tracking Number");
|
|
1427
1550
|
const orderTabLabel = text(props, "orderTabLabel", "Order Number");
|
|
1428
1551
|
useEffect2(() => {
|
|
1429
|
-
if (
|
|
1552
|
+
if (autoQueryStarted.current) return;
|
|
1553
|
+
if (locationState?.canAutoQuery) {
|
|
1554
|
+
autoQueryStarted.current = true;
|
|
1555
|
+
void runtime.query(locationState.tab === "tracking" ? { mode: "tracking", trackingNumber: locationState.trackingNumber } : { mode: "order", orderNumber: locationState.orderNumber, email: locationState.email }).finally(() => scrollToTrackingResult());
|
|
1556
|
+
return;
|
|
1557
|
+
}
|
|
1558
|
+
const demoTrackingNumber = previewDemoTrackingNumber.current.trim();
|
|
1559
|
+
if (!runtime.autoQueryDemo || !demoTrackingNumber) return;
|
|
1430
1560
|
autoQueryStarted.current = true;
|
|
1431
|
-
void runtime.query(
|
|
1561
|
+
void runtime.query({ mode: "tracking", trackingNumber: demoTrackingNumber });
|
|
1432
1562
|
}, [locationState, runtime]);
|
|
1433
1563
|
const submit = (event) => {
|
|
1434
1564
|
event.preventDefault();
|
|
1565
|
+
if (runtime.phase === "loading") return;
|
|
1435
1566
|
setLocalError("");
|
|
1436
1567
|
if (mode === "order") {
|
|
1437
1568
|
if (!orderNumber.trim() || !email.trim()) {
|
|
@@ -1439,7 +1570,7 @@ function ReadyToGoQueryBlock(props) {
|
|
|
1439
1570
|
return;
|
|
1440
1571
|
}
|
|
1441
1572
|
syncTrackingQueryToUrl("order", orderNumber.trim(), email.trim());
|
|
1442
|
-
void runtime.query({ mode: "order", orderNumber: orderNumber.trim(), email: email.trim() });
|
|
1573
|
+
void runtime.query({ mode: "order", orderNumber: orderNumber.trim(), email: email.trim() }).finally(() => scrollToTrackingResult());
|
|
1443
1574
|
return;
|
|
1444
1575
|
}
|
|
1445
1576
|
if (!trackingNumber.trim()) {
|
|
@@ -1447,72 +1578,70 @@ function ReadyToGoQueryBlock(props) {
|
|
|
1447
1578
|
return;
|
|
1448
1579
|
}
|
|
1449
1580
|
syncTrackingQueryToUrl("tracking", trackingNumber.trim());
|
|
1450
|
-
void runtime.query({ mode: "tracking", trackingNumber: trackingNumber.trim() });
|
|
1581
|
+
void runtime.query({ mode: "tracking", trackingNumber: trackingNumber.trim() }).finally(() => scrollToTrackingResult());
|
|
1451
1582
|
};
|
|
1452
1583
|
const loading = runtime.phase === "loading";
|
|
1453
|
-
return /* @__PURE__ */
|
|
1454
|
-
heading ? /* @__PURE__ */
|
|
1455
|
-
/* @__PURE__ */
|
|
1456
|
-
/* @__PURE__ */
|
|
1584
|
+
return /* @__PURE__ */ jsx4("section", { style: heroStyle, children: /* @__PURE__ */ jsxs4("div", { role: "region", "aria-label": "Ready-to-go tracking query", style: formCardStyle, children: [
|
|
1585
|
+
heading ? /* @__PURE__ */ jsx4("h1", { style: { margin: "0 0 24px", textAlign: "center", fontSize: 28, lineHeight: 1.15, overflowWrap: "anywhere" }, children: heading }) : null,
|
|
1586
|
+
/* @__PURE__ */ jsxs4("div", { role: "tablist", "aria-label": "Tracking method", style: { display: "flex", width: "100%", borderBottom: "1px solid #cbd5e1" }, children: [
|
|
1587
|
+
/* @__PURE__ */ jsx4("button", { type: "button", role: "tab", "aria-selected": mode === "tracking", onClick: () => {
|
|
1457
1588
|
setMode("tracking");
|
|
1458
1589
|
setLocalError("");
|
|
1459
1590
|
}, style: tabStyle(mode === "tracking"), children: trackingTabLabel }),
|
|
1460
|
-
/* @__PURE__ */
|
|
1591
|
+
/* @__PURE__ */ jsx4("button", { type: "button", role: "tab", "aria-selected": mode === "order", onClick: () => {
|
|
1461
1592
|
setMode("order");
|
|
1462
1593
|
setLocalError("");
|
|
1463
1594
|
}, style: tabStyle(mode === "order"), children: orderTabLabel })
|
|
1464
1595
|
] }),
|
|
1465
|
-
/* @__PURE__ */
|
|
1466
|
-
mode === "order" ? /* @__PURE__ */
|
|
1467
|
-
/* @__PURE__ */
|
|
1468
|
-
/* @__PURE__ */
|
|
1469
|
-
/* @__PURE__ */
|
|
1470
|
-
/* @__PURE__ */
|
|
1471
|
-
] }) : /* @__PURE__ */
|
|
1472
|
-
/* @__PURE__ */
|
|
1473
|
-
/* @__PURE__ */
|
|
1596
|
+
/* @__PURE__ */ jsxs4("form", { onSubmit: submit, style: { marginTop: 24, display: "flex", flexDirection: "column", gap: 16, flex: 1 }, children: [
|
|
1597
|
+
mode === "order" ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
|
|
1598
|
+
/* @__PURE__ */ jsx4("label", { htmlFor: "ready-to-go-order-number", style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clipPath: "inset(50%)" }, children: "Order number" }),
|
|
1599
|
+
/* @__PURE__ */ jsx4("input", { id: "ready-to-go-order-number", "aria-label": "Order number", value: orderNumber, onChange: (event) => setOrderNumber(event.target.value), placeholder: "Order Number", style: inputStyle }),
|
|
1600
|
+
/* @__PURE__ */ jsx4("label", { htmlFor: "ready-to-go-email", style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clipPath: "inset(50%)" }, children: "Email" }),
|
|
1601
|
+
/* @__PURE__ */ jsx4("input", { id: "ready-to-go-email", "aria-label": "Email", value: email, onChange: (event) => setEmail(event.target.value), placeholder: "Email", style: inputStyle })
|
|
1602
|
+
] }) : /* @__PURE__ */ jsxs4(Fragment3, { children: [
|
|
1603
|
+
/* @__PURE__ */ jsx4("label", { htmlFor: "ready-to-go-tracking-number", style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clipPath: "inset(50%)" }, children: "Tracking number" }),
|
|
1604
|
+
/* @__PURE__ */ jsx4("input", { id: "ready-to-go-tracking-number", "aria-label": "Tracking number", value: trackingNumber, onChange: (event) => setTrackingNumber(event.target.value), placeholder: "Tracking Number", style: inputStyle })
|
|
1474
1605
|
] }),
|
|
1475
|
-
localError ? /* @__PURE__ */
|
|
1476
|
-
/* @__PURE__ */
|
|
1477
|
-
runtime.phase === "error" ? /* @__PURE__ */
|
|
1606
|
+
localError ? /* @__PURE__ */ jsx4("p", { style: { margin: 0, textAlign: "center", fontSize: 12, color: "#f43f5e" }, children: localError }) : null,
|
|
1607
|
+
/* @__PURE__ */ jsx4("button", { type: "submit", disabled: loading, style: { ...submitButtonStyle(props, loading), border: 0, font: "inherit", fontSize: 15, fontWeight: 600, cursor: loading ? "wait" : "pointer", opacity: loading ? 0.7 : 1 }, children: submitLabel }),
|
|
1608
|
+
runtime.phase === "error" ? /* @__PURE__ */ jsx4("p", { role: "alert", style: { margin: 0, textAlign: "center", fontSize: 12, color: "#f43f5e" }, children: runtime.error }) : null
|
|
1478
1609
|
] }),
|
|
1479
|
-
/* @__PURE__ */
|
|
1610
|
+
/* @__PURE__ */ jsx4(RuntimeWatermark, { watermark: runtime.watermark }),
|
|
1611
|
+
loading ? /* @__PURE__ */ jsx4(TrackingLoading, {}) : null
|
|
1480
1612
|
] }) });
|
|
1481
1613
|
}
|
|
1482
1614
|
function ReadyToGoProgressBlock(props) {
|
|
1483
1615
|
const runtime = useReadyToGoRuntime();
|
|
1484
1616
|
const result = runtime.result;
|
|
1485
|
-
if (runtime.phase === "idle") return null;
|
|
1486
|
-
if (runtime.phase === "empty") return /* @__PURE__ */
|
|
1487
|
-
return /* @__PURE__ */
|
|
1488
|
-
runtime.phase === "
|
|
1489
|
-
|
|
1490
|
-
/* @__PURE__ */ jsx3(SkeletonRow, {})
|
|
1491
|
-
] }) : null,
|
|
1492
|
-
runtime.phase === "error" ? /* @__PURE__ */ jsx3("p", { style: { margin: 0, color: "#b42318" }, children: "Shipment progress is temporarily unavailable." }) : null,
|
|
1493
|
-
runtime.phase === "success" && result ? /* @__PURE__ */ jsx3(ProgressResult, { result, color: text(props, "progressColor") }) : null
|
|
1617
|
+
if (runtime.phase === "idle" || runtime.phase === "loading") return null;
|
|
1618
|
+
if (runtime.phase === "empty") return /* @__PURE__ */ jsx4(TrackingNotFound, { resultAnchor: true });
|
|
1619
|
+
return /* @__PURE__ */ jsx4(SectionShell, { title: "Shipment progress", resultAnchor: true, children: /* @__PURE__ */ jsxs4("div", { style: { ...contentWidth, textAlign: "center", width: "min(1248px, 100%)" }, children: [
|
|
1620
|
+
runtime.phase === "error" ? /* @__PURE__ */ jsx4("p", { style: { margin: 0, color: "#b42318" }, children: "Shipment progress is temporarily unavailable." }) : null,
|
|
1621
|
+
runtime.phase === "success" && result ? /* @__PURE__ */ jsx4(ProgressResult, { result, showEstimatedDelivery: !runtime.autoQueryDemo, color: text(props, "progressColor") }) : null
|
|
1494
1622
|
] }) });
|
|
1495
1623
|
}
|
|
1496
1624
|
function ReadyToGoDeliveryBlock(props) {
|
|
1497
1625
|
const runtime = useReadyToGoRuntime();
|
|
1498
|
-
if (runtime.phase === "idle" || runtime.phase === "empty") return null;
|
|
1626
|
+
if (runtime.phase === "idle" || runtime.phase === "loading" || runtime.phase === "empty") return null;
|
|
1499
1627
|
const heading = text(props, "heading", "Shipping Details");
|
|
1500
1628
|
const contentsHeading = text(props, "contentsHeading", "Package Contents");
|
|
1501
1629
|
const carrierHeading = text(props, "carrierHeading", "Carrier");
|
|
1502
1630
|
const result = runtime.result;
|
|
1503
|
-
return /* @__PURE__ */
|
|
1504
|
-
/* @__PURE__ */
|
|
1505
|
-
runtime.phase === "
|
|
1506
|
-
runtime.phase === "error" ? /* @__PURE__ */ jsx3("p", { style: { margin: "16px 0 0", color: "#b42318" }, children: "Delivery details are temporarily unavailable." }) : null
|
|
1631
|
+
return /* @__PURE__ */ jsx4(SectionShell, { title: heading, children: runtime.phase === "success" && result ? /* @__PURE__ */ jsx4(DeliveryResult, { heading, contentsHeading, carrierHeading, result }) : /* @__PURE__ */ jsx4("div", { style: { ...contentWidth, display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 280px), 500px))", gap: 40, justifyContent: "center", alignItems: "start" }, children: /* @__PURE__ */ jsxs4("div", { children: [
|
|
1632
|
+
/* @__PURE__ */ jsx4("h3", { style: { margin: 0, fontSize: 20, lineHeight: "20px", fontWeight: 700 }, children: heading }),
|
|
1633
|
+
runtime.phase === "error" ? /* @__PURE__ */ jsx4("p", { style: { margin: "16px 0 0", color: "#b42318" }, children: "Delivery details are temporarily unavailable." }) : null
|
|
1507
1634
|
] }) }) });
|
|
1508
1635
|
}
|
|
1509
1636
|
function ReadyToGoRecommendationsBlock(props) {
|
|
1510
1637
|
const runtime = useReadyToGoRuntime();
|
|
1511
1638
|
const heading = text(props, "heading", "You may also like...");
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1639
|
+
const configured = configuredRecommendations(props.products);
|
|
1640
|
+
const items = configured.length ? configured : runtime.recommendations.phase === "success" ? runtime.recommendations.items : [];
|
|
1641
|
+
if (!items.length) return null;
|
|
1642
|
+
return /* @__PURE__ */ jsx4(SectionShell, { title: heading, bordered: false, children: /* @__PURE__ */ jsxs4("div", { style: contentWidth, children: [
|
|
1643
|
+
/* @__PURE__ */ jsx4("h3", { style: { margin: 0, textAlign: "center", fontSize: 20, lineHeight: "20px", fontWeight: 700 }, children: heading }),
|
|
1644
|
+
/* @__PURE__ */ jsx4("div", { style: { marginTop: 24 }, children: /* @__PURE__ */ jsx4(RecommendationCards, { items }) })
|
|
1516
1645
|
] }) });
|
|
1517
1646
|
}
|
|
1518
1647
|
|
|
@@ -1671,8 +1800,8 @@ import { createPageDocument as createPageDocument2 } from "@standhigher/puck-pag
|
|
|
1671
1800
|
import { createContext as createContext2, useCallback as useCallback3, useContext as useContext2, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
|
|
1672
1801
|
|
|
1673
1802
|
// src/tracking-query-experience.tsx
|
|
1674
|
-
import { useEffect as useEffect3, useId, useRef as useRef2, useState as useState3 } from "react";
|
|
1675
|
-
import { Fragment as
|
|
1803
|
+
import { useEffect as useEffect3, useId as useId2, useRef as useRef2, useState as useState3 } from "react";
|
|
1804
|
+
import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
1676
1805
|
var srOnly = {
|
|
1677
1806
|
position: "absolute",
|
|
1678
1807
|
width: 1,
|
|
@@ -1734,8 +1863,6 @@ function TrackingQueryCard({
|
|
|
1734
1863
|
trackingPlaceholder = "Enter your tracking number",
|
|
1735
1864
|
orderPlaceholder = "Enter your order number",
|
|
1736
1865
|
emailPlaceholder = "Enter your email",
|
|
1737
|
-
loadingLabel = "Querying...",
|
|
1738
|
-
loadingMessage = "Checking your order...",
|
|
1739
1866
|
emptyMessage = "We couldn't find an order or shipment for that number.",
|
|
1740
1867
|
errorMessage = "We couldn't retrieve this order right now. Please try again later.",
|
|
1741
1868
|
trackingInputLabel = "Tracking number",
|
|
@@ -1756,13 +1883,13 @@ function TrackingQueryCard({
|
|
|
1756
1883
|
messageStyle,
|
|
1757
1884
|
resultStyle
|
|
1758
1885
|
}) {
|
|
1759
|
-
const trackingInputId =
|
|
1760
|
-
const orderInputId =
|
|
1761
|
-
const emailInputId =
|
|
1762
|
-
const trackingTabId =
|
|
1763
|
-
const orderTabId =
|
|
1764
|
-
const tabPanelId =
|
|
1765
|
-
const queryStatusId =
|
|
1886
|
+
const trackingInputId = useId2();
|
|
1887
|
+
const orderInputId = useId2();
|
|
1888
|
+
const emailInputId = useId2();
|
|
1889
|
+
const trackingTabId = useId2();
|
|
1890
|
+
const orderTabId = useId2();
|
|
1891
|
+
const tabPanelId = useId2();
|
|
1892
|
+
const queryStatusId = useId2();
|
|
1766
1893
|
const [mode, setMode] = useState3(initialMode);
|
|
1767
1894
|
const [trackingNumber, setTrackingNumber] = useState3(initialTrackingNumber);
|
|
1768
1895
|
const [orderNumber, setOrderNumber] = useState3(initialOrderNumber);
|
|
@@ -1812,6 +1939,7 @@ function TrackingQueryCard({
|
|
|
1812
1939
|
};
|
|
1813
1940
|
const submit = (event) => {
|
|
1814
1941
|
event.preventDefault();
|
|
1942
|
+
if (loading) return;
|
|
1815
1943
|
const nextErrors = {};
|
|
1816
1944
|
const normalizedTrackingNumber = trackingNumber.trim();
|
|
1817
1945
|
const normalizedOrderNumber = orderNumber.trim();
|
|
@@ -1830,53 +1958,54 @@ function TrackingQueryCard({
|
|
|
1830
1958
|
};
|
|
1831
1959
|
const errorFor = (field) => errors[field];
|
|
1832
1960
|
const inputWithError = (field) => ({ ...inputStyle2, borderColor: errorFor(field) ? "#b42318" : inputStyle2.borderColor ?? "#cbd5e1" });
|
|
1833
|
-
const message = phase === "
|
|
1961
|
+
const message = phase === "empty" ? emptyMessage : phase === "error" ? errorMessage : void 0;
|
|
1834
1962
|
const cardData = cardDataAttribute ? { [cardDataAttribute]: "true" } : {};
|
|
1835
1963
|
const resultData = resultDataAttribute ? { [resultDataAttribute]: "true" } : {};
|
|
1836
1964
|
const activeTabId = mode === "tracking" ? trackingTabId : orderTabId;
|
|
1837
1965
|
const resultLabel = phase === "success" ? "Tracking result" : "Tracking query status";
|
|
1838
|
-
return /* @__PURE__ */
|
|
1839
|
-
/* @__PURE__ */
|
|
1840
|
-
/* @__PURE__ */
|
|
1841
|
-
/* @__PURE__ */
|
|
1966
|
+
return /* @__PURE__ */ jsxs5("div", { ref: cardRef, "data-tracking-query-card": true, ...cardData, "aria-busy": loading || void 0, style: { boxSizing: "border-box", minWidth: 0, maxWidth: "100%", overflowX: "hidden", overflowY: "auto", overscrollBehavior: "contain", scrollPaddingBlock: 16, ...cardStyle2 }, children: [
|
|
1967
|
+
/* @__PURE__ */ jsx5("h1", { style: { margin: "0 0 28px", textAlign: "center", ...headingStyle }, children: heading }),
|
|
1968
|
+
/* @__PURE__ */ jsxs5("div", { role: "tablist", "aria-label": "Tracking method", style: { display: "grid", gridTemplateColumns: "1fr 1fr", borderBottom: "1px solid #cbd5e1", marginBottom: 18, ...tabListStyle }, children: [
|
|
1969
|
+
/* @__PURE__ */ jsx5("button", { ref: (element) => {
|
|
1842
1970
|
tabRefs.current.tracking = element;
|
|
1843
1971
|
}, id: trackingTabId, type: "button", role: "tab", "aria-selected": mode === "tracking", "aria-controls": tabPanelId, tabIndex: mode === "tracking" ? 0 : -1, onClick: () => setActiveMode("tracking"), onKeyDown: (event) => onTabKeyDown(event, "tracking"), style: tabStyle2(mode === "tracking"), children: trackingTabLabel }),
|
|
1844
|
-
/* @__PURE__ */
|
|
1972
|
+
/* @__PURE__ */ jsx5("button", { ref: (element) => {
|
|
1845
1973
|
tabRefs.current.order = element;
|
|
1846
1974
|
}, id: orderTabId, type: "button", role: "tab", "aria-selected": mode === "order", "aria-controls": tabPanelId, tabIndex: mode === "order" ? 0 : -1, onClick: () => setActiveMode("order"), onKeyDown: (event) => onTabKeyDown(event, "order"), style: tabStyle2(mode === "order"), children: orderTabLabel })
|
|
1847
1975
|
] }),
|
|
1848
|
-
/* @__PURE__ */
|
|
1849
|
-
mode === "tracking" ? /* @__PURE__ */
|
|
1850
|
-
/* @__PURE__ */
|
|
1851
|
-
/* @__PURE__ */
|
|
1976
|
+
/* @__PURE__ */ jsx5("div", { id: tabPanelId, role: "tabpanel", "aria-labelledby": activeTabId, children: /* @__PURE__ */ jsxs5("form", { noValidate: true, onSubmit: submit, style: { display: "grid", gap: 12, minWidth: 0, ...formStyle }, children: [
|
|
1977
|
+
mode === "tracking" ? /* @__PURE__ */ jsxs5("div", { children: [
|
|
1978
|
+
/* @__PURE__ */ jsx5("label", { htmlFor: trackingInputId, style: srOnly, children: trackingInputLabel }),
|
|
1979
|
+
/* @__PURE__ */ jsx5("input", { ref: trackingInputRef, id: trackingInputId, "aria-label": trackingInputLabel, "aria-invalid": Boolean(errorFor("tracking")), "aria-describedby": errorFor("tracking") ? trackingInputId + "-error" : void 0, value: trackingNumber, onChange: (event) => {
|
|
1852
1980
|
setTrackingNumber(event.target.value);
|
|
1853
1981
|
clearError("tracking");
|
|
1854
1982
|
}, placeholder: trackingPlaceholder, style: inputWithError("tracking") }),
|
|
1855
|
-
errorFor("tracking") ? /* @__PURE__ */
|
|
1856
|
-
] }) : /* @__PURE__ */
|
|
1857
|
-
/* @__PURE__ */
|
|
1858
|
-
/* @__PURE__ */
|
|
1859
|
-
/* @__PURE__ */
|
|
1983
|
+
errorFor("tracking") ? /* @__PURE__ */ jsx5("p", { id: trackingInputId + "-error", role: "alert", style: { margin: "6px 0 0", color: "#b42318", fontSize: 13 }, children: errorFor("tracking") }) : null
|
|
1984
|
+
] }) : /* @__PURE__ */ jsxs5(Fragment4, { children: [
|
|
1985
|
+
/* @__PURE__ */ jsxs5("div", { children: [
|
|
1986
|
+
/* @__PURE__ */ jsx5("label", { htmlFor: orderInputId, style: srOnly, children: orderInputLabel }),
|
|
1987
|
+
/* @__PURE__ */ jsx5("input", { ref: orderInputRef, id: orderInputId, "aria-label": orderInputLabel, "aria-invalid": Boolean(errorFor("order")), "aria-describedby": errorFor("order") ? orderInputId + "-error" : void 0, value: orderNumber, onChange: (event) => {
|
|
1860
1988
|
setOrderNumber(event.target.value);
|
|
1861
1989
|
clearError("order");
|
|
1862
1990
|
}, placeholder: orderPlaceholder, style: inputWithError("order") }),
|
|
1863
|
-
errorFor("order") ? /* @__PURE__ */
|
|
1991
|
+
errorFor("order") ? /* @__PURE__ */ jsx5("p", { id: orderInputId + "-error", role: "alert", style: { margin: "6px 0 0", color: "#b42318", fontSize: 13 }, children: errorFor("order") }) : null
|
|
1864
1992
|
] }),
|
|
1865
|
-
/* @__PURE__ */
|
|
1866
|
-
/* @__PURE__ */
|
|
1867
|
-
/* @__PURE__ */
|
|
1993
|
+
/* @__PURE__ */ jsxs5("div", { children: [
|
|
1994
|
+
/* @__PURE__ */ jsx5("label", { htmlFor: emailInputId, style: srOnly, children: emailInputLabel }),
|
|
1995
|
+
/* @__PURE__ */ jsx5("input", { ref: emailInputRef, id: emailInputId, type: "email", "aria-label": emailInputLabel, "aria-invalid": Boolean(errorFor("email")), "aria-describedby": errorFor("email") ? emailInputId + "-error" : void 0, value: email, onChange: (event) => {
|
|
1868
1996
|
setEmail(event.target.value);
|
|
1869
1997
|
clearError("email");
|
|
1870
1998
|
}, placeholder: emailPlaceholder, style: inputWithError("email") }),
|
|
1871
|
-
errorFor("email") ? /* @__PURE__ */
|
|
1999
|
+
errorFor("email") ? /* @__PURE__ */ jsx5("p", { id: emailInputId + "-error", role: "alert", style: { margin: "6px 0 0", color: "#b42318", fontSize: 13 }, children: errorFor("email") }) : null
|
|
1872
2000
|
] })
|
|
1873
2001
|
] }),
|
|
1874
|
-
/* @__PURE__ */
|
|
2002
|
+
/* @__PURE__ */ jsx5("button", { type: "submit", disabled: loading, style: submitStyle(loading), children: submitLabel })
|
|
1875
2003
|
] }) }),
|
|
1876
|
-
message ? /* @__PURE__ */
|
|
1877
|
-
phase === "success" ? /* @__PURE__ */
|
|
1878
|
-
terminalPhase ? /* @__PURE__ */
|
|
1879
|
-
watermark
|
|
2004
|
+
message ? /* @__PURE__ */ jsx5("p", { id: queryStatusId, role: phase === "error" ? "alert" : "status", "aria-live": phase === "error" ? "assertive" : "polite", style: { margin: "16px 0 0", color: phase === "error" ? "#b42318" : "#64748b", ...messageStyle }, children: message }) : null,
|
|
2005
|
+
phase === "success" ? /* @__PURE__ */ jsx5("p", { id: queryStatusId, role: "status", "aria-live": "polite", style: srOnly, children: "Tracking details loaded." }) : null,
|
|
2006
|
+
terminalPhase ? /* @__PURE__ */ jsx5("div", { ref: resultRef, role: "region", "aria-label": resultLabel, "aria-describedby": queryStatusId, "data-tracking-query-result": true, ...resultData, "data-testid": resultTestId, tabIndex: -1, style: { minWidth: 0, overflowWrap: "anywhere", marginTop: phase === "success" ? 20 : 0, ...resultStyle }, children: phase === "success" ? result : null }) : null,
|
|
2007
|
+
watermark,
|
|
2008
|
+
loading ? /* @__PURE__ */ jsx5(TrackingLoading, {}) : null
|
|
1880
2009
|
] });
|
|
1881
2010
|
}
|
|
1882
2011
|
function defaultProgress2(status) {
|
|
@@ -1892,55 +2021,55 @@ function defaultProgress2(status) {
|
|
|
1892
2021
|
return steps.map((step, index) => ({ ...step, state: index < current ? "complete" : index === current ? "current" : "upcoming" }));
|
|
1893
2022
|
}
|
|
1894
2023
|
function TrackingProgressDetails({ steps }) {
|
|
1895
|
-
return /* @__PURE__ */
|
|
1896
|
-
/* @__PURE__ */
|
|
1897
|
-
/* @__PURE__ */
|
|
1898
|
-
step.date ? /* @__PURE__ */
|
|
2024
|
+
return /* @__PURE__ */ jsx5("ol", { "aria-label": "Delivery progress", style: { display: "grid", gridTemplateColumns: "repeat(5, minmax(0, 1fr))", gap: 4, margin: "20px 0 0", padding: 0, listStyle: "none" }, children: steps.slice(0, 5).map((step, index) => /* @__PURE__ */ jsxs5("li", { style: { minWidth: 0, textAlign: "center", color: step.state === "upcoming" ? "#64748b" : "#0f172a" }, children: [
|
|
2025
|
+
/* @__PURE__ */ jsx5("span", { "aria-label": step.label + " " + step.state, style: { display: "grid", placeItems: "center", width: 28, height: 28, margin: "0 auto", border: "1px solid " + (step.state === "upcoming" ? "#94a3b8" : "#0f172a"), borderRadius: "50%", background: step.state === "current" ? "#0f172a" : "#fff", color: step.state === "current" ? "#fff" : "#0f172a", fontSize: 13, fontWeight: 700 }, children: step.state === "complete" || step.state === "current" ? "\u2713" : index + 1 }),
|
|
2026
|
+
/* @__PURE__ */ jsx5("span", { style: { display: "block", marginTop: 6, overflowWrap: "anywhere", fontSize: 11, lineHeight: 1.25 }, children: step.label }),
|
|
2027
|
+
step.date ? /* @__PURE__ */ jsx5("span", { style: { display: "block", marginTop: 3, color: "#94a3b8", fontSize: 10, lineHeight: 1.2 }, children: step.date }) : null
|
|
1899
2028
|
] }, step.id)) });
|
|
1900
2029
|
}
|
|
1901
2030
|
function TrackingEvents({ result }) {
|
|
1902
2031
|
const [expanded, setExpanded] = useState3(false);
|
|
1903
2032
|
const events = result.events ?? (result.latestEvent ? [{ id: "latest", title: result.latestEvent, at: result.updatedAt, state: "current" }] : []);
|
|
1904
|
-
if (!events.length) return /* @__PURE__ */
|
|
2033
|
+
if (!events.length) return /* @__PURE__ */ jsx5("p", { style: { margin: "12px 0 0", color: "#64748b", fontSize: 14 }, children: "Tracking events are not available yet. Please try again later." });
|
|
1905
2034
|
const visibleEvents = events.slice(0, expanded ? 50 : 3);
|
|
1906
|
-
return /* @__PURE__ */
|
|
1907
|
-
/* @__PURE__ */
|
|
1908
|
-
/* @__PURE__ */
|
|
1909
|
-
/* @__PURE__ */
|
|
1910
|
-
event.detail ? /* @__PURE__ */
|
|
1911
|
-
event.at ? /* @__PURE__ */
|
|
2035
|
+
return /* @__PURE__ */ jsxs5("div", { "aria-label": "Shipping events", style: { marginTop: 16 }, children: [
|
|
2036
|
+
/* @__PURE__ */ jsx5("ol", { style: { display: "grid", gap: 14, margin: 0, padding: 0, listStyle: "none" }, children: visibleEvents.map((event, index) => /* @__PURE__ */ jsxs5("li", { style: { position: "relative", minWidth: 0, paddingLeft: 22, overflowWrap: "anywhere" }, children: [
|
|
2037
|
+
/* @__PURE__ */ jsx5("span", { "aria-hidden": "true", style: { position: "absolute", left: 0, top: 4, width: 10, height: 10, borderRadius: "50%", background: event.state === "current" || index === 0 ? "#111827" : "#cbd5e1" } }),
|
|
2038
|
+
/* @__PURE__ */ jsx5("strong", { style: { display: "block", fontSize: 14 }, children: event.title }),
|
|
2039
|
+
event.detail ? /* @__PURE__ */ jsx5("span", { style: { display: "block", marginTop: 2, color: "#64748b", fontSize: 13 }, children: event.detail }) : null,
|
|
2040
|
+
event.at ? /* @__PURE__ */ jsx5("time", { style: { display: "block", marginTop: 3, color: "#94a3b8", fontSize: 12 }, children: event.at }) : null
|
|
1912
2041
|
] }, event.id)) }),
|
|
1913
|
-
events.length > 3 ? /* @__PURE__ */
|
|
2042
|
+
events.length > 3 ? /* @__PURE__ */ jsx5("button", { type: "button", onClick: () => setExpanded((current) => !current), style: { minWidth: 44, minHeight: 44, marginTop: 14, padding: "6px 12px", border: "1px solid #cbd5e1", borderRadius: 6, background: "#fff", color: "#0f172a", font: "inherit", fontSize: 13, cursor: "pointer" }, children: expanded ? "Show recent events" : "Show all events" }) : null
|
|
1914
2043
|
] });
|
|
1915
2044
|
}
|
|
1916
2045
|
function TrackingOrderItemImage({ src, title }) {
|
|
1917
2046
|
const [failed, setFailed] = useState3(false);
|
|
1918
2047
|
const imageUrl = safeTrackingPageUrl(src);
|
|
1919
|
-
if (!imageUrl || failed) return /* @__PURE__ */
|
|
1920
|
-
return /* @__PURE__ */
|
|
2048
|
+
if (!imageUrl || failed) return /* @__PURE__ */ jsx5("span", { "aria-label": title + " image unavailable", style: { display: "grid", width: 56, height: 56, placeItems: "center", borderRadius: 6, background: "#e2e8f0", color: "#64748b", fontSize: 13 }, children: title.slice(0, 1).toUpperCase() });
|
|
2049
|
+
return /* @__PURE__ */ jsx5("img", { src: imageUrl, alt: "", onError: () => setFailed(true), style: { width: 56, height: 56, borderRadius: 6, objectFit: "cover", background: "#f1f5f9" } });
|
|
1921
2050
|
}
|
|
1922
2051
|
function TrackingOrderItems({ items }) {
|
|
1923
2052
|
if (!items.length) return null;
|
|
1924
|
-
return /* @__PURE__ */
|
|
1925
|
-
/* @__PURE__ */
|
|
1926
|
-
/* @__PURE__ */
|
|
2053
|
+
return /* @__PURE__ */ jsxs5("section", { "aria-label": "Order items", style: { marginTop: 24, borderTop: "1px solid #e2e8f0", paddingTop: 18 }, children: [
|
|
2054
|
+
/* @__PURE__ */ jsx5("h2", { style: { margin: 0, fontSize: 16 }, children: "Items in your order" }),
|
|
2055
|
+
/* @__PURE__ */ jsx5("div", { style: { display: "grid", gap: 12, marginTop: 12 }, children: items.map((item) => {
|
|
1927
2056
|
const price = item.price ? formatTrackingPageMoney(item.price) : void 0;
|
|
1928
2057
|
const href = safeTrackingPageUrl(item.href);
|
|
1929
|
-
return /* @__PURE__ */
|
|
1930
|
-
/* @__PURE__ */
|
|
1931
|
-
/* @__PURE__ */
|
|
1932
|
-
href ? /* @__PURE__ */
|
|
1933
|
-
item.description ? /* @__PURE__ */
|
|
1934
|
-
/* @__PURE__ */
|
|
1935
|
-
/* @__PURE__ */
|
|
2058
|
+
return /* @__PURE__ */ jsxs5("article", { style: { display: "grid", gridTemplateColumns: "56px minmax(0, 1fr)", gap: 12, alignItems: "center" }, children: [
|
|
2059
|
+
/* @__PURE__ */ jsx5(TrackingOrderItemImage, { src: item.imageUrl, title: item.title }),
|
|
2060
|
+
/* @__PURE__ */ jsxs5("div", { style: { minWidth: 0, overflowWrap: "anywhere" }, children: [
|
|
2061
|
+
href ? /* @__PURE__ */ jsx5("a", { href, style: { color: "inherit", fontWeight: 700, overflowWrap: "anywhere" }, children: item.title }) : /* @__PURE__ */ jsx5("strong", { style: { overflowWrap: "anywhere" }, children: item.title }),
|
|
2062
|
+
item.description ? /* @__PURE__ */ jsx5("p", { style: { margin: "3px 0 0", color: "#64748b", fontSize: 13 }, children: item.description }) : null,
|
|
2063
|
+
/* @__PURE__ */ jsxs5("p", { style: { display: "flex", flexWrap: "wrap", gap: 8, margin: "4px 0 0", color: "#475569", fontSize: 13 }, children: [
|
|
2064
|
+
/* @__PURE__ */ jsxs5("span", { children: [
|
|
1936
2065
|
"Qty ",
|
|
1937
2066
|
item.quantity
|
|
1938
2067
|
] }),
|
|
1939
|
-
price?.amount ? /* @__PURE__ */
|
|
2068
|
+
price?.amount ? /* @__PURE__ */ jsxs5("span", { children: [
|
|
1940
2069
|
price.amount,
|
|
1941
2070
|
price.startsAt ? " and up" : ""
|
|
1942
2071
|
] }) : null,
|
|
1943
|
-
price?.compareAt ? /* @__PURE__ */
|
|
2072
|
+
price?.compareAt ? /* @__PURE__ */ jsx5("s", { style: { color: "#94a3b8" }, children: price.compareAt }) : null
|
|
1944
2073
|
] })
|
|
1945
2074
|
] })
|
|
1946
2075
|
] }, item.id);
|
|
@@ -1955,60 +2084,60 @@ function TrackingQueryResultDetails({ result, onTrackAnother, trackAnotherLabel
|
|
|
1955
2084
|
void navigator.clipboard.writeText(result.trackingNumber).then(() => setCopied(true)).catch(() => void 0);
|
|
1956
2085
|
}
|
|
1957
2086
|
};
|
|
1958
|
-
return /* @__PURE__ */
|
|
1959
|
-
/* @__PURE__ */
|
|
1960
|
-
/* @__PURE__ */
|
|
1961
|
-
/* @__PURE__ */
|
|
2087
|
+
return /* @__PURE__ */ jsxs5("section", { "aria-label": "Tracking result details", style: { minWidth: 0, overflowWrap: "anywhere" }, children: [
|
|
2088
|
+
/* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexWrap: "wrap", alignItems: "start", justifyContent: "space-between", gap: 12 }, children: [
|
|
2089
|
+
/* @__PURE__ */ jsxs5("div", { style: { minWidth: 0, flex: "1 1 180px" }, children: [
|
|
2090
|
+
/* @__PURE__ */ jsxs5("strong", { style: { fontSize: 17 }, children: [
|
|
1962
2091
|
"Your order is ",
|
|
1963
2092
|
result.status || "being updated"
|
|
1964
2093
|
] }),
|
|
1965
|
-
result.estimatedDelivery ? /* @__PURE__ */
|
|
2094
|
+
result.estimatedDelivery ? /* @__PURE__ */ jsxs5("p", { style: { margin: "5px 0 0", color: "#475569", fontSize: 14 }, children: [
|
|
1966
2095
|
"Estimated delivery: ",
|
|
1967
2096
|
result.estimatedDelivery
|
|
1968
2097
|
] }) : null
|
|
1969
2098
|
] }),
|
|
1970
|
-
onTrackAnother ? /* @__PURE__ */
|
|
2099
|
+
onTrackAnother ? /* @__PURE__ */ jsx5("button", { type: "button", onClick: onTrackAnother, style: { minWidth: 44, minHeight: 44, flex: "0 0 auto", padding: "6px 10px", border: "1px solid #cbd5e1", borderRadius: 6, background: "#fff", color: "#0f172a", font: "inherit", fontSize: 12, cursor: "pointer" }, children: trackAnotherLabel }) : null
|
|
1971
2100
|
] }),
|
|
1972
|
-
/* @__PURE__ */
|
|
1973
|
-
/* @__PURE__ */
|
|
1974
|
-
/* @__PURE__ */
|
|
1975
|
-
/* @__PURE__ */
|
|
1976
|
-
/* @__PURE__ */
|
|
2101
|
+
/* @__PURE__ */ jsx5(TrackingProgressDetails, { steps: progress }),
|
|
2102
|
+
/* @__PURE__ */ jsxs5("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 140px), 1fr))", gap: 10, marginTop: 22, padding: 12, borderRadius: 8, background: "#f8fafc", color: "#334155", fontSize: 13 }, children: [
|
|
2103
|
+
/* @__PURE__ */ jsxs5("span", { style: { minWidth: 0, overflowWrap: "anywhere" }, children: [
|
|
2104
|
+
/* @__PURE__ */ jsx5("strong", { children: "Carrier" }),
|
|
2105
|
+
/* @__PURE__ */ jsx5("br", {}),
|
|
1977
2106
|
result.carrier || "\u2014"
|
|
1978
2107
|
] }),
|
|
1979
|
-
/* @__PURE__ */
|
|
1980
|
-
/* @__PURE__ */
|
|
1981
|
-
/* @__PURE__ */
|
|
1982
|
-
/* @__PURE__ */
|
|
2108
|
+
/* @__PURE__ */ jsxs5("span", { style: { minWidth: 0, overflowWrap: "anywhere" }, children: [
|
|
2109
|
+
/* @__PURE__ */ jsx5("strong", { children: "Tracking number" }),
|
|
2110
|
+
/* @__PURE__ */ jsx5("br", {}),
|
|
2111
|
+
/* @__PURE__ */ jsx5("span", { children: result.trackingNumber }),
|
|
1983
2112
|
" ",
|
|
1984
|
-
/* @__PURE__ */
|
|
2113
|
+
/* @__PURE__ */ jsx5("button", { type: "button", onClick: copyTrackingNumber, style: { minWidth: 44, minHeight: 44, border: 0, background: "transparent", color: "#0f172a", font: "inherit", fontSize: 12, fontWeight: 700, cursor: "pointer" }, children: copied ? "Copied" : "Copy" })
|
|
1985
2114
|
] }),
|
|
1986
|
-
/* @__PURE__ */
|
|
1987
|
-
/* @__PURE__ */
|
|
1988
|
-
/* @__PURE__ */
|
|
2115
|
+
/* @__PURE__ */ jsxs5("span", { style: { minWidth: 0, overflowWrap: "anywhere" }, children: [
|
|
2116
|
+
/* @__PURE__ */ jsx5("strong", { children: "Destination" }),
|
|
2117
|
+
/* @__PURE__ */ jsx5("br", {}),
|
|
1989
2118
|
result.destination || "\u2014"
|
|
1990
2119
|
] }),
|
|
1991
|
-
/* @__PURE__ */
|
|
1992
|
-
/* @__PURE__ */
|
|
1993
|
-
/* @__PURE__ */
|
|
2120
|
+
/* @__PURE__ */ jsxs5("span", { style: { minWidth: 0, overflowWrap: "anywhere" }, children: [
|
|
2121
|
+
/* @__PURE__ */ jsx5("strong", { children: "Transit time" }),
|
|
2122
|
+
/* @__PURE__ */ jsx5("br", {}),
|
|
1994
2123
|
result.transitDuration || "\u2014"
|
|
1995
2124
|
] }),
|
|
1996
|
-
result.orderNumber ? /* @__PURE__ */
|
|
1997
|
-
/* @__PURE__ */
|
|
1998
|
-
/* @__PURE__ */
|
|
2125
|
+
result.orderNumber ? /* @__PURE__ */ jsxs5("span", { style: { minWidth: 0, overflowWrap: "anywhere" }, children: [
|
|
2126
|
+
/* @__PURE__ */ jsx5("strong", { children: "Order number" }),
|
|
2127
|
+
/* @__PURE__ */ jsx5("br", {}),
|
|
1999
2128
|
result.orderNumber
|
|
2000
2129
|
] }) : null
|
|
2001
2130
|
] }),
|
|
2002
|
-
/* @__PURE__ */
|
|
2003
|
-
/* @__PURE__ */
|
|
2004
|
-
/* @__PURE__ */
|
|
2131
|
+
/* @__PURE__ */ jsxs5("section", { "aria-label": "Tracking timeline", style: { marginTop: 24, borderTop: "1px solid #e2e8f0", paddingTop: 18 }, children: [
|
|
2132
|
+
/* @__PURE__ */ jsx5("h2", { style: { margin: 0, fontSize: 16 }, children: "Tracking timeline" }),
|
|
2133
|
+
/* @__PURE__ */ jsx5(TrackingEvents, { result })
|
|
2005
2134
|
] }),
|
|
2006
|
-
/* @__PURE__ */
|
|
2135
|
+
/* @__PURE__ */ jsx5(TrackingOrderItems, { items: result.orderItems ?? [] })
|
|
2007
2136
|
] });
|
|
2008
2137
|
}
|
|
2009
2138
|
|
|
2010
2139
|
// src/branded.tsx
|
|
2011
|
-
import { jsx as
|
|
2140
|
+
import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
2012
2141
|
var initialRuntime2 = {
|
|
2013
2142
|
phase: "idle",
|
|
2014
2143
|
selectedShipmentId: null,
|
|
@@ -2060,13 +2189,13 @@ function BrandedRuntimeProvider({ children, query: injectedQuery, watermark }) {
|
|
|
2060
2189
|
() => ({ ...state, displayedResult, selectedShipmentId, query, reset, selectShipment, watermark }),
|
|
2061
2190
|
[displayedResult, query, reset, selectedShipmentId, selectShipment, state, watermark]
|
|
2062
2191
|
);
|
|
2063
|
-
return /* @__PURE__ */
|
|
2192
|
+
return /* @__PURE__ */ jsx6(BrandedRuntimeContext.Provider, { value, children });
|
|
2064
2193
|
}
|
|
2065
2194
|
function useBrandedRuntime() {
|
|
2066
2195
|
return useContext2(BrandedRuntimeContext);
|
|
2067
2196
|
}
|
|
2068
2197
|
function RuntimeWatermark2({ watermark }) {
|
|
2069
|
-
return watermark?.visible ? /* @__PURE__ */
|
|
2198
|
+
return watermark?.visible ? /* @__PURE__ */ jsx6("small", { style: { display: "block", marginTop: 10, color: "#8a8a8a", fontSize: 8, textAlign: "right" }, children: watermark.label || "Powered by BestTrack" }) : null;
|
|
2070
2199
|
}
|
|
2071
2200
|
function text3(props, key, fallback) {
|
|
2072
2201
|
return typeof props[key] === "string" ? props[key] : fallback;
|
|
@@ -2080,28 +2209,28 @@ function ProductImage2({ src, alt }) {
|
|
|
2080
2209
|
const [failed, setFailed] = useState4(false);
|
|
2081
2210
|
const safeSrc = safeImageUrl2(src);
|
|
2082
2211
|
if (!safeSrc || failed) {
|
|
2083
|
-
return /* @__PURE__ */
|
|
2212
|
+
return /* @__PURE__ */ jsx6("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() });
|
|
2084
2213
|
}
|
|
2085
|
-
return /* @__PURE__ */
|
|
2214
|
+
return /* @__PURE__ */ jsx6("img", { src: safeSrc, alt, onError: () => setFailed(true), style: { width: 72, height: 72, flex: "0 0 auto", borderRadius: 6, objectFit: "cover", background: "#f2f2f2" } });
|
|
2086
2215
|
}
|
|
2087
2216
|
function ShipmentSwitcher({ shipmentLabels: configuredLabels }) {
|
|
2088
2217
|
const runtime = useBrandedRuntime();
|
|
2089
2218
|
const configuredShipments = shipmentLabels(configuredLabels);
|
|
2090
2219
|
const shipments = runtime.phase === "idle" || runtime.phase === "loading" ? configuredShipments : runtime.result?.shipments ?? [];
|
|
2091
2220
|
if (!shipments.length) return null;
|
|
2092
|
-
return /* @__PURE__ */
|
|
2221
|
+
return /* @__PURE__ */ jsx6("div", { "aria-label": "Shipment switcher", style: { ...contentWidth2, minWidth: 0, minHeight: 56, display: "flex", alignItems: "center", gap: 8, overflowX: "auto", whiteSpace: "nowrap" }, children: shipments.map((shipment, index) => {
|
|
2093
2222
|
const selected = (runtime.selectedShipmentId ?? shipments[0]?.id) === shipment.id;
|
|
2094
|
-
return /* @__PURE__ */
|
|
2223
|
+
return /* @__PURE__ */ jsx6("button", { type: "button", onClick: () => runtime.selectShipment(shipment.id), "aria-pressed": selected, style: { minWidth: 92, minHeight: 44, 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);
|
|
2095
2224
|
}) });
|
|
2096
2225
|
}
|
|
2097
2226
|
function QueryHero(props) {
|
|
2098
2227
|
const runtime = useBrandedRuntime();
|
|
2099
2228
|
const [heroImageFailed, setHeroImageFailed] = useState4(false);
|
|
2100
2229
|
const result = runtime.displayedResult;
|
|
2101
|
-
return /* @__PURE__ */
|
|
2102
|
-
!heroImageFailed && safeImageUrl2(props.heroImageUrl) ? /* @__PURE__ */
|
|
2103
|
-
/* @__PURE__ */
|
|
2104
|
-
/* @__PURE__ */
|
|
2230
|
+
return /* @__PURE__ */ jsxs6("div", { style: { position: "relative", minWidth: 0, minHeight: "clamp(520px, 44vw, 560px)", display: "grid", overflow: "hidden", background: "linear-gradient(135deg, #dedbd4, #b9b3aa)" }, children: [
|
|
2231
|
+
!heroImageFailed && safeImageUrl2(props.heroImageUrl) ? /* @__PURE__ */ jsx6("img", { src: safeImageUrl2(props.heroImageUrl), alt: "", onError: () => setHeroImageFailed(true), style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" } }) : null,
|
|
2232
|
+
/* @__PURE__ */ jsx6("div", { "aria-hidden": "true", style: { position: "absolute", inset: 0, background: "rgba(255,255,255,0.12)" } }),
|
|
2233
|
+
/* @__PURE__ */ jsx6("div", { style: { ...contentWidth2, position: "relative", zIndex: 1, display: "grid", alignItems: "center", width: "100%", minWidth: 0, paddingTop: "clamp(24px, 5vw, 48px)", paddingBottom: "clamp(24px, 5vw, 48px)" }, children: /* @__PURE__ */ jsx6(
|
|
2105
2234
|
TrackingQueryCard,
|
|
2106
2235
|
{
|
|
2107
2236
|
phase: runtime.phase,
|
|
@@ -2113,8 +2242,6 @@ function QueryHero(props) {
|
|
|
2113
2242
|
initialMode: text3(props, "defaultQueryMode", "tracking") === "order" ? "order" : "tracking",
|
|
2114
2243
|
trackingTabLabel: text3(props, "trackingTabLabel", "Tracking Number"),
|
|
2115
2244
|
orderTabLabel: text3(props, "orderTabLabel", "Order Number"),
|
|
2116
|
-
loadingLabel: "Tracking...",
|
|
2117
|
-
loadingMessage: "Checking your order\u2026",
|
|
2118
2245
|
emptyMessage: "We couldn\u2019t find an order for that number.",
|
|
2119
2246
|
errorMessage: "We couldn\u2019t retrieve this order right now. Please try again later.",
|
|
2120
2247
|
cardDataAttribute: "data-branded-query-card",
|
|
@@ -2127,21 +2254,21 @@ function QueryHero(props) {
|
|
|
2127
2254
|
formStyle: { gap: 12 },
|
|
2128
2255
|
inputStyle: { width: "100%", height: 48, padding: "0 16px", boxSizing: "border-box", border: "1px solid #e2e2e2", borderRadius: 10, font: "inherit" },
|
|
2129
2256
|
submitStyle: (loading) => ({ width: "100%", minHeight: 48, marginTop: 12, border: 0, borderRadius: 10, background: loading ? "#6b6b6b" : "#000", color: "#fff", font: "inherit", cursor: loading ? "wait" : "pointer" }),
|
|
2130
|
-
result: result ? /* @__PURE__ */
|
|
2257
|
+
result: result ? /* @__PURE__ */ jsx6(TrackingQueryResultDetails, { result, onTrackAnother: runtime.reset, trackAnotherLabel: text3(props, "trackAnotherLabel", "Track another order") }) : null,
|
|
2131
2258
|
resultStyle: { padding: 16, border: "1px solid #e7e7e7", borderRadius: 8, background: "#fffdf0" },
|
|
2132
|
-
watermark: /* @__PURE__ */
|
|
2259
|
+
watermark: /* @__PURE__ */ jsx6(RuntimeWatermark2, { watermark: runtime.watermark })
|
|
2133
2260
|
}
|
|
2134
2261
|
) })
|
|
2135
2262
|
] });
|
|
2136
2263
|
}
|
|
2137
2264
|
function PackageContents2({ items }) {
|
|
2138
|
-
if (!items?.length) return /* @__PURE__ */
|
|
2139
|
-
return /* @__PURE__ */
|
|
2140
|
-
/* @__PURE__ */
|
|
2141
|
-
/* @__PURE__ */
|
|
2142
|
-
/* @__PURE__ */
|
|
2143
|
-
/* @__PURE__ */
|
|
2144
|
-
/* @__PURE__ */
|
|
2265
|
+
if (!items?.length) return /* @__PURE__ */ jsx6("p", { style: { margin: 0, color: "#6b6b6b" }, children: "Package contents are not available for this shipment." });
|
|
2266
|
+
return /* @__PURE__ */ jsx6("div", { style: { display: "grid", gap: 16 }, children: items.map((item) => /* @__PURE__ */ jsxs6("article", { style: { display: "flex", alignItems: "flex-start", gap: 14, minWidth: 0 }, children: [
|
|
2267
|
+
/* @__PURE__ */ jsx6(ProductImage2, { src: item.imageUrl, alt: item.title }),
|
|
2268
|
+
/* @__PURE__ */ jsxs6("div", { style: { minWidth: 0, overflowWrap: "anywhere" }, children: [
|
|
2269
|
+
/* @__PURE__ */ jsx6("strong", { children: item.title }),
|
|
2270
|
+
/* @__PURE__ */ jsx6("p", { style: { margin: "5px 0", color: "#6b6b6b", fontSize: 14 }, children: item.description ?? "Product details are available in your order." }),
|
|
2271
|
+
/* @__PURE__ */ jsxs6("small", { style: { color: "#6b6b6b" }, children: [
|
|
2145
2272
|
"Qty ",
|
|
2146
2273
|
item.quantity
|
|
2147
2274
|
] })
|
|
@@ -2149,12 +2276,12 @@ function PackageContents2({ items }) {
|
|
|
2149
2276
|
] }, item.id)) });
|
|
2150
2277
|
}
|
|
2151
2278
|
function BrandedTextField({ value, onChange }) {
|
|
2152
|
-
return /* @__PURE__ */
|
|
2279
|
+
return /* @__PURE__ */ jsx6("input", { "aria-label": "Branded text", value: typeof value === "string" ? value : "", onChange: (event) => onChange(event.target.value) });
|
|
2153
2280
|
}
|
|
2154
2281
|
function InlineText2({ block, name, fallback }) {
|
|
2155
2282
|
const value = text3(block, name, fallback);
|
|
2156
|
-
if (!block.selected) return /* @__PURE__ */
|
|
2157
|
-
return /* @__PURE__ */
|
|
2283
|
+
if (!block.selected) return /* @__PURE__ */ jsx6("span", { "data-branded-editor-field": name, children: value });
|
|
2284
|
+
return /* @__PURE__ */ jsx6(
|
|
2158
2285
|
"input",
|
|
2159
2286
|
{
|
|
2160
2287
|
"aria-label": "Canvas " + name,
|
|
@@ -2184,22 +2311,22 @@ function InlineText2({ block, name, fallback }) {
|
|
|
2184
2311
|
);
|
|
2185
2312
|
}
|
|
2186
2313
|
function EditorSurface({ block, children }) {
|
|
2187
|
-
return /* @__PURE__ */
|
|
2314
|
+
return /* @__PURE__ */ jsx6("section", { "aria-label": "Branded editor preview", style: { ...cardStyle, outline: block.selected ? "2px solid #2563eb" : "1px dashed #cbd5e1", outlineOffset: -2, padding: 24 }, children });
|
|
2188
2315
|
}
|
|
2189
2316
|
function BrandedAnnouncementEditor(block) {
|
|
2190
|
-
return /* @__PURE__ */
|
|
2317
|
+
return /* @__PURE__ */ jsx6("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__ */ jsx6(InlineText2, { block, name: "message", fallback: "Check out our summer sale" }) });
|
|
2191
2318
|
}
|
|
2192
2319
|
function BrandedTrackingExperienceEditor(block) {
|
|
2193
2320
|
const labels = shipmentLabels(block.shipmentLabels);
|
|
2194
|
-
return /* @__PURE__ */
|
|
2195
|
-
/* @__PURE__ */
|
|
2196
|
-
/* @__PURE__ */
|
|
2197
|
-
/* @__PURE__ */
|
|
2198
|
-
/* @__PURE__ */
|
|
2199
|
-
/* @__PURE__ */
|
|
2200
|
-
/* @__PURE__ */
|
|
2321
|
+
return /* @__PURE__ */ jsxs6("section", { "aria-label": "Branded tracking experience editor", style: { background: "#fffdf0", fontFamily: "var(--pb-font-family)" }, children: [
|
|
2322
|
+
/* @__PURE__ */ jsx6("div", { style: { ...contentWidth2, minHeight: 56, display: "flex", alignItems: "center", gap: 8, overflowX: "auto" }, children: labels.map((shipment, index) => /* @__PURE__ */ jsx6("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)) }),
|
|
2323
|
+
/* @__PURE__ */ jsx6("div", { style: { minHeight: 360, display: "grid", placeItems: "center", padding: 16, background: "linear-gradient(135deg, #dedbd4, #b9b3aa)" }, children: /* @__PURE__ */ jsxs6(EditorSurface, { block, children: [
|
|
2324
|
+
/* @__PURE__ */ jsx6("h1", { style: { margin: "0 0 28px", textAlign: "center", fontSize: 32 }, children: /* @__PURE__ */ jsx6(InlineText2, { block, name: "heading", fallback: "Track your order" }) }),
|
|
2325
|
+
/* @__PURE__ */ jsxs6("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", borderBottom: "1px solid #e7e7e7", marginBottom: 20, textAlign: "center" }, children: [
|
|
2326
|
+
/* @__PURE__ */ jsx6("span", { style: { padding: 10 }, children: /* @__PURE__ */ jsx6(InlineText2, { block, name: "orderTabLabel", fallback: "Order Number" }) }),
|
|
2327
|
+
/* @__PURE__ */ jsx6("strong", { style: { padding: 10, borderBottom: "2px solid #0a0a0a" }, children: /* @__PURE__ */ jsx6(InlineText2, { block, name: "trackingTabLabel", fallback: "Tracking Number" }) })
|
|
2201
2328
|
] }),
|
|
2202
|
-
/* @__PURE__ */
|
|
2329
|
+
/* @__PURE__ */ jsx6("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: {
|
|
2203
2330
|
width: "100%",
|
|
2204
2331
|
height: 44,
|
|
2205
2332
|
boxSizing: "border-box",
|
|
@@ -2210,42 +2337,42 @@ function BrandedTrackingExperienceEditor(block) {
|
|
|
2210
2337
|
background: "#fff",
|
|
2211
2338
|
font: "inherit"
|
|
2212
2339
|
} }),
|
|
2213
|
-
/* @__PURE__ */
|
|
2214
|
-
/* @__PURE__ */
|
|
2340
|
+
/* @__PURE__ */ jsx6("div", { style: { display: "grid", placeItems: "center", minHeight: 46, marginTop: 16, borderRadius: 10, background: "#000", color: "#fff", fontWeight: 700 }, children: /* @__PURE__ */ jsx6(InlineText2, { block, name: "submitLabel", fallback: "Track" }) }),
|
|
2341
|
+
/* @__PURE__ */ jsx6("small", { style: { display: "block", marginTop: 10, color: "#8a8a8a", fontSize: 9, textAlign: "right" }, children: "Powered by BestTrack" })
|
|
2215
2342
|
] }) })
|
|
2216
2343
|
] });
|
|
2217
2344
|
}
|
|
2218
2345
|
function BrandedQueryEditor(block) {
|
|
2219
|
-
return /* @__PURE__ */
|
|
2346
|
+
return /* @__PURE__ */ jsx6(BrandedTrackingExperienceEditor, { ...block });
|
|
2220
2347
|
}
|
|
2221
2348
|
function BrandedOrderItemsEditor(block) {
|
|
2222
|
-
return /* @__PURE__ */
|
|
2223
|
-
/* @__PURE__ */
|
|
2224
|
-
/* @__PURE__ */
|
|
2349
|
+
return /* @__PURE__ */ jsxs6(EditorSurface, { block, children: [
|
|
2350
|
+
/* @__PURE__ */ jsx6("h2", { style: { margin: 0 }, children: /* @__PURE__ */ jsx6(InlineText2, { block, name: "heading", fallback: "What's Inside" }) }),
|
|
2351
|
+
/* @__PURE__ */ jsx6("p", { style: { color: "#6b6b6b" }, children: "Package contents appear after a consumer tracking query." })
|
|
2225
2352
|
] });
|
|
2226
2353
|
}
|
|
2227
2354
|
function BrandedRecommendationsEditor(block) {
|
|
2228
|
-
return /* @__PURE__ */
|
|
2229
|
-
/* @__PURE__ */
|
|
2230
|
-
/* @__PURE__ */
|
|
2355
|
+
return /* @__PURE__ */ jsxs6(EditorSurface, { block, children: [
|
|
2356
|
+
/* @__PURE__ */ jsx6("h2", { style: { margin: 0, textAlign: "center" }, children: /* @__PURE__ */ jsx6(InlineText2, { block, name: "heading", fallback: "You might also like" }) }),
|
|
2357
|
+
/* @__PURE__ */ jsx6("p", { style: { color: "#6b6b6b", textAlign: "center" }, children: "Recommendations appear with the active shipment." })
|
|
2231
2358
|
] });
|
|
2232
2359
|
}
|
|
2233
2360
|
function BrandedQuickLinksEditor(block) {
|
|
2234
|
-
return /* @__PURE__ */
|
|
2235
|
-
/* @__PURE__ */
|
|
2236
|
-
/* @__PURE__ */
|
|
2237
|
-
/* @__PURE__ */
|
|
2238
|
-
/* @__PURE__ */
|
|
2361
|
+
return /* @__PURE__ */ jsxs6(EditorSurface, { block, children: [
|
|
2362
|
+
/* @__PURE__ */ jsx6("h2", { children: /* @__PURE__ */ jsx6(InlineText2, { block, name: "heading", fallback: "Need help?" }) }),
|
|
2363
|
+
/* @__PURE__ */ jsxs6("div", { style: { display: "flex", gap: 20 }, children: [
|
|
2364
|
+
/* @__PURE__ */ jsx6(InlineText2, { block, name: "primaryLabel", fallback: "Shipping help" }),
|
|
2365
|
+
/* @__PURE__ */ jsx6(InlineText2, { block, name: "secondaryLabel", fallback: "Contact us" })
|
|
2239
2366
|
] })
|
|
2240
2367
|
] });
|
|
2241
2368
|
}
|
|
2242
2369
|
function BrandedBlogEditor(block) {
|
|
2243
|
-
return /* @__PURE__ */
|
|
2244
|
-
/* @__PURE__ */
|
|
2245
|
-
/* @__PURE__ */
|
|
2246
|
-
/* @__PURE__ */
|
|
2247
|
-
/* @__PURE__ */
|
|
2248
|
-
/* @__PURE__ */
|
|
2370
|
+
return /* @__PURE__ */ jsxs6(EditorSurface, { block, children: [
|
|
2371
|
+
/* @__PURE__ */ jsx6("h2", { children: /* @__PURE__ */ jsx6(InlineText2, { block, name: "heading", fallback: "From our journal" }) }),
|
|
2372
|
+
/* @__PURE__ */ jsxs6("article", { children: [
|
|
2373
|
+
/* @__PURE__ */ jsx6("strong", { children: /* @__PURE__ */ jsx6(InlineText2, { block, name: "articleTitle", fallback: "Delivery tips for every season" }) }),
|
|
2374
|
+
/* @__PURE__ */ jsx6("p", { children: /* @__PURE__ */ jsx6(InlineText2, { block, name: "excerpt", fallback: "Simple ways to make every delivery feel considered." }) }),
|
|
2375
|
+
/* @__PURE__ */ jsx6(InlineText2, { block, name: "linkLabel", fallback: "Read the story" })
|
|
2249
2376
|
] })
|
|
2250
2377
|
] });
|
|
2251
2378
|
}
|
|
@@ -2253,42 +2380,42 @@ function BrandedAnnouncementBlock(props) {
|
|
|
2253
2380
|
const message = text3(props, "message", "");
|
|
2254
2381
|
const href = safeHref2(props.href);
|
|
2255
2382
|
if (!message) return null;
|
|
2256
|
-
return /* @__PURE__ */
|
|
2383
|
+
return /* @__PURE__ */ jsx6("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: href ? /* @__PURE__ */ jsx6("a", { href, style: { color: "inherit", textDecoration: "none" }, children: message }) : message });
|
|
2257
2384
|
}
|
|
2258
2385
|
function BrandedTrackingExperienceBlock(props) {
|
|
2259
|
-
return /* @__PURE__ */
|
|
2260
|
-
/* @__PURE__ */
|
|
2261
|
-
/* @__PURE__ */
|
|
2386
|
+
return /* @__PURE__ */ jsxs6("section", { "aria-label": "Branded tracking experience", style: { background: "#fffdf0", fontFamily: "var(--pb-font-family)" }, children: [
|
|
2387
|
+
/* @__PURE__ */ jsx6(ShipmentSwitcher, { shipmentLabels: props.shipmentLabels }),
|
|
2388
|
+
/* @__PURE__ */ jsx6(QueryHero, { ...props })
|
|
2262
2389
|
] });
|
|
2263
2390
|
}
|
|
2264
2391
|
function BrandedQueryBlock(props) {
|
|
2265
|
-
return /* @__PURE__ */
|
|
2266
|
-
/* @__PURE__ */
|
|
2267
|
-
/* @__PURE__ */
|
|
2392
|
+
return /* @__PURE__ */ jsxs6("section", { "aria-label": "Branded tracking query", style: { background: "#fffdf0", fontFamily: "var(--pb-font-family)" }, children: [
|
|
2393
|
+
/* @__PURE__ */ jsx6(ShipmentSwitcher, { shipmentLabels: props.shipmentLabels }),
|
|
2394
|
+
/* @__PURE__ */ jsx6(QueryHero, { ...props })
|
|
2268
2395
|
] });
|
|
2269
2396
|
}
|
|
2270
2397
|
function BrandedOrderItemsBlock(props) {
|
|
2271
2398
|
const runtime = useBrandedRuntime();
|
|
2272
2399
|
const items = runtime.displayedResult?.orderItems ?? [];
|
|
2273
2400
|
const title = text3(props, "heading", "What's Inside");
|
|
2274
|
-
return /* @__PURE__ */
|
|
2275
|
-
/* @__PURE__ */
|
|
2401
|
+
return /* @__PURE__ */ jsx6("section", { "aria-label": title, style: { background: "#fffdf0", color: "#0a0a0a", fontFamily: "var(--pb-font-family)", padding: "clamp(28px, 4vw, 48px) 0" }, children: /* @__PURE__ */ jsxs6("div", { style: contentWidth2, children: [
|
|
2402
|
+
/* @__PURE__ */ jsxs6("h2", { style: { margin: "0 0 20px", fontSize: 20 }, children: [
|
|
2276
2403
|
title,
|
|
2277
2404
|
runtime.phase === "success" ? " (" + items.length + ")" : ""
|
|
2278
2405
|
] }),
|
|
2279
|
-
runtime.phase === "success" ? /* @__PURE__ */
|
|
2406
|
+
runtime.phase === "success" ? /* @__PURE__ */ jsx6(PackageContents2, { items }) : /* @__PURE__ */ jsx6("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." })
|
|
2280
2407
|
] }) });
|
|
2281
2408
|
}
|
|
2282
2409
|
function RecommendationCard({ item }) {
|
|
2283
2410
|
const href = safeHref2(item.href);
|
|
2284
2411
|
const price = item.price ? formatTrackingPageMoney(item.price) : void 0;
|
|
2285
|
-
return /* @__PURE__ */
|
|
2286
|
-
/* @__PURE__ */
|
|
2287
|
-
/* @__PURE__ */
|
|
2288
|
-
/* @__PURE__ */
|
|
2289
|
-
price?.amount ? /* @__PURE__ */
|
|
2290
|
-
/* @__PURE__ */
|
|
2291
|
-
!href ? /* @__PURE__ */
|
|
2412
|
+
return /* @__PURE__ */ jsxs6("article", { style: { overflow: "hidden", borderRadius: 6, background: "#fff", boxShadow: "0 1px 2px rgb(0 0 0 / 8%)" }, children: [
|
|
2413
|
+
/* @__PURE__ */ jsx6(ProductImage2, { src: item.imageUrl, alt: item.title }),
|
|
2414
|
+
/* @__PURE__ */ jsxs6("div", { style: { padding: 14 }, children: [
|
|
2415
|
+
/* @__PURE__ */ jsx6("strong", { children: item.title }),
|
|
2416
|
+
price?.amount ? /* @__PURE__ */ jsx6("p", { style: { margin: "6px 0", fontWeight: 700 }, children: price.amount }) : null,
|
|
2417
|
+
/* @__PURE__ */ jsx6("p", { style: { margin: "6px 0", color: "#6b6b6b", fontSize: 13 }, children: item.description }),
|
|
2418
|
+
!href ? /* @__PURE__ */ jsx6("span", { style: { color: "#6b6b6b", fontSize: 13, fontWeight: 700 }, children: "View product" }) : /* @__PURE__ */ jsx6("a", { href, style: { color: "#0a0a0a", fontSize: 13, fontWeight: 700 }, children: "View product" })
|
|
2292
2419
|
] })
|
|
2293
2420
|
] });
|
|
2294
2421
|
}
|
|
@@ -2297,32 +2424,32 @@ function BrandedRecommendationsBlock(props) {
|
|
|
2297
2424
|
const recommendations = runtime.displayedResult?.recommendations ?? [];
|
|
2298
2425
|
const title = text3(props, "heading", "You might also like");
|
|
2299
2426
|
if ((runtime.phase === "success" || runtime.phase === "empty") && !recommendations.length && text3(props, "hideWhenEmpty", "false") === "true") return null;
|
|
2300
|
-
return /* @__PURE__ */
|
|
2301
|
-
/* @__PURE__ */
|
|
2302
|
-
runtime.phase === "loading" ? /* @__PURE__ */
|
|
2427
|
+
return /* @__PURE__ */ jsx6("section", { "aria-label": title, style: { background: "#fffdf0", color: "#0a0a0a", fontFamily: "var(--pb-font-family)", padding: "clamp(28px, 4vw, 48px) 0" }, children: /* @__PURE__ */ jsxs6("div", { style: contentWidth2, children: [
|
|
2428
|
+
/* @__PURE__ */ jsx6("h2", { style: { margin: "0 0 24px", textAlign: "center", fontSize: 20 }, children: title }),
|
|
2429
|
+
runtime.phase === "loading" ? /* @__PURE__ */ jsx6("div", { "aria-label": "Loading recommendations", style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 16 }, children: [0, 1, 2].map((item) => /* @__PURE__ */ jsx6("span", { style: { display: "block", height: 220, borderRadius: 6, background: "#e7e7e7" } }, item)) }) : runtime.phase === "success" && recommendations.length ? /* @__PURE__ */ jsx6("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 16 }, children: recommendations.map((item) => /* @__PURE__ */ jsx6(RecommendationCard, { item }, item.id)) }) : /* @__PURE__ */ jsx6("p", { style: { margin: 0, textAlign: "center", color: runtime.phase === "error" ? "#b42318" : "#6b6b6b" }, children: runtime.phase === "error" ? "Recommendations are temporarily unavailable." : runtime.phase === "empty" ? "No recommendations are available for that number." : "Recommendations will appear with your order." })
|
|
2303
2430
|
] }) });
|
|
2304
2431
|
}
|
|
2305
2432
|
function BrandedQuickLinksBlock(props) {
|
|
2306
2433
|
const title = text3(props, "heading", "Need help?");
|
|
2307
2434
|
const primaryHref = safeHref2(props.primaryHref);
|
|
2308
2435
|
const secondaryHref = safeHref2(props.secondaryHref);
|
|
2309
|
-
return /* @__PURE__ */
|
|
2310
|
-
/* @__PURE__ */
|
|
2311
|
-
/* @__PURE__ */
|
|
2312
|
-
primaryHref ? /* @__PURE__ */
|
|
2313
|
-
secondaryHref ? /* @__PURE__ */
|
|
2436
|
+
return /* @__PURE__ */ jsxs6("section", { "aria-label": title, style: { ...cardStyle, margin: "24px auto", maxWidth: 1200, padding: 24 }, children: [
|
|
2437
|
+
/* @__PURE__ */ jsx6("h2", { children: title }),
|
|
2438
|
+
/* @__PURE__ */ jsxs6("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: 16 }, children: [
|
|
2439
|
+
primaryHref ? /* @__PURE__ */ jsx6("a", { href: primaryHref, style: { color: "#0a0a0a" }, children: text3(props, "primaryLabel", "Shipping help") }) : /* @__PURE__ */ jsx6("span", { children: text3(props, "primaryLabel", "Shipping help") }),
|
|
2440
|
+
secondaryHref ? /* @__PURE__ */ jsx6("a", { href: secondaryHref, style: { color: "#0a0a0a" }, children: text3(props, "secondaryLabel", "Contact us") }) : /* @__PURE__ */ jsx6("span", { children: text3(props, "secondaryLabel", "Contact us") })
|
|
2314
2441
|
] })
|
|
2315
2442
|
] });
|
|
2316
2443
|
}
|
|
2317
2444
|
function BrandedBlogBlock(props) {
|
|
2318
2445
|
const title = text3(props, "heading", "From our journal");
|
|
2319
2446
|
const href = safeHref2(props.articleHref);
|
|
2320
|
-
return /* @__PURE__ */
|
|
2321
|
-
/* @__PURE__ */
|
|
2322
|
-
/* @__PURE__ */
|
|
2323
|
-
/* @__PURE__ */
|
|
2324
|
-
/* @__PURE__ */
|
|
2325
|
-
href ? /* @__PURE__ */
|
|
2447
|
+
return /* @__PURE__ */ jsxs6("section", { "aria-label": title, style: { ...cardStyle, margin: "24px auto", maxWidth: 1200, padding: 24 }, children: [
|
|
2448
|
+
/* @__PURE__ */ jsx6("h2", { children: title }),
|
|
2449
|
+
/* @__PURE__ */ jsxs6("article", { children: [
|
|
2450
|
+
/* @__PURE__ */ jsx6("strong", { children: text3(props, "articleTitle", "Delivery tips for every season") }),
|
|
2451
|
+
/* @__PURE__ */ jsx6("p", { children: text3(props, "excerpt", "Simple ways to make every delivery feel considered.") }),
|
|
2452
|
+
href ? /* @__PURE__ */ jsx6("a", { href, style: { color: "#0a0a0a" }, children: text3(props, "linkLabel", "Read the story") }) : /* @__PURE__ */ jsx6("span", { children: text3(props, "linkLabel", "Read the story") })
|
|
2326
2453
|
] })
|
|
2327
2454
|
] });
|
|
2328
2455
|
}
|
|
@@ -2360,7 +2487,7 @@ import { createPageDocument as createPageDocument3 } from "@standhigher/puck-pag
|
|
|
2360
2487
|
|
|
2361
2488
|
// src/sales.tsx
|
|
2362
2489
|
import { createContext as createContext3, useCallback as useCallback4, useContext as useContext3, useMemo as useMemo4, useRef as useRef4, useState as useState5 } from "react";
|
|
2363
|
-
import { Fragment as
|
|
2490
|
+
import { Fragment as Fragment5, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
2364
2491
|
var initialRuntime3 = { phase: "idle", async query() {
|
|
2365
2492
|
return void 0;
|
|
2366
2493
|
} };
|
|
@@ -2386,13 +2513,13 @@ function SalesRuntimeProvider({ children, query: injectedQuery, watermark, resou
|
|
|
2386
2513
|
}
|
|
2387
2514
|
}, [injectedQuery]);
|
|
2388
2515
|
const value = useMemo4(() => ({ ...state, query, watermark, resourceResolution }), [query, resourceResolution, state, watermark]);
|
|
2389
|
-
return /* @__PURE__ */
|
|
2516
|
+
return /* @__PURE__ */ jsx7(SalesRuntimeContext.Provider, { value, children });
|
|
2390
2517
|
}
|
|
2391
2518
|
function useSalesRuntime() {
|
|
2392
2519
|
return useContext3(SalesRuntimeContext);
|
|
2393
2520
|
}
|
|
2394
2521
|
function RuntimeWatermark3({ watermark }) {
|
|
2395
|
-
return watermark?.visible ? /* @__PURE__ */
|
|
2522
|
+
return watermark?.visible ? /* @__PURE__ */ jsx7("small", { style: { display: "block", marginTop: 14, color: "var(--pb-color-muted)", fontSize: 11, textAlign: "right" }, children: watermark.label || "Powered by BestTrack" }) : null;
|
|
2396
2523
|
}
|
|
2397
2524
|
function text5(props, key, fallback) {
|
|
2398
2525
|
const value = props[key];
|
|
@@ -2401,28 +2528,28 @@ function text5(props, key, fallback) {
|
|
|
2401
2528
|
var safeHref3 = safeTrackingPageUrl;
|
|
2402
2529
|
var safeImageUrl3 = safeTrackingPageUrl;
|
|
2403
2530
|
function Status({ children, alert = false }) {
|
|
2404
|
-
return /* @__PURE__ */
|
|
2531
|
+
return /* @__PURE__ */ jsx7("p", { role: alert ? "alert" : "status", "aria-live": alert ? "assertive" : "polite", style: { margin: "16px 0 0", color: alert ? "#a61b1b" : "var(--pb-color-muted)" }, children });
|
|
2405
2532
|
}
|
|
2406
2533
|
function Section({ title, children, busy = false }) {
|
|
2407
|
-
return /* @__PURE__ */
|
|
2408
|
-
/* @__PURE__ */
|
|
2534
|
+
return /* @__PURE__ */ jsx7("section", { "aria-label": title, "aria-busy": busy || void 0, style: sectionStyle, children: /* @__PURE__ */ jsxs7("div", { style: panelStyle, children: [
|
|
2535
|
+
/* @__PURE__ */ jsx7("h2", { style: { margin: "0 0 20px", fontSize: "clamp(24px, 3vw, 34px)", lineHeight: 1.15 }, children: title }),
|
|
2409
2536
|
children
|
|
2410
2537
|
] }) });
|
|
2411
2538
|
}
|
|
2412
2539
|
function ProductImage3({ src, alt }) {
|
|
2413
2540
|
const [failed, setFailed] = useState5(false);
|
|
2414
2541
|
const safeSrc = safeImageUrl3(src);
|
|
2415
|
-
if (!safeSrc || failed) return /* @__PURE__ */
|
|
2416
|
-
return /* @__PURE__ */
|
|
2542
|
+
if (!safeSrc || failed) return /* @__PURE__ */ jsx7("span", { "aria-label": `${alt} image unavailable`, role: "img", style: { display: "grid", placeItems: "center", width: 76, height: 76, flex: "0 0 auto", border: "1px solid var(--pb-color-border)", borderRadius: "calc(var(--pb-radius) / 1.5)", background: "var(--pb-color-background)", color: "var(--pb-color-muted)", fontWeight: 700 }, children: alt.slice(0, 1).toUpperCase() });
|
|
2543
|
+
return /* @__PURE__ */ jsx7("img", { src: safeSrc, alt, onError: () => setFailed(true), style: { width: 76, height: 76, flex: "0 0 auto", borderRadius: "calc(var(--pb-radius) / 1.5)", objectFit: "cover", background: "var(--pb-color-background)" } });
|
|
2417
2544
|
}
|
|
2418
2545
|
function HeroAsset({ src }) {
|
|
2419
2546
|
const [failed, setFailed] = useState5(false);
|
|
2420
2547
|
const safeSrc = safeImageUrl3(src);
|
|
2421
2548
|
if (!safeSrc || failed) return null;
|
|
2422
|
-
return /* @__PURE__ */
|
|
2549
|
+
return /* @__PURE__ */ jsx7("img", { "data-sales-hero-image": true, src: safeSrc, alt: "", "aria-hidden": "true", onError: () => setFailed(true), style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.62 } });
|
|
2423
2550
|
}
|
|
2424
2551
|
function SalesTextField({ value, onChange }) {
|
|
2425
|
-
return /* @__PURE__ */
|
|
2552
|
+
return /* @__PURE__ */ jsx7("input", { "aria-label": "Sales text", value: typeof value === "string" ? value : "", onChange: (event) => onChange(event.target.value) });
|
|
2426
2553
|
}
|
|
2427
2554
|
var editorSurfaceStyle = { boxSizing: "border-box", border: "1px solid #dfddd7", borderRadius: 10, padding: 24, background: "#ffffff", color: "#0a0a0a", fontFamily: "Arial, Helvetica, sans-serif" };
|
|
2428
2555
|
var editorCardStyle = { boxSizing: "border-box", padding: 18, border: "1px solid #dfddd7", borderRadius: 7, background: "#f7f5f0" };
|
|
@@ -2431,8 +2558,8 @@ function editorText(block, name, fallback) {
|
|
|
2431
2558
|
}
|
|
2432
2559
|
function SalesInlineText({ block, name, fallback, style }) {
|
|
2433
2560
|
const value = editorText(block, name, fallback);
|
|
2434
|
-
if (!block.selected) return /* @__PURE__ */
|
|
2435
|
-
return /* @__PURE__ */
|
|
2561
|
+
if (!block.selected) return /* @__PURE__ */ jsx7("span", { "data-sales-editor-field": name, style, children: value });
|
|
2562
|
+
return /* @__PURE__ */ jsx7("input", { "aria-label": `Canvas ${name}`, "data-sales-editor-field": name, value, onMouseDown: (event) => event.stopPropagation(), onClick: (event) => event.stopPropagation(), onChange: (event) => block.onPropsChange({ [name]: event.currentTarget.value }), style: {
|
|
2436
2563
|
boxSizing: "border-box",
|
|
2437
2564
|
width: "100%",
|
|
2438
2565
|
/* border: "1px dashed currentColor", */
|
|
@@ -2449,95 +2576,95 @@ function SalesInlineText({ block, name, fallback, style }) {
|
|
|
2449
2576
|
} });
|
|
2450
2577
|
}
|
|
2451
2578
|
function SalesEditorSurface({ block, children }) {
|
|
2452
|
-
return /* @__PURE__ */
|
|
2579
|
+
return /* @__PURE__ */ jsx7("section", { "aria-label": "Sales editor preview", style: { ...editorSurfaceStyle, outline: block.selected ? "2px solid #2563eb" : void 0, outlineOffset: -2 }, children });
|
|
2453
2580
|
}
|
|
2454
2581
|
function SalesAnnouncementEditor(block) {
|
|
2455
|
-
return /* @__PURE__ */
|
|
2582
|
+
return /* @__PURE__ */ jsx7("section", { "aria-label": "Sales announcement editor", style: { display: "grid", minHeight: 38, placeItems: "center", boxSizing: "border-box", padding: "10px 16px", borderBottom: "1px solid #dfddd7", background: "#f7f5f0", color: "#0a0a0a", fontFamily: "Arial, Helvetica, sans-serif", fontSize: 13, fontWeight: 700, textAlign: "center" }, children: /* @__PURE__ */ jsx7(SalesInlineText, { block, name: "message", fallback: "Free delivery on orders over $50" }) });
|
|
2456
2583
|
}
|
|
2457
2584
|
function SalesQueryEditor(block) {
|
|
2458
2585
|
const imageUrl = safeImageUrl3(block.heroImageUrl);
|
|
2459
2586
|
const trackingNumber = editorText(block, "defaultTrackingNumber", "BT-2048-DEMO");
|
|
2460
|
-
return /* @__PURE__ */
|
|
2461
|
-
imageUrl ? /* @__PURE__ */
|
|
2462
|
-
/* @__PURE__ */
|
|
2463
|
-
/* @__PURE__ */
|
|
2464
|
-
/* @__PURE__ */
|
|
2465
|
-
/* @__PURE__ */
|
|
2466
|
-
/* @__PURE__ */
|
|
2467
|
-
/* @__PURE__ */
|
|
2587
|
+
return /* @__PURE__ */ jsxs7("section", { "aria-label": "Sales Hero query editor", style: { position: "relative", display: "grid", minHeight: "clamp(460px, 52vw, 620px)", placeItems: "center", boxSizing: "border-box", overflow: "hidden", padding: "clamp(28px, 6vw, 72px) 16px", background: "#0a0a0a", fontFamily: "Arial, Helvetica, sans-serif" }, children: [
|
|
2588
|
+
imageUrl ? /* @__PURE__ */ jsx7("img", { src: imageUrl, alt: "", "aria-hidden": "true", style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.62 } }) : null,
|
|
2589
|
+
/* @__PURE__ */ jsx7("div", { "aria-hidden": "true", style: { position: "absolute", inset: 0, background: "rgb(0 0 0 / 42%)" } }),
|
|
2590
|
+
/* @__PURE__ */ jsxs7("div", { style: { position: "relative", zIndex: 1, boxSizing: "border-box", width: "min(560px, 100%)", padding: "clamp(28px, 5vw, 48px)", borderRadius: 10, background: "#ffffff", color: "#0a0a0a", boxShadow: "0 20px 56px rgb(0 0 0 / 28%)" }, children: [
|
|
2591
|
+
/* @__PURE__ */ jsx7("h1", { style: { margin: "0 0 28px", fontSize: "clamp(32px, 5vw, 48px)", fontWeight: 800, letterSpacing: "-0.035em", lineHeight: 1.02, textAlign: "center" }, children: /* @__PURE__ */ jsx7(SalesInlineText, { block, name: "heading", fallback: "Track your order" }) }),
|
|
2592
|
+
/* @__PURE__ */ jsx7("input", { "aria-label": "Canvas default tracking number", readOnly: !block.selected, value: trackingNumber, onMouseDown: (event) => block.selected && event.stopPropagation(), onClick: (event) => block.selected && event.stopPropagation(), onChange: (event) => block.onPropsChange({ defaultTrackingNumber: event.currentTarget.value }), style: { boxSizing: "border-box", width: "100%", minHeight: 58, padding: "12px 16px", border: "1px solid #dfddd7", borderRadius: 8, background: "#ffffff", color: "#0a0a0a", font: "inherit", fontSize: 17 } }),
|
|
2593
|
+
/* @__PURE__ */ jsx7("div", { style: { display: "grid", minHeight: 58, placeItems: "center", marginTop: 14, padding: "12px 18px", borderRadius: 8, background: "#0a0a0a", color: "#ffffff", fontSize: 16, fontWeight: 700 }, children: /* @__PURE__ */ jsx7(SalesInlineText, { block, name: "submitLabel", fallback: "Track order" }) }),
|
|
2594
|
+
/* @__PURE__ */ jsx7("small", { style: { display: "block", marginTop: 14, color: "#6b6b6b", fontSize: 11, textAlign: "right" }, children: "Powered by BestTrack" })
|
|
2468
2595
|
] })
|
|
2469
2596
|
] });
|
|
2470
2597
|
}
|
|
2471
2598
|
function SalesOrderItemsEditor(block) {
|
|
2472
|
-
return /* @__PURE__ */
|
|
2473
|
-
/* @__PURE__ */
|
|
2474
|
-
/* @__PURE__ */
|
|
2475
|
-
/* @__PURE__ */
|
|
2476
|
-
/* @__PURE__ */
|
|
2477
|
-
/* @__PURE__ */
|
|
2478
|
-
/* @__PURE__ */
|
|
2479
|
-
/* @__PURE__ */
|
|
2599
|
+
return /* @__PURE__ */ jsxs7(SalesEditorSurface, { block, children: [
|
|
2600
|
+
/* @__PURE__ */ jsx7("h2", { style: { margin: "0 0 20px" }, children: /* @__PURE__ */ jsx7(SalesInlineText, { block, name: "heading", fallback: "Items in your order" }) }),
|
|
2601
|
+
/* @__PURE__ */ jsxs7("article", { style: { ...editorCardStyle, display: "flex", alignItems: "center", gap: 14 }, children: [
|
|
2602
|
+
/* @__PURE__ */ jsx7("span", { "aria-hidden": "true", style: { width: 68, height: 68, borderRadius: 7, background: "#dfddd7" } }),
|
|
2603
|
+
/* @__PURE__ */ jsxs7("span", { children: [
|
|
2604
|
+
/* @__PURE__ */ jsx7("strong", { children: "Order item" }),
|
|
2605
|
+
/* @__PURE__ */ jsx7("br", {}),
|
|
2606
|
+
/* @__PURE__ */ jsx7("small", { style: { color: "#6b6b6b" }, children: "Items appear after a successful tracking query." })
|
|
2480
2607
|
] })
|
|
2481
2608
|
] })
|
|
2482
2609
|
] });
|
|
2483
2610
|
}
|
|
2484
2611
|
function SalesOtherTrackingEditor(block) {
|
|
2485
|
-
return /* @__PURE__ */
|
|
2486
|
-
/* @__PURE__ */
|
|
2487
|
-
/* @__PURE__ */
|
|
2612
|
+
return /* @__PURE__ */ jsxs7(SalesEditorSurface, { block, children: [
|
|
2613
|
+
/* @__PURE__ */ jsx7("h2", { style: { margin: "0 0 20px" }, children: /* @__PURE__ */ jsx7(SalesInlineText, { block, name: "heading", fallback: "Other shipments" }) }),
|
|
2614
|
+
/* @__PURE__ */ jsx7("p", { style: { margin: 0, color: "#6b6b6b" }, children: /* @__PURE__ */ jsx7(SalesInlineText, { block, name: "emptyMessage", fallback: "No other shipments are linked to this order." }) })
|
|
2488
2615
|
] });
|
|
2489
2616
|
}
|
|
2490
2617
|
function SalesServiceCardsEditor(block) {
|
|
2491
|
-
return /* @__PURE__ */
|
|
2492
|
-
/* @__PURE__ */
|
|
2493
|
-
/* @__PURE__ */
|
|
2494
|
-
/* @__PURE__ */
|
|
2495
|
-
/* @__PURE__ */
|
|
2496
|
-
/* @__PURE__ */
|
|
2618
|
+
return /* @__PURE__ */ jsxs7(SalesEditorSurface, { block, children: [
|
|
2619
|
+
/* @__PURE__ */ jsx7("h2", { style: { margin: "0 0 20px" }, children: /* @__PURE__ */ jsx7(SalesInlineText, { block, name: "heading", fallback: "Shop with confidence" }) }),
|
|
2620
|
+
/* @__PURE__ */ jsxs7("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 180px), 1fr))", gap: 14 }, children: [
|
|
2621
|
+
/* @__PURE__ */ jsxs7("article", { style: editorCardStyle, children: [
|
|
2622
|
+
/* @__PURE__ */ jsx7("strong", { children: /* @__PURE__ */ jsx7(SalesInlineText, { block, name: "firstTitle", fallback: "Easy returns" }) }),
|
|
2623
|
+
/* @__PURE__ */ jsx7("p", { style: { marginBottom: 0, color: "#6b6b6b" }, children: /* @__PURE__ */ jsx7(SalesInlineText, { block, name: "firstDescription", fallback: "Simple support when plans change." }) })
|
|
2497
2624
|
] }),
|
|
2498
|
-
/* @__PURE__ */
|
|
2499
|
-
/* @__PURE__ */
|
|
2500
|
-
/* @__PURE__ */
|
|
2625
|
+
/* @__PURE__ */ jsxs7("article", { style: editorCardStyle, children: [
|
|
2626
|
+
/* @__PURE__ */ jsx7("strong", { children: /* @__PURE__ */ jsx7(SalesInlineText, { block, name: "secondTitle", fallback: "Secure delivery" }) }),
|
|
2627
|
+
/* @__PURE__ */ jsx7("p", { style: { marginBottom: 0, color: "#6b6b6b" }, children: /* @__PURE__ */ jsx7(SalesInlineText, { block, name: "secondDescription", fallback: "Follow every milestone in one place." }) })
|
|
2501
2628
|
] })
|
|
2502
2629
|
] })
|
|
2503
2630
|
] });
|
|
2504
2631
|
}
|
|
2505
2632
|
function SalesProductCategoriesEditor(block) {
|
|
2506
2633
|
const collection = isShopifyResourceReference(block.collection, "collection") ? block.collection : void 0;
|
|
2507
|
-
return /* @__PURE__ */
|
|
2508
|
-
/* @__PURE__ */
|
|
2509
|
-
/* @__PURE__ */
|
|
2510
|
-
/* @__PURE__ */
|
|
2511
|
-
/* @__PURE__ */
|
|
2634
|
+
return /* @__PURE__ */ jsxs7(SalesEditorSurface, { block, children: [
|
|
2635
|
+
/* @__PURE__ */ jsx7("h2", { style: { margin: "0 0 20px" }, children: /* @__PURE__ */ jsx7(SalesInlineText, { block, name: "heading", fallback: "Shop by category" }) }),
|
|
2636
|
+
/* @__PURE__ */ jsxs7("div", { style: { ...editorCardStyle, display: "flex", justifyContent: "space-between", fontWeight: 700 }, children: [
|
|
2637
|
+
/* @__PURE__ */ jsx7("span", { children: collection?.title ?? "Choose a collection in the inspector" }),
|
|
2638
|
+
/* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\u2192" })
|
|
2512
2639
|
] })
|
|
2513
2640
|
] });
|
|
2514
2641
|
}
|
|
2515
2642
|
function SalesFeaturedProductEditor(block) {
|
|
2516
2643
|
const product = isShopifyResourceReference(block.product, "product") ? block.product : void 0;
|
|
2517
|
-
return /* @__PURE__ */
|
|
2518
|
-
/* @__PURE__ */
|
|
2519
|
-
/* @__PURE__ */
|
|
2520
|
-
/* @__PURE__ */
|
|
2521
|
-
/* @__PURE__ */
|
|
2644
|
+
return /* @__PURE__ */ jsxs7(SalesEditorSurface, { block, children: [
|
|
2645
|
+
/* @__PURE__ */ jsx7("h2", { style: { margin: "0 0 20px" }, children: /* @__PURE__ */ jsx7(SalesInlineText, { block, name: "heading", fallback: "Featured product" }) }),
|
|
2646
|
+
/* @__PURE__ */ jsxs7("div", { style: { ...editorCardStyle, display: "flex", justifyContent: "space-between", fontWeight: 700 }, children: [
|
|
2647
|
+
/* @__PURE__ */ jsx7("span", { children: product?.title ?? "Choose a product in the inspector" }),
|
|
2648
|
+
/* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\u2192" })
|
|
2522
2649
|
] }),
|
|
2523
|
-
/* @__PURE__ */
|
|
2650
|
+
/* @__PURE__ */ jsx7("small", { style: { display: "block", marginTop: 10, color: "#6b6b6b" }, children: "Availability is supplied by the authorized runtime." })
|
|
2524
2651
|
] });
|
|
2525
2652
|
}
|
|
2526
2653
|
function SalesRecommendationsEditor(block) {
|
|
2527
|
-
return /* @__PURE__ */
|
|
2528
|
-
/* @__PURE__ */
|
|
2529
|
-
/* @__PURE__ */
|
|
2654
|
+
return /* @__PURE__ */ jsxs7(SalesEditorSurface, { block, children: [
|
|
2655
|
+
/* @__PURE__ */ jsx7("h2", { style: { margin: "0 0 20px" }, children: /* @__PURE__ */ jsx7(SalesInlineText, { block, name: "heading", fallback: "Complete your order" }) }),
|
|
2656
|
+
/* @__PURE__ */ jsx7("div", { style: { ...editorCardStyle, color: "#6b6b6b" }, children: "Recommended products appear after a successful tracking query." })
|
|
2530
2657
|
] });
|
|
2531
2658
|
}
|
|
2532
2659
|
function SalesAnnouncementBlock(props) {
|
|
2533
|
-
return /* @__PURE__ */
|
|
2660
|
+
return /* @__PURE__ */ jsx7("section", { "aria-label": "Sales announcement", "data-sales-announcement": true, style: { display: "grid", minHeight: 38, placeItems: "center", boxSizing: "border-box", padding: "10px 16px", borderBottom: "1px solid var(--pb-color-border)", background: "var(--pb-color-background)", color: "var(--pb-color-text)", fontFamily: "var(--pb-font-family)", fontSize: 13, textAlign: "center" }, children: /* @__PURE__ */ jsx7("strong", { children: text5(props, "message", "Free delivery on orders over $50") }) });
|
|
2534
2661
|
}
|
|
2535
2662
|
function SalesQueryBlock(props) {
|
|
2536
2663
|
const runtime = useSalesRuntime();
|
|
2537
|
-
return /* @__PURE__ */
|
|
2538
|
-
/* @__PURE__ */
|
|
2539
|
-
/* @__PURE__ */
|
|
2540
|
-
/* @__PURE__ */
|
|
2664
|
+
return /* @__PURE__ */ jsxs7("section", { "aria-label": "Sales tracking query", "aria-busy": runtime.phase === "loading" || void 0, "data-sales-hero": true, style: { position: "relative", display: "grid", minHeight: "clamp(460px, 52vw, 620px)", boxSizing: "border-box", overflow: "hidden", padding: "clamp(28px, 6vw, 72px) 16px", background: "var(--pb-color-text)", color: "var(--pb-color-surface)", fontFamily: "var(--pb-font-family)" }, children: [
|
|
2665
|
+
/* @__PURE__ */ jsx7(HeroAsset, { src: props.heroImageUrl }),
|
|
2666
|
+
/* @__PURE__ */ jsx7("div", { "aria-hidden": "true", style: { position: "absolute", inset: 0, background: "rgb(0 0 0 / 42%)" } }),
|
|
2667
|
+
/* @__PURE__ */ jsx7("div", { style: { ...contentWidth3, position: "relative", zIndex: 1, display: "grid", alignItems: "center", width: "100%", minWidth: 0 }, children: /* @__PURE__ */ jsx7(
|
|
2541
2668
|
TrackingQueryCard,
|
|
2542
2669
|
{
|
|
2543
2670
|
phase: runtime.phase,
|
|
@@ -2546,8 +2673,6 @@ function SalesQueryBlock(props) {
|
|
|
2546
2673
|
submitLabel: text5(props, "submitLabel", "Track order"),
|
|
2547
2674
|
initialTrackingNumber: text5(props, "defaultTrackingNumber", "BT-2048-DEMO"),
|
|
2548
2675
|
initialOrderNumber: text5(props, "defaultOrderNumber", ""),
|
|
2549
|
-
loadingLabel: "Checking...",
|
|
2550
|
-
loadingMessage: "Checking your order\u2026",
|
|
2551
2676
|
emptyMessage: "We couldn\u2019t find an order for that number.",
|
|
2552
2677
|
errorMessage: "We couldn\u2019t retrieve this order right now. Please try again later.",
|
|
2553
2678
|
trackingInputLabel: "Sales tracking number",
|
|
@@ -2562,9 +2687,9 @@ function SalesQueryBlock(props) {
|
|
|
2562
2687
|
formStyle: { gap: 14 },
|
|
2563
2688
|
inputStyle: { boxSizing: "border-box", width: "100%", minHeight: 58, padding: "12px 16px", border: "1px solid var(--pb-color-border)", borderRadius: "calc(var(--pb-radius) / 1.25)", background: "var(--pb-color-surface)", color: "var(--pb-color-text)", font: "inherit", fontSize: 17 },
|
|
2564
2689
|
submitStyle: (loading) => ({ width: "100%", minHeight: 58, padding: "12px 18px", border: 0, borderRadius: "calc(var(--pb-radius) / 1.25)", background: loading ? "#64748b" : "var(--pb-color-text)", color: "var(--pb-color-surface)", font: "inherit", fontSize: 16, fontWeight: 700, cursor: loading ? "wait" : "pointer" }),
|
|
2565
|
-
result: runtime.result ? /* @__PURE__ */
|
|
2690
|
+
result: runtime.result ? /* @__PURE__ */ jsx7(TrackingQueryResultDetails, { result: runtime.result }) : null,
|
|
2566
2691
|
resultStyle: { padding: 16, border: "1px solid var(--pb-color-border)", borderRadius: "calc(var(--pb-radius) / 1.25)", background: "var(--pb-color-background)" },
|
|
2567
|
-
watermark: /* @__PURE__ */
|
|
2692
|
+
watermark: /* @__PURE__ */ jsx7(RuntimeWatermark3, { watermark: runtime.watermark })
|
|
2568
2693
|
}
|
|
2569
2694
|
) })
|
|
2570
2695
|
] });
|
|
@@ -2573,114 +2698,114 @@ function SalesOrderItemsBlock(props) {
|
|
|
2573
2698
|
const runtime = useSalesRuntime();
|
|
2574
2699
|
const title = text5(props, "heading", "Items in your order");
|
|
2575
2700
|
const items = runtime.result?.orderItems ?? [];
|
|
2576
|
-
return /* @__PURE__ */
|
|
2701
|
+
return /* @__PURE__ */ jsx7(Section, { title, busy: runtime.phase === "loading", children: runtime.phase === "error" ? /* @__PURE__ */ jsx7(Status, { alert: true, children: "Order items are temporarily unavailable." }) : runtime.phase === "empty" ? /* @__PURE__ */ jsx7(Status, { children: "No order items are available for that number." }) : runtime.phase === "success" && items.length ? /* @__PURE__ */ jsx7("ul", { style: { display: "grid", gap: 12, margin: 0, padding: 0, listStyle: "none" }, children: items.map((item) => {
|
|
2577
2702
|
const href = safeHref3(item.href);
|
|
2578
2703
|
const itemTitle = text5(item, "title", "Order item");
|
|
2579
|
-
const itemContent = href ? /* @__PURE__ */
|
|
2580
|
-
return /* @__PURE__ */
|
|
2581
|
-
/* @__PURE__ */
|
|
2582
|
-
/* @__PURE__ */
|
|
2583
|
-
/* @__PURE__ */
|
|
2584
|
-
/* @__PURE__ */
|
|
2585
|
-
/* @__PURE__ */
|
|
2704
|
+
const itemContent = href ? /* @__PURE__ */ jsx7("a", { href, style: { color: "inherit" }, children: itemTitle }) : itemTitle;
|
|
2705
|
+
return /* @__PURE__ */ jsxs7("li", { style: { display: "flex", alignItems: "center", gap: 16, minWidth: 0, padding: 14, border: "1px solid var(--pb-color-border)", borderRadius: "calc(var(--pb-radius) / 1.5)", background: "var(--pb-color-background)" }, children: [
|
|
2706
|
+
/* @__PURE__ */ jsx7(ProductImage3, { src: item.imageUrl, alt: itemTitle }),
|
|
2707
|
+
/* @__PURE__ */ jsxs7("span", { style: { minWidth: 0 }, children: [
|
|
2708
|
+
/* @__PURE__ */ jsx7("strong", { children: itemContent }),
|
|
2709
|
+
/* @__PURE__ */ jsx7("br", {}),
|
|
2710
|
+
/* @__PURE__ */ jsxs7("small", { style: { color: "var(--pb-color-muted)" }, children: [
|
|
2586
2711
|
"Qty ",
|
|
2587
2712
|
Number.isFinite(item.quantity) && item.quantity > 0 ? item.quantity : 1
|
|
2588
2713
|
] }),
|
|
2589
|
-
item.description ? /* @__PURE__ */
|
|
2590
|
-
/* @__PURE__ */
|
|
2591
|
-
/* @__PURE__ */
|
|
2714
|
+
item.description ? /* @__PURE__ */ jsxs7(Fragment5, { children: [
|
|
2715
|
+
/* @__PURE__ */ jsx7("br", {}),
|
|
2716
|
+
/* @__PURE__ */ jsx7("small", { style: { color: "var(--pb-color-muted)" }, children: item.description })
|
|
2592
2717
|
] }) : null
|
|
2593
2718
|
] })
|
|
2594
2719
|
] }, item.id);
|
|
2595
|
-
}) }) : /* @__PURE__ */
|
|
2720
|
+
}) }) : /* @__PURE__ */ jsx7(Status, { children: runtime.phase === "loading" ? "Loading order items\u2026" : "Order items appear after a successful query." }) });
|
|
2596
2721
|
}
|
|
2597
2722
|
function SalesOtherTrackingBlock(props) {
|
|
2598
2723
|
const runtime = useSalesRuntime();
|
|
2599
2724
|
const title = text5(props, "heading", "Other shipments");
|
|
2600
2725
|
const shipments = (runtime.result?.shipments ?? []).filter((shipment) => shipment.trackingNumber !== runtime.result?.trackingNumber);
|
|
2601
|
-
return /* @__PURE__ */
|
|
2602
|
-
/* @__PURE__ */
|
|
2603
|
-
shipment.status ? /* @__PURE__ */
|
|
2604
|
-
shipment.trackingNumber ? /* @__PURE__ */
|
|
2605
|
-
] }, shipment.id)) }) : runtime.phase === "success" ? /* @__PURE__ */
|
|
2726
|
+
return /* @__PURE__ */ jsx7(Section, { title, busy: runtime.phase === "loading", children: runtime.phase === "error" ? /* @__PURE__ */ jsx7(Status, { alert: true, children: "Additional shipments are unavailable." }) : runtime.phase === "empty" ? /* @__PURE__ */ jsx7(Status, { children: "No additional shipments are available for that number." }) : runtime.phase === "success" && shipments.length ? /* @__PURE__ */ jsx7("ul", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 220px), 1fr))", gap: 12, margin: 0, padding: 0, listStyle: "none" }, children: shipments.map((shipment) => /* @__PURE__ */ jsxs7("li", { style: { padding: 16, border: "1px solid var(--pb-color-border)", borderRadius: "calc(var(--pb-radius) / 1.5)", background: "var(--pb-color-background)" }, children: [
|
|
2727
|
+
/* @__PURE__ */ jsx7("strong", { children: text5(shipment, "label", "Shipment") }),
|
|
2728
|
+
shipment.status ? /* @__PURE__ */ jsx7("p", { style: { margin: "8px 0 0", color: "var(--pb-color-muted)" }, children: shipment.status }) : null,
|
|
2729
|
+
shipment.trackingNumber ? /* @__PURE__ */ jsx7("small", { style: { display: "block", marginTop: 8, color: "var(--pb-color-muted)" }, children: shipment.trackingNumber }) : null
|
|
2730
|
+
] }, shipment.id)) }) : runtime.phase === "success" ? /* @__PURE__ */ jsx7(Status, { children: text5(props, "emptyMessage", "No other shipments are linked to this order.") }) : /* @__PURE__ */ jsx7(Status, { children: runtime.phase === "loading" ? "Loading other shipments\u2026" : "Other tracking numbers appear with your order result." }) });
|
|
2606
2731
|
}
|
|
2607
2732
|
function SalesServiceCardsBlock(props) {
|
|
2608
2733
|
const title = text5(props, "heading", "Shop with confidence");
|
|
2609
|
-
return /* @__PURE__ */
|
|
2610
|
-
/* @__PURE__ */
|
|
2611
|
-
/* @__PURE__ */
|
|
2612
|
-
/* @__PURE__ */
|
|
2734
|
+
return /* @__PURE__ */ jsx7(Section, { title, children: /* @__PURE__ */ jsxs7("div", { style: gridStyle, children: [
|
|
2735
|
+
/* @__PURE__ */ jsxs7("article", { style: { padding: 20, border: "1px solid var(--pb-color-border)", borderRadius: "calc(var(--pb-radius) / 1.5)", background: "var(--pb-color-background)" }, children: [
|
|
2736
|
+
/* @__PURE__ */ jsx7("strong", { children: text5(props, "firstTitle", "Easy returns") }),
|
|
2737
|
+
/* @__PURE__ */ jsx7("p", { style: { marginBottom: 0, color: "var(--pb-color-muted)" }, children: text5(props, "firstDescription", "Simple support when plans change.") })
|
|
2613
2738
|
] }),
|
|
2614
|
-
/* @__PURE__ */
|
|
2615
|
-
/* @__PURE__ */
|
|
2616
|
-
/* @__PURE__ */
|
|
2739
|
+
/* @__PURE__ */ jsxs7("article", { style: { padding: 20, border: "1px solid var(--pb-color-border)", borderRadius: "calc(var(--pb-radius) / 1.5)", background: "var(--pb-color-background)" }, children: [
|
|
2740
|
+
/* @__PURE__ */ jsx7("strong", { children: text5(props, "secondTitle", "Secure delivery") }),
|
|
2741
|
+
/* @__PURE__ */ jsx7("p", { style: { marginBottom: 0, color: "var(--pb-color-muted)" }, children: text5(props, "secondDescription", "Follow every milestone in one place.") })
|
|
2617
2742
|
] })
|
|
2618
2743
|
] }) });
|
|
2619
2744
|
}
|
|
2620
2745
|
function SalesProductCategoriesBlock(props) {
|
|
2621
2746
|
const title = text5(props, "heading", "Shop by category");
|
|
2622
2747
|
const runtime = useSalesRuntime();
|
|
2623
|
-
if (props.collection !== void 0 && props.collection !== null && !isShopifyResourceReference(props.collection, "collection")) return /* @__PURE__ */
|
|
2748
|
+
if (props.collection !== void 0 && props.collection !== null && !isShopifyResourceReference(props.collection, "collection")) return /* @__PURE__ */ jsx7(Section, { title, children: /* @__PURE__ */ jsx7(Status, { alert: true, children: "Collection reference is invalid." }) });
|
|
2624
2749
|
const collection = isShopifyResourceReference(props.collection, "collection") ? props.collection : void 0;
|
|
2625
|
-
if (!collection) return /* @__PURE__ */
|
|
2750
|
+
if (!collection) return /* @__PURE__ */ jsx7(Section, { title, children: /* @__PURE__ */ jsx7(Status, { children: "No collection selected. Choose a collection through an authorized resource integration." }) });
|
|
2626
2751
|
const resolved = getResolvedShopifyResource(collection, runtime.resourceResolution);
|
|
2627
2752
|
const error = getShopifyResourceResolutionError(collection, runtime.resourceResolution);
|
|
2628
|
-
if (error) return /* @__PURE__ */
|
|
2629
|
-
if (!resolved) return /* @__PURE__ */
|
|
2630
|
-
const content = /* @__PURE__ */
|
|
2631
|
-
/* @__PURE__ */
|
|
2632
|
-
/* @__PURE__ */
|
|
2753
|
+
if (error) return /* @__PURE__ */ jsx7(Section, { title, children: /* @__PURE__ */ jsx7(Status, { alert: true, children: error.code === "missing" ? "This collection is no longer available." : "Collection details are temporarily unavailable." }) });
|
|
2754
|
+
if (!resolved) return /* @__PURE__ */ jsx7(Section, { title, children: /* @__PURE__ */ jsx7(Status, { children: "Collection details are resolved by the authorized runtime." }) });
|
|
2755
|
+
const content = /* @__PURE__ */ jsxs7(Fragment5, { children: [
|
|
2756
|
+
/* @__PURE__ */ jsx7("span", { children: resolved.title }),
|
|
2757
|
+
/* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\u2192" })
|
|
2633
2758
|
] });
|
|
2634
2759
|
const style = { display: "flex", minHeight: 72, alignItems: "center", justifyContent: "space-between", gap: 16, padding: 18, border: "1px solid var(--pb-color-border)", borderRadius: "calc(var(--pb-radius) / 1.5)", background: "var(--pb-color-background)", color: "inherit", fontWeight: 700, textDecoration: "none" };
|
|
2635
|
-
return /* @__PURE__ */
|
|
2760
|
+
return /* @__PURE__ */ jsx7(Section, { title, children: resolved.href ? /* @__PURE__ */ jsx7("a", { href: resolved.href, style, children: content }) : /* @__PURE__ */ jsx7("div", { style, children: content }) });
|
|
2636
2761
|
}
|
|
2637
2762
|
function SalesFeaturedProductBlock(props) {
|
|
2638
2763
|
const runtime = useSalesRuntime();
|
|
2639
2764
|
const title = text5(props, "heading", "Featured product");
|
|
2640
|
-
if (props.product !== void 0 && props.product !== null && !isShopifyResourceReference(props.product, "product")) return /* @__PURE__ */
|
|
2765
|
+
if (props.product !== void 0 && props.product !== null && !isShopifyResourceReference(props.product, "product")) return /* @__PURE__ */ jsx7(Section, { title, children: /* @__PURE__ */ jsx7(Status, { alert: true, children: "Product reference is invalid." }) });
|
|
2641
2766
|
const product = isShopifyResourceReference(props.product, "product") ? props.product : void 0;
|
|
2642
|
-
if (!product) return /* @__PURE__ */
|
|
2767
|
+
if (!product) return /* @__PURE__ */ jsx7(Section, { title, children: /* @__PURE__ */ jsx7(Status, { children: "No product selected. Choose a product through an authorized resource integration." }) });
|
|
2643
2768
|
const resolved = getResolvedShopifyResource(product, runtime.resourceResolution);
|
|
2644
2769
|
const error = getShopifyResourceResolutionError(product, runtime.resourceResolution);
|
|
2645
|
-
if (error) return /* @__PURE__ */
|
|
2646
|
-
if (!resolved) return /* @__PURE__ */
|
|
2770
|
+
if (error) return /* @__PURE__ */ jsx7(Section, { title, children: /* @__PURE__ */ jsx7(Status, { alert: true, children: error.code === "missing" ? "This product is no longer available." : "Product details are temporarily unavailable." }) });
|
|
2771
|
+
if (!resolved) return /* @__PURE__ */ jsx7(Section, { title, children: /* @__PURE__ */ jsx7(Status, { children: "Product details and availability are resolved by the authorized runtime." }) });
|
|
2647
2772
|
const available = resolved.availability === "available";
|
|
2648
|
-
const body = /* @__PURE__ */
|
|
2649
|
-
/* @__PURE__ */
|
|
2650
|
-
/* @__PURE__ */
|
|
2651
|
-
/* @__PURE__ */
|
|
2652
|
-
/* @__PURE__ */
|
|
2653
|
-
/* @__PURE__ */
|
|
2773
|
+
const body = /* @__PURE__ */ jsxs7(Fragment5, { children: [
|
|
2774
|
+
/* @__PURE__ */ jsx7(ProductImage3, { src: resolved.imageUrl, alt: resolved.title }),
|
|
2775
|
+
/* @__PURE__ */ jsxs7("span", { style: { minWidth: 0, flex: 1 }, children: [
|
|
2776
|
+
/* @__PURE__ */ jsx7("strong", { children: resolved.title }),
|
|
2777
|
+
/* @__PURE__ */ jsx7("br", {}),
|
|
2778
|
+
/* @__PURE__ */ jsx7("small", { style: { color: "var(--pb-color-muted)" }, children: available ? "Available" : resolved.availability === "sold-out" ? "Sold out" : "Unavailable" })
|
|
2654
2779
|
] })
|
|
2655
2780
|
] });
|
|
2656
2781
|
const style = { display: "flex", alignItems: "center", gap: 16, padding: 14, border: "1px solid var(--pb-color-border)", borderRadius: "calc(var(--pb-radius) / 1.5)", background: "var(--pb-color-background)", color: "inherit", textDecoration: "none" };
|
|
2657
|
-
return /* @__PURE__ */
|
|
2782
|
+
return /* @__PURE__ */ jsx7(Section, { title, children: available && resolved.href ? /* @__PURE__ */ jsx7("a", { href: resolved.href, style, children: body }) : /* @__PURE__ */ jsx7("div", { style, children: body }) });
|
|
2658
2783
|
}
|
|
2659
2784
|
function SalesRecommendationsBlock(props) {
|
|
2660
2785
|
const runtime = useSalesRuntime();
|
|
2661
2786
|
const title = text5(props, "heading", "Complete your order");
|
|
2662
2787
|
const recommendations = runtime.result?.recommendations ?? [];
|
|
2663
|
-
return /* @__PURE__ */
|
|
2788
|
+
return /* @__PURE__ */ jsx7(Section, { title, busy: runtime.phase === "loading", children: runtime.phase === "error" ? /* @__PURE__ */ jsx7(Status, { alert: true, children: "Recommendations are temporarily unavailable." }) : runtime.phase === "empty" ? /* @__PURE__ */ jsx7(Status, { children: "No recommendations are available for that number." }) : runtime.phase === "success" && recommendations.length ? /* @__PURE__ */ jsx7("div", { style: gridStyle, children: recommendations.map((item) => {
|
|
2664
2789
|
const href = safeHref3(item.href);
|
|
2665
2790
|
const itemTitle = text5(item, "title", "Recommended product");
|
|
2666
2791
|
const price = item.price ? formatTrackingPageMoney(item.price) : void 0;
|
|
2667
|
-
return /* @__PURE__ */
|
|
2668
|
-
/* @__PURE__ */
|
|
2669
|
-
/* @__PURE__ */
|
|
2670
|
-
/* @__PURE__ */
|
|
2671
|
-
price?.amount ? /* @__PURE__ */
|
|
2672
|
-
item.description ? /* @__PURE__ */
|
|
2792
|
+
return /* @__PURE__ */ jsxs7("article", { style: { display: "grid", gap: 14, minWidth: 0, padding: 18, border: "1px solid var(--pb-color-border)", borderRadius: "calc(var(--pb-radius) / 1.5)", background: "var(--pb-color-background)" }, children: [
|
|
2793
|
+
/* @__PURE__ */ jsx7(ProductImage3, { src: item.imageUrl, alt: itemTitle }),
|
|
2794
|
+
/* @__PURE__ */ jsxs7("div", { children: [
|
|
2795
|
+
/* @__PURE__ */ jsx7("strong", { children: href ? /* @__PURE__ */ jsx7("a", { href, style: { color: "inherit" }, children: itemTitle }) : itemTitle }),
|
|
2796
|
+
price?.amount ? /* @__PURE__ */ jsx7("small", { style: { display: "block", marginTop: 5, color: "var(--pb-color-muted)" }, children: price.amount }) : null,
|
|
2797
|
+
item.description ? /* @__PURE__ */ jsx7("p", { style: { marginBottom: 0, color: "var(--pb-color-muted)" }, children: item.description }) : null
|
|
2673
2798
|
] })
|
|
2674
2799
|
] }, item.id);
|
|
2675
|
-
}) }) : /* @__PURE__ */
|
|
2800
|
+
}) }) : /* @__PURE__ */ jsx7(Status, { children: runtime.phase === "success" ? "No recommendations are available for this order." : runtime.phase === "loading" ? "Loading recommendations\u2026" : "Recommended products appear with your order result." }) });
|
|
2676
2801
|
}
|
|
2677
2802
|
|
|
2678
2803
|
// src/shopify-resources.tsx
|
|
2679
2804
|
import { createContext as createContext4, useCallback as useCallback5, useContext as useContext4, useState as useState6 } from "react";
|
|
2680
|
-
import { jsx as
|
|
2805
|
+
import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
2681
2806
|
var ShopifyResourceBrowserContext = createContext4(void 0);
|
|
2682
2807
|
function ShopifyResourcePickerProvider({ browser, children }) {
|
|
2683
|
-
return /* @__PURE__ */
|
|
2808
|
+
return /* @__PURE__ */ jsx8(ShopifyResourceBrowserContext.Provider, { value: browser, children });
|
|
2684
2809
|
}
|
|
2685
2810
|
var pickerSurface = { marginTop: 8, padding: 12, border: "1px solid #c9cccf", borderRadius: 8, background: "#fff", color: "#202223" };
|
|
2686
2811
|
var pickerButton = { minHeight: 32, padding: "6px 10px", border: "1px solid #8c9196", borderRadius: 6, background: "#fff", color: "#202223", font: "inherit", cursor: "pointer" };
|
|
@@ -2706,17 +2831,17 @@ function ResourceField({ value, onChange, kind }) {
|
|
|
2706
2831
|
}
|
|
2707
2832
|
}, [browser, kind]);
|
|
2708
2833
|
const name = kind === "product" ? "product" : "collection";
|
|
2709
|
-
return /* @__PURE__ */
|
|
2710
|
-
selected ? /* @__PURE__ */
|
|
2711
|
-
/* @__PURE__ */
|
|
2712
|
-
/* @__PURE__ */
|
|
2713
|
-
/* @__PURE__ */
|
|
2714
|
-
] }) : /* @__PURE__ */
|
|
2834
|
+
return /* @__PURE__ */ jsxs8("div", { "data-shopify-resource-field": kind, children: [
|
|
2835
|
+
selected ? /* @__PURE__ */ jsxs8("p", { style: { margin: "0 0 8px" }, children: [
|
|
2836
|
+
/* @__PURE__ */ jsx8("strong", { children: selected.title }),
|
|
2837
|
+
/* @__PURE__ */ jsx8("br", {}),
|
|
2838
|
+
/* @__PURE__ */ jsx8("small", { children: selected.id })
|
|
2839
|
+
] }) : /* @__PURE__ */ jsxs8("p", { style: { margin: "0 0 8px" }, children: [
|
|
2715
2840
|
"No ",
|
|
2716
2841
|
name,
|
|
2717
2842
|
" selected."
|
|
2718
2843
|
] }),
|
|
2719
|
-
/* @__PURE__ */
|
|
2844
|
+
/* @__PURE__ */ jsx8("button", { type: "button", style: pickerButton, onClick: () => {
|
|
2720
2845
|
if (open) {
|
|
2721
2846
|
setOpen(false);
|
|
2722
2847
|
return;
|
|
@@ -2725,41 +2850,41 @@ function ResourceField({ value, onChange, kind }) {
|
|
|
2725
2850
|
if (browser) void search("");
|
|
2726
2851
|
else setState("error");
|
|
2727
2852
|
}, children: open ? "Close selector" : `Select ${name}` }),
|
|
2728
|
-
open ? /* @__PURE__ */
|
|
2729
|
-
/* @__PURE__ */
|
|
2853
|
+
open ? /* @__PURE__ */ jsxs8("div", { role: "dialog", "aria-label": `Select Shopify ${name}`, style: pickerSurface, children: [
|
|
2854
|
+
/* @__PURE__ */ jsxs8("form", { onSubmit: (event) => {
|
|
2730
2855
|
event.preventDefault();
|
|
2731
2856
|
void search(query);
|
|
2732
2857
|
}, children: [
|
|
2733
|
-
/* @__PURE__ */
|
|
2858
|
+
/* @__PURE__ */ jsxs8("label", { style: { display: "block" }, children: [
|
|
2734
2859
|
"Search ",
|
|
2735
2860
|
name,
|
|
2736
2861
|
"s",
|
|
2737
|
-
/* @__PURE__ */
|
|
2862
|
+
/* @__PURE__ */ jsx8("input", { "aria-label": `Search ${name}s`, value: query, onChange: (event) => setQuery(event.currentTarget.value), style: { boxSizing: "border-box", display: "block", width: "100%", minHeight: 32, marginTop: 4, padding: "6px 8px" } })
|
|
2738
2863
|
] }),
|
|
2739
|
-
/* @__PURE__ */
|
|
2864
|
+
/* @__PURE__ */ jsx8("button", { type: "submit", disabled: state === "loading", style: { ...pickerButton, marginTop: 8 }, children: state === "loading" ? "Searching\u2026" : "Search" })
|
|
2740
2865
|
] }),
|
|
2741
|
-
state === "error" ? /* @__PURE__ */
|
|
2742
|
-
state === "idle" && !items.length ? /* @__PURE__ */
|
|
2866
|
+
state === "error" ? /* @__PURE__ */ jsx8("p", { role: "alert", children: "The authorized resource service is unavailable. Try again later." }) : null,
|
|
2867
|
+
state === "idle" && !items.length ? /* @__PURE__ */ jsxs8("p", { role: "status", children: [
|
|
2743
2868
|
"No ",
|
|
2744
2869
|
name,
|
|
2745
2870
|
"s found."
|
|
2746
2871
|
] }) : null,
|
|
2747
|
-
items.length ? /* @__PURE__ */
|
|
2872
|
+
items.length ? /* @__PURE__ */ jsx8("ul", { style: { display: "grid", gap: 6, margin: "12px 0", padding: 0, listStyle: "none" }, children: items.map((item) => /* @__PURE__ */ jsx8("li", { children: /* @__PURE__ */ jsxs8("button", { type: "button", style: { ...pickerButton, width: "100%", textAlign: "left" }, onClick: () => {
|
|
2748
2873
|
onChange(item);
|
|
2749
2874
|
setOpen(false);
|
|
2750
2875
|
}, children: [
|
|
2751
|
-
/* @__PURE__ */
|
|
2752
|
-
item.handle ? /* @__PURE__ */
|
|
2876
|
+
/* @__PURE__ */ jsx8("strong", { children: item.title }),
|
|
2877
|
+
item.handle ? /* @__PURE__ */ jsx8("small", { style: { display: "block" }, children: item.handle }) : null
|
|
2753
2878
|
] }) }, item.id)) }) : null,
|
|
2754
|
-
cursor ? /* @__PURE__ */
|
|
2879
|
+
cursor ? /* @__PURE__ */ jsx8("button", { type: "button", disabled: state === "loading", style: pickerButton, onClick: () => void search(query, cursor, true), children: "Load more" }) : null
|
|
2755
2880
|
] }) : null
|
|
2756
2881
|
] });
|
|
2757
2882
|
}
|
|
2758
2883
|
function ShopifyProductResourceField(props) {
|
|
2759
|
-
return /* @__PURE__ */
|
|
2884
|
+
return /* @__PURE__ */ jsx8(ResourceField, { ...props, kind: "product" });
|
|
2760
2885
|
}
|
|
2761
2886
|
function ShopifyCollectionResourceField(props) {
|
|
2762
|
-
return /* @__PURE__ */
|
|
2887
|
+
return /* @__PURE__ */ jsx8(ResourceField, { ...props, kind: "collection" });
|
|
2763
2888
|
}
|
|
2764
2889
|
|
|
2765
2890
|
// src/sales-definition.ts
|