@standhigher/besttrack-page-extension 0.5.4 → 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.js +528 -412
- 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,15 +1161,68 @@ 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: [] },
|
|
@@ -1141,7 +1259,7 @@ async function queryMockReadyToGoTracking(request) {
|
|
|
1141
1259
|
}
|
|
1142
1260
|
function ReadyToGoRuntimeProvider({ children, query: injectedQuery, queryRecommendations, transport, autoQueryFromUrl, autoQueryDemo = false, watermark, adPreview }) {
|
|
1143
1261
|
const [state, setState] = useState2({ phase: "idle" });
|
|
1144
|
-
const [recommendations, setRecommendations] = useState2(() => queryRecommendations || transport ? { phase: "loading", items: [] } : { phase: "
|
|
1262
|
+
const [recommendations, setRecommendations] = useState2(() => queryRecommendations || transport ? { phase: "loading", items: [] } : { phase: "idle", items: [] });
|
|
1145
1263
|
const requestId = useRef(0);
|
|
1146
1264
|
const resolvedQuery = useMemo2(() => {
|
|
1147
1265
|
if (injectedQuery) return injectedQuery;
|
|
@@ -1186,13 +1304,13 @@ function ReadyToGoRuntimeProvider({ children, query: injectedQuery, queryRecomme
|
|
|
1186
1304
|
[watermark]
|
|
1187
1305
|
);
|
|
1188
1306
|
const value = useMemo2(() => ({ ...state, adPreview, query, recommendations, autoQueryFromUrl: resolveAutoQuery, autoQueryDemo, watermark: resolvedWatermark }), [adPreview, autoQueryDemo, query, recommendations, resolveAutoQuery, resolvedWatermark, state]);
|
|
1189
|
-
return /* @__PURE__ */
|
|
1307
|
+
return /* @__PURE__ */ jsx4(ReadyToGoRuntimeContext.Provider, { value, children });
|
|
1190
1308
|
}
|
|
1191
1309
|
function useReadyToGoRuntime() {
|
|
1192
1310
|
return useContext(ReadyToGoRuntimeContext);
|
|
1193
1311
|
}
|
|
1194
1312
|
function RuntimeWatermark({ watermark }) {
|
|
1195
|
-
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;
|
|
1196
1314
|
}
|
|
1197
1315
|
var heroStyle = {
|
|
1198
1316
|
...pageFont,
|
|
@@ -1284,12 +1402,12 @@ function submitButtonStyle(props, loading = false) {
|
|
|
1284
1402
|
};
|
|
1285
1403
|
}
|
|
1286
1404
|
function ReadyToGoTextField({ value, onChange }) {
|
|
1287
|
-
return /* @__PURE__ */
|
|
1405
|
+
return /* @__PURE__ */ jsx4("input", { "aria-label": "Ready-to-go text", value: typeof value === "string" ? value : "", onChange: (event) => onChange(event.target.value) });
|
|
1288
1406
|
}
|
|
1289
1407
|
function InlineText({ block, name, fallback }) {
|
|
1290
1408
|
const value = text(block, name, fallback);
|
|
1291
|
-
if (!block.selected) return /* @__PURE__ */
|
|
1292
|
-
return /* @__PURE__ */
|
|
1409
|
+
if (!block.selected) return /* @__PURE__ */ jsx4("span", { "data-ready-to-go-editor-field": name, children: value });
|
|
1410
|
+
return /* @__PURE__ */ jsx4(
|
|
1293
1411
|
"input",
|
|
1294
1412
|
{
|
|
1295
1413
|
"aria-label": "Canvas " + name,
|
|
@@ -1325,45 +1443,45 @@ function eventsFrom(result) {
|
|
|
1325
1443
|
}
|
|
1326
1444
|
function ProgressResult({ result, showEstimatedDelivery = true, color }) {
|
|
1327
1445
|
const steps = result.progress?.length ? result.progress : defaultProgress(result.status);
|
|
1328
|
-
return /* @__PURE__ */
|
|
1329
|
-
/* @__PURE__ */
|
|
1446
|
+
return /* @__PURE__ */ jsxs4(Fragment3, { children: [
|
|
1447
|
+
/* @__PURE__ */ jsxs4("p", { style: { margin: 0, fontSize: 20, lineHeight: 1.4, color: "#000", overflowWrap: "anywhere" }, children: [
|
|
1330
1448
|
"Tracking: ",
|
|
1331
1449
|
result.trackingNumber
|
|
1332
1450
|
] }),
|
|
1333
|
-
/* @__PURE__ */
|
|
1334
|
-
showEstimatedDelivery && result.estimatedDelivery ? /* @__PURE__ */
|
|
1335
|
-
/* @__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 })
|
|
1336
1454
|
] });
|
|
1337
1455
|
}
|
|
1338
1456
|
function DeliveryResult({ heading, contentsHeading, carrierHeading, result, editing }) {
|
|
1339
|
-
return /* @__PURE__ */
|
|
1340
|
-
/* @__PURE__ */
|
|
1341
|
-
/* @__PURE__ */
|
|
1342
|
-
/* @__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) })
|
|
1343
1461
|
] }),
|
|
1344
|
-
/* @__PURE__ */
|
|
1345
|
-
/* @__PURE__ */
|
|
1346
|
-
/* @__PURE__ */
|
|
1347
|
-
/* @__PURE__ */
|
|
1348
|
-
/* @__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 ?? [] })
|
|
1349
1467
|
] }),
|
|
1350
|
-
/* @__PURE__ */
|
|
1351
|
-
/* @__PURE__ */
|
|
1352
|
-
/* @__PURE__ */
|
|
1353
|
-
/* @__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." })
|
|
1354
1472
|
] })
|
|
1355
1473
|
] })
|
|
1356
1474
|
] });
|
|
1357
1475
|
}
|
|
1358
1476
|
function ReadyToGoQueryEditor(block) {
|
|
1359
|
-
return /* @__PURE__ */
|
|
1360
|
-
/* @__PURE__ */
|
|
1361
|
-
/* @__PURE__ */
|
|
1362
|
-
/* @__PURE__ */
|
|
1363
|
-
/* @__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" }) })
|
|
1364
1482
|
] }),
|
|
1365
|
-
/* @__PURE__ */
|
|
1366
|
-
/* @__PURE__ */
|
|
1483
|
+
/* @__PURE__ */ jsxs4("div", { style: { marginTop: 24, display: "flex", flexDirection: "column", gap: 16, flex: 1 }, children: [
|
|
1484
|
+
/* @__PURE__ */ jsx4(
|
|
1367
1485
|
"input",
|
|
1368
1486
|
{
|
|
1369
1487
|
"aria-label": "Canvas default tracking number",
|
|
@@ -1378,39 +1496,42 @@ function ReadyToGoQueryEditor(block) {
|
|
|
1378
1496
|
}
|
|
1379
1497
|
}
|
|
1380
1498
|
),
|
|
1381
|
-
/* @__PURE__ */
|
|
1499
|
+
/* @__PURE__ */ jsx4("div", { style: submitButtonStyle(block), children: /* @__PURE__ */ jsx4(InlineText, { block, name: "submitLabel", fallback: "Track Your Order" }) })
|
|
1382
1500
|
] }),
|
|
1383
|
-
/* @__PURE__ */
|
|
1501
|
+
/* @__PURE__ */ jsx4("p", { style: { marginTop: "auto", paddingTop: 28, textAlign: "center", fontSize: 12, lineHeight: "17px", fontStyle: "italic", color: "#b8b8b8" }, children: "Powered by BestTrack" })
|
|
1384
1502
|
] }) });
|
|
1385
1503
|
}
|
|
1386
1504
|
function ReadyToGoProgressEditor(block) {
|
|
1387
|
-
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") }) }) });
|
|
1388
1506
|
}
|
|
1389
1507
|
function ReadyToGoDeliveryEditor(block) {
|
|
1390
1508
|
const { adPreview } = useReadyToGoRuntime();
|
|
1391
|
-
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(
|
|
1392
1510
|
DeliveryResult,
|
|
1393
1511
|
{
|
|
1394
|
-
heading: /* @__PURE__ */
|
|
1395
|
-
contentsHeading: /* @__PURE__ */
|
|
1396
|
-
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" }),
|
|
1397
1515
|
editing: true,
|
|
1398
1516
|
result: { ...previewReadyToGoTracking(), ad: adPreview ?? void 0 }
|
|
1399
1517
|
}
|
|
1400
1518
|
) });
|
|
1401
1519
|
}
|
|
1402
|
-
function
|
|
1403
|
-
|
|
1520
|
+
function configuredRecommendations(products) {
|
|
1521
|
+
return parseProductReferences(products).map((product) => ({
|
|
1404
1522
|
id: product.id,
|
|
1405
1523
|
title: product.title || product.id,
|
|
1406
1524
|
description: "",
|
|
1407
1525
|
imageUrl: product.imageUrl,
|
|
1408
1526
|
href: product.handle ? `/products/${product.handle}` : void 0
|
|
1409
1527
|
}));
|
|
1528
|
+
}
|
|
1529
|
+
function ReadyToGoRecommendationsEditor(block) {
|
|
1530
|
+
const selected = configuredRecommendations(block.products);
|
|
1410
1531
|
const items = selected.length ? selected : previewReadyToGoTracking().recommendations ?? [];
|
|
1411
|
-
return /* @__PURE__ */
|
|
1412
|
-
/* @__PURE__ */
|
|
1413
|
-
/* @__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 }) })
|
|
1414
1535
|
] }) });
|
|
1415
1536
|
}
|
|
1416
1537
|
function ReadyToGoQueryBlock(props) {
|
|
@@ -1431,7 +1552,7 @@ function ReadyToGoQueryBlock(props) {
|
|
|
1431
1552
|
if (autoQueryStarted.current) return;
|
|
1432
1553
|
if (locationState?.canAutoQuery) {
|
|
1433
1554
|
autoQueryStarted.current = true;
|
|
1434
|
-
void runtime.query(locationState.tab === "tracking" ? { mode: "tracking", trackingNumber: locationState.trackingNumber } : { mode: "order", orderNumber: locationState.orderNumber, email: locationState.email });
|
|
1555
|
+
void runtime.query(locationState.tab === "tracking" ? { mode: "tracking", trackingNumber: locationState.trackingNumber } : { mode: "order", orderNumber: locationState.orderNumber, email: locationState.email }).finally(() => scrollToTrackingResult());
|
|
1435
1556
|
return;
|
|
1436
1557
|
}
|
|
1437
1558
|
const demoTrackingNumber = previewDemoTrackingNumber.current.trim();
|
|
@@ -1441,6 +1562,7 @@ function ReadyToGoQueryBlock(props) {
|
|
|
1441
1562
|
}, [locationState, runtime]);
|
|
1442
1563
|
const submit = (event) => {
|
|
1443
1564
|
event.preventDefault();
|
|
1565
|
+
if (runtime.phase === "loading") return;
|
|
1444
1566
|
setLocalError("");
|
|
1445
1567
|
if (mode === "order") {
|
|
1446
1568
|
if (!orderNumber.trim() || !email.trim()) {
|
|
@@ -1448,7 +1570,7 @@ function ReadyToGoQueryBlock(props) {
|
|
|
1448
1570
|
return;
|
|
1449
1571
|
}
|
|
1450
1572
|
syncTrackingQueryToUrl("order", orderNumber.trim(), email.trim());
|
|
1451
|
-
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());
|
|
1452
1574
|
return;
|
|
1453
1575
|
}
|
|
1454
1576
|
if (!trackingNumber.trim()) {
|
|
@@ -1456,72 +1578,70 @@ function ReadyToGoQueryBlock(props) {
|
|
|
1456
1578
|
return;
|
|
1457
1579
|
}
|
|
1458
1580
|
syncTrackingQueryToUrl("tracking", trackingNumber.trim());
|
|
1459
|
-
void runtime.query({ mode: "tracking", trackingNumber: trackingNumber.trim() });
|
|
1581
|
+
void runtime.query({ mode: "tracking", trackingNumber: trackingNumber.trim() }).finally(() => scrollToTrackingResult());
|
|
1460
1582
|
};
|
|
1461
1583
|
const loading = runtime.phase === "loading";
|
|
1462
|
-
return /* @__PURE__ */
|
|
1463
|
-
heading ? /* @__PURE__ */
|
|
1464
|
-
/* @__PURE__ */
|
|
1465
|
-
/* @__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: () => {
|
|
1466
1588
|
setMode("tracking");
|
|
1467
1589
|
setLocalError("");
|
|
1468
1590
|
}, style: tabStyle(mode === "tracking"), children: trackingTabLabel }),
|
|
1469
|
-
/* @__PURE__ */
|
|
1591
|
+
/* @__PURE__ */ jsx4("button", { type: "button", role: "tab", "aria-selected": mode === "order", onClick: () => {
|
|
1470
1592
|
setMode("order");
|
|
1471
1593
|
setLocalError("");
|
|
1472
1594
|
}, style: tabStyle(mode === "order"), children: orderTabLabel })
|
|
1473
1595
|
] }),
|
|
1474
|
-
/* @__PURE__ */
|
|
1475
|
-
mode === "order" ? /* @__PURE__ */
|
|
1476
|
-
/* @__PURE__ */
|
|
1477
|
-
/* @__PURE__ */
|
|
1478
|
-
/* @__PURE__ */
|
|
1479
|
-
/* @__PURE__ */
|
|
1480
|
-
] }) : /* @__PURE__ */
|
|
1481
|
-
/* @__PURE__ */
|
|
1482
|
-
/* @__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 })
|
|
1483
1605
|
] }),
|
|
1484
|
-
localError ? /* @__PURE__ */
|
|
1485
|
-
/* @__PURE__ */
|
|
1486
|
-
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
|
|
1487
1609
|
] }),
|
|
1488
|
-
/* @__PURE__ */
|
|
1610
|
+
/* @__PURE__ */ jsx4(RuntimeWatermark, { watermark: runtime.watermark }),
|
|
1611
|
+
loading ? /* @__PURE__ */ jsx4(TrackingLoading, {}) : null
|
|
1489
1612
|
] }) });
|
|
1490
1613
|
}
|
|
1491
1614
|
function ReadyToGoProgressBlock(props) {
|
|
1492
1615
|
const runtime = useReadyToGoRuntime();
|
|
1493
1616
|
const result = runtime.result;
|
|
1494
|
-
if (runtime.phase === "idle") return null;
|
|
1495
|
-
if (runtime.phase === "empty") return /* @__PURE__ */
|
|
1496
|
-
return /* @__PURE__ */
|
|
1497
|
-
runtime.phase === "
|
|
1498
|
-
|
|
1499
|
-
/* @__PURE__ */ jsx3(SkeletonRow, {})
|
|
1500
|
-
] }) : null,
|
|
1501
|
-
runtime.phase === "error" ? /* @__PURE__ */ jsx3("p", { style: { margin: 0, color: "#b42318" }, children: "Shipment progress is temporarily unavailable." }) : null,
|
|
1502
|
-
runtime.phase === "success" && result ? /* @__PURE__ */ jsx3(ProgressResult, { result, showEstimatedDelivery: !runtime.autoQueryDemo, 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
|
|
1503
1622
|
] }) });
|
|
1504
1623
|
}
|
|
1505
1624
|
function ReadyToGoDeliveryBlock(props) {
|
|
1506
1625
|
const runtime = useReadyToGoRuntime();
|
|
1507
|
-
if (runtime.phase === "idle" || runtime.phase === "empty") return null;
|
|
1626
|
+
if (runtime.phase === "idle" || runtime.phase === "loading" || runtime.phase === "empty") return null;
|
|
1508
1627
|
const heading = text(props, "heading", "Shipping Details");
|
|
1509
1628
|
const contentsHeading = text(props, "contentsHeading", "Package Contents");
|
|
1510
1629
|
const carrierHeading = text(props, "carrierHeading", "Carrier");
|
|
1511
1630
|
const result = runtime.result;
|
|
1512
|
-
return /* @__PURE__ */
|
|
1513
|
-
/* @__PURE__ */
|
|
1514
|
-
runtime.phase === "
|
|
1515
|
-
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
|
|
1516
1634
|
] }) }) });
|
|
1517
1635
|
}
|
|
1518
1636
|
function ReadyToGoRecommendationsBlock(props) {
|
|
1519
1637
|
const runtime = useReadyToGoRuntime();
|
|
1520
1638
|
const heading = text(props, "heading", "You may also like...");
|
|
1521
|
-
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
|
|
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 }) })
|
|
1525
1645
|
] }) });
|
|
1526
1646
|
}
|
|
1527
1647
|
|
|
@@ -1680,8 +1800,8 @@ import { createPageDocument as createPageDocument2 } from "@standhigher/puck-pag
|
|
|
1680
1800
|
import { createContext as createContext2, useCallback as useCallback3, useContext as useContext2, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
|
|
1681
1801
|
|
|
1682
1802
|
// src/tracking-query-experience.tsx
|
|
1683
|
-
import { useEffect as useEffect3, useId, useRef as useRef2, useState as useState3 } from "react";
|
|
1684
|
-
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";
|
|
1685
1805
|
var srOnly = {
|
|
1686
1806
|
position: "absolute",
|
|
1687
1807
|
width: 1,
|
|
@@ -1743,8 +1863,6 @@ function TrackingQueryCard({
|
|
|
1743
1863
|
trackingPlaceholder = "Enter your tracking number",
|
|
1744
1864
|
orderPlaceholder = "Enter your order number",
|
|
1745
1865
|
emailPlaceholder = "Enter your email",
|
|
1746
|
-
loadingLabel = "Querying...",
|
|
1747
|
-
loadingMessage = "Checking your order...",
|
|
1748
1866
|
emptyMessage = "We couldn't find an order or shipment for that number.",
|
|
1749
1867
|
errorMessage = "We couldn't retrieve this order right now. Please try again later.",
|
|
1750
1868
|
trackingInputLabel = "Tracking number",
|
|
@@ -1765,13 +1883,13 @@ function TrackingQueryCard({
|
|
|
1765
1883
|
messageStyle,
|
|
1766
1884
|
resultStyle
|
|
1767
1885
|
}) {
|
|
1768
|
-
const trackingInputId =
|
|
1769
|
-
const orderInputId =
|
|
1770
|
-
const emailInputId =
|
|
1771
|
-
const trackingTabId =
|
|
1772
|
-
const orderTabId =
|
|
1773
|
-
const tabPanelId =
|
|
1774
|
-
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();
|
|
1775
1893
|
const [mode, setMode] = useState3(initialMode);
|
|
1776
1894
|
const [trackingNumber, setTrackingNumber] = useState3(initialTrackingNumber);
|
|
1777
1895
|
const [orderNumber, setOrderNumber] = useState3(initialOrderNumber);
|
|
@@ -1821,6 +1939,7 @@ function TrackingQueryCard({
|
|
|
1821
1939
|
};
|
|
1822
1940
|
const submit = (event) => {
|
|
1823
1941
|
event.preventDefault();
|
|
1942
|
+
if (loading) return;
|
|
1824
1943
|
const nextErrors = {};
|
|
1825
1944
|
const normalizedTrackingNumber = trackingNumber.trim();
|
|
1826
1945
|
const normalizedOrderNumber = orderNumber.trim();
|
|
@@ -1839,53 +1958,54 @@ function TrackingQueryCard({
|
|
|
1839
1958
|
};
|
|
1840
1959
|
const errorFor = (field) => errors[field];
|
|
1841
1960
|
const inputWithError = (field) => ({ ...inputStyle2, borderColor: errorFor(field) ? "#b42318" : inputStyle2.borderColor ?? "#cbd5e1" });
|
|
1842
|
-
const message = phase === "
|
|
1961
|
+
const message = phase === "empty" ? emptyMessage : phase === "error" ? errorMessage : void 0;
|
|
1843
1962
|
const cardData = cardDataAttribute ? { [cardDataAttribute]: "true" } : {};
|
|
1844
1963
|
const resultData = resultDataAttribute ? { [resultDataAttribute]: "true" } : {};
|
|
1845
1964
|
const activeTabId = mode === "tracking" ? trackingTabId : orderTabId;
|
|
1846
1965
|
const resultLabel = phase === "success" ? "Tracking result" : "Tracking query status";
|
|
1847
|
-
return /* @__PURE__ */
|
|
1848
|
-
/* @__PURE__ */
|
|
1849
|
-
/* @__PURE__ */
|
|
1850
|
-
/* @__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) => {
|
|
1851
1970
|
tabRefs.current.tracking = element;
|
|
1852
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 }),
|
|
1853
|
-
/* @__PURE__ */
|
|
1972
|
+
/* @__PURE__ */ jsx5("button", { ref: (element) => {
|
|
1854
1973
|
tabRefs.current.order = element;
|
|
1855
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 })
|
|
1856
1975
|
] }),
|
|
1857
|
-
/* @__PURE__ */
|
|
1858
|
-
mode === "tracking" ? /* @__PURE__ */
|
|
1859
|
-
/* @__PURE__ */
|
|
1860
|
-
/* @__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) => {
|
|
1861
1980
|
setTrackingNumber(event.target.value);
|
|
1862
1981
|
clearError("tracking");
|
|
1863
1982
|
}, placeholder: trackingPlaceholder, style: inputWithError("tracking") }),
|
|
1864
|
-
errorFor("tracking") ? /* @__PURE__ */
|
|
1865
|
-
] }) : /* @__PURE__ */
|
|
1866
|
-
/* @__PURE__ */
|
|
1867
|
-
/* @__PURE__ */
|
|
1868
|
-
/* @__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) => {
|
|
1869
1988
|
setOrderNumber(event.target.value);
|
|
1870
1989
|
clearError("order");
|
|
1871
1990
|
}, placeholder: orderPlaceholder, style: inputWithError("order") }),
|
|
1872
|
-
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
|
|
1873
1992
|
] }),
|
|
1874
|
-
/* @__PURE__ */
|
|
1875
|
-
/* @__PURE__ */
|
|
1876
|
-
/* @__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) => {
|
|
1877
1996
|
setEmail(event.target.value);
|
|
1878
1997
|
clearError("email");
|
|
1879
1998
|
}, placeholder: emailPlaceholder, style: inputWithError("email") }),
|
|
1880
|
-
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
|
|
1881
2000
|
] })
|
|
1882
2001
|
] }),
|
|
1883
|
-
/* @__PURE__ */
|
|
2002
|
+
/* @__PURE__ */ jsx5("button", { type: "submit", disabled: loading, style: submitStyle(loading), children: submitLabel })
|
|
1884
2003
|
] }) }),
|
|
1885
|
-
message ? /* @__PURE__ */
|
|
1886
|
-
phase === "success" ? /* @__PURE__ */
|
|
1887
|
-
terminalPhase ? /* @__PURE__ */
|
|
1888
|
-
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
|
|
1889
2009
|
] });
|
|
1890
2010
|
}
|
|
1891
2011
|
function defaultProgress2(status) {
|
|
@@ -1901,55 +2021,55 @@ function defaultProgress2(status) {
|
|
|
1901
2021
|
return steps.map((step, index) => ({ ...step, state: index < current ? "complete" : index === current ? "current" : "upcoming" }));
|
|
1902
2022
|
}
|
|
1903
2023
|
function TrackingProgressDetails({ steps }) {
|
|
1904
|
-
return /* @__PURE__ */
|
|
1905
|
-
/* @__PURE__ */
|
|
1906
|
-
/* @__PURE__ */
|
|
1907
|
-
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
|
|
1908
2028
|
] }, step.id)) });
|
|
1909
2029
|
}
|
|
1910
2030
|
function TrackingEvents({ result }) {
|
|
1911
2031
|
const [expanded, setExpanded] = useState3(false);
|
|
1912
2032
|
const events = result.events ?? (result.latestEvent ? [{ id: "latest", title: result.latestEvent, at: result.updatedAt, state: "current" }] : []);
|
|
1913
|
-
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." });
|
|
1914
2034
|
const visibleEvents = events.slice(0, expanded ? 50 : 3);
|
|
1915
|
-
return /* @__PURE__ */
|
|
1916
|
-
/* @__PURE__ */
|
|
1917
|
-
/* @__PURE__ */
|
|
1918
|
-
/* @__PURE__ */
|
|
1919
|
-
event.detail ? /* @__PURE__ */
|
|
1920
|
-
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
|
|
1921
2041
|
] }, event.id)) }),
|
|
1922
|
-
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
|
|
1923
2043
|
] });
|
|
1924
2044
|
}
|
|
1925
2045
|
function TrackingOrderItemImage({ src, title }) {
|
|
1926
2046
|
const [failed, setFailed] = useState3(false);
|
|
1927
2047
|
const imageUrl = safeTrackingPageUrl(src);
|
|
1928
|
-
if (!imageUrl || failed) return /* @__PURE__ */
|
|
1929
|
-
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" } });
|
|
1930
2050
|
}
|
|
1931
2051
|
function TrackingOrderItems({ items }) {
|
|
1932
2052
|
if (!items.length) return null;
|
|
1933
|
-
return /* @__PURE__ */
|
|
1934
|
-
/* @__PURE__ */
|
|
1935
|
-
/* @__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) => {
|
|
1936
2056
|
const price = item.price ? formatTrackingPageMoney(item.price) : void 0;
|
|
1937
2057
|
const href = safeTrackingPageUrl(item.href);
|
|
1938
|
-
return /* @__PURE__ */
|
|
1939
|
-
/* @__PURE__ */
|
|
1940
|
-
/* @__PURE__ */
|
|
1941
|
-
href ? /* @__PURE__ */
|
|
1942
|
-
item.description ? /* @__PURE__ */
|
|
1943
|
-
/* @__PURE__ */
|
|
1944
|
-
/* @__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: [
|
|
1945
2065
|
"Qty ",
|
|
1946
2066
|
item.quantity
|
|
1947
2067
|
] }),
|
|
1948
|
-
price?.amount ? /* @__PURE__ */
|
|
2068
|
+
price?.amount ? /* @__PURE__ */ jsxs5("span", { children: [
|
|
1949
2069
|
price.amount,
|
|
1950
2070
|
price.startsAt ? " and up" : ""
|
|
1951
2071
|
] }) : null,
|
|
1952
|
-
price?.compareAt ? /* @__PURE__ */
|
|
2072
|
+
price?.compareAt ? /* @__PURE__ */ jsx5("s", { style: { color: "#94a3b8" }, children: price.compareAt }) : null
|
|
1953
2073
|
] })
|
|
1954
2074
|
] })
|
|
1955
2075
|
] }, item.id);
|
|
@@ -1964,60 +2084,60 @@ function TrackingQueryResultDetails({ result, onTrackAnother, trackAnotherLabel
|
|
|
1964
2084
|
void navigator.clipboard.writeText(result.trackingNumber).then(() => setCopied(true)).catch(() => void 0);
|
|
1965
2085
|
}
|
|
1966
2086
|
};
|
|
1967
|
-
return /* @__PURE__ */
|
|
1968
|
-
/* @__PURE__ */
|
|
1969
|
-
/* @__PURE__ */
|
|
1970
|
-
/* @__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: [
|
|
1971
2091
|
"Your order is ",
|
|
1972
2092
|
result.status || "being updated"
|
|
1973
2093
|
] }),
|
|
1974
|
-
result.estimatedDelivery ? /* @__PURE__ */
|
|
2094
|
+
result.estimatedDelivery ? /* @__PURE__ */ jsxs5("p", { style: { margin: "5px 0 0", color: "#475569", fontSize: 14 }, children: [
|
|
1975
2095
|
"Estimated delivery: ",
|
|
1976
2096
|
result.estimatedDelivery
|
|
1977
2097
|
] }) : null
|
|
1978
2098
|
] }),
|
|
1979
|
-
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
|
|
1980
2100
|
] }),
|
|
1981
|
-
/* @__PURE__ */
|
|
1982
|
-
/* @__PURE__ */
|
|
1983
|
-
/* @__PURE__ */
|
|
1984
|
-
/* @__PURE__ */
|
|
1985
|
-
/* @__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", {}),
|
|
1986
2106
|
result.carrier || "\u2014"
|
|
1987
2107
|
] }),
|
|
1988
|
-
/* @__PURE__ */
|
|
1989
|
-
/* @__PURE__ */
|
|
1990
|
-
/* @__PURE__ */
|
|
1991
|
-
/* @__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 }),
|
|
1992
2112
|
" ",
|
|
1993
|
-
/* @__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" })
|
|
1994
2114
|
] }),
|
|
1995
|
-
/* @__PURE__ */
|
|
1996
|
-
/* @__PURE__ */
|
|
1997
|
-
/* @__PURE__ */
|
|
2115
|
+
/* @__PURE__ */ jsxs5("span", { style: { minWidth: 0, overflowWrap: "anywhere" }, children: [
|
|
2116
|
+
/* @__PURE__ */ jsx5("strong", { children: "Destination" }),
|
|
2117
|
+
/* @__PURE__ */ jsx5("br", {}),
|
|
1998
2118
|
result.destination || "\u2014"
|
|
1999
2119
|
] }),
|
|
2000
|
-
/* @__PURE__ */
|
|
2001
|
-
/* @__PURE__ */
|
|
2002
|
-
/* @__PURE__ */
|
|
2120
|
+
/* @__PURE__ */ jsxs5("span", { style: { minWidth: 0, overflowWrap: "anywhere" }, children: [
|
|
2121
|
+
/* @__PURE__ */ jsx5("strong", { children: "Transit time" }),
|
|
2122
|
+
/* @__PURE__ */ jsx5("br", {}),
|
|
2003
2123
|
result.transitDuration || "\u2014"
|
|
2004
2124
|
] }),
|
|
2005
|
-
result.orderNumber ? /* @__PURE__ */
|
|
2006
|
-
/* @__PURE__ */
|
|
2007
|
-
/* @__PURE__ */
|
|
2125
|
+
result.orderNumber ? /* @__PURE__ */ jsxs5("span", { style: { minWidth: 0, overflowWrap: "anywhere" }, children: [
|
|
2126
|
+
/* @__PURE__ */ jsx5("strong", { children: "Order number" }),
|
|
2127
|
+
/* @__PURE__ */ jsx5("br", {}),
|
|
2008
2128
|
result.orderNumber
|
|
2009
2129
|
] }) : null
|
|
2010
2130
|
] }),
|
|
2011
|
-
/* @__PURE__ */
|
|
2012
|
-
/* @__PURE__ */
|
|
2013
|
-
/* @__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 })
|
|
2014
2134
|
] }),
|
|
2015
|
-
/* @__PURE__ */
|
|
2135
|
+
/* @__PURE__ */ jsx5(TrackingOrderItems, { items: result.orderItems ?? [] })
|
|
2016
2136
|
] });
|
|
2017
2137
|
}
|
|
2018
2138
|
|
|
2019
2139
|
// src/branded.tsx
|
|
2020
|
-
import { jsx as
|
|
2140
|
+
import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
2021
2141
|
var initialRuntime2 = {
|
|
2022
2142
|
phase: "idle",
|
|
2023
2143
|
selectedShipmentId: null,
|
|
@@ -2069,13 +2189,13 @@ function BrandedRuntimeProvider({ children, query: injectedQuery, watermark }) {
|
|
|
2069
2189
|
() => ({ ...state, displayedResult, selectedShipmentId, query, reset, selectShipment, watermark }),
|
|
2070
2190
|
[displayedResult, query, reset, selectedShipmentId, selectShipment, state, watermark]
|
|
2071
2191
|
);
|
|
2072
|
-
return /* @__PURE__ */
|
|
2192
|
+
return /* @__PURE__ */ jsx6(BrandedRuntimeContext.Provider, { value, children });
|
|
2073
2193
|
}
|
|
2074
2194
|
function useBrandedRuntime() {
|
|
2075
2195
|
return useContext2(BrandedRuntimeContext);
|
|
2076
2196
|
}
|
|
2077
2197
|
function RuntimeWatermark2({ watermark }) {
|
|
2078
|
-
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;
|
|
2079
2199
|
}
|
|
2080
2200
|
function text3(props, key, fallback) {
|
|
2081
2201
|
return typeof props[key] === "string" ? props[key] : fallback;
|
|
@@ -2089,28 +2209,28 @@ function ProductImage2({ src, alt }) {
|
|
|
2089
2209
|
const [failed, setFailed] = useState4(false);
|
|
2090
2210
|
const safeSrc = safeImageUrl2(src);
|
|
2091
2211
|
if (!safeSrc || failed) {
|
|
2092
|
-
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() });
|
|
2093
2213
|
}
|
|
2094
|
-
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" } });
|
|
2095
2215
|
}
|
|
2096
2216
|
function ShipmentSwitcher({ shipmentLabels: configuredLabels }) {
|
|
2097
2217
|
const runtime = useBrandedRuntime();
|
|
2098
2218
|
const configuredShipments = shipmentLabels(configuredLabels);
|
|
2099
2219
|
const shipments = runtime.phase === "idle" || runtime.phase === "loading" ? configuredShipments : runtime.result?.shipments ?? [];
|
|
2100
2220
|
if (!shipments.length) return null;
|
|
2101
|
-
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) => {
|
|
2102
2222
|
const selected = (runtime.selectedShipmentId ?? shipments[0]?.id) === shipment.id;
|
|
2103
|
-
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);
|
|
2104
2224
|
}) });
|
|
2105
2225
|
}
|
|
2106
2226
|
function QueryHero(props) {
|
|
2107
2227
|
const runtime = useBrandedRuntime();
|
|
2108
2228
|
const [heroImageFailed, setHeroImageFailed] = useState4(false);
|
|
2109
2229
|
const result = runtime.displayedResult;
|
|
2110
|
-
return /* @__PURE__ */
|
|
2111
|
-
!heroImageFailed && safeImageUrl2(props.heroImageUrl) ? /* @__PURE__ */
|
|
2112
|
-
/* @__PURE__ */
|
|
2113
|
-
/* @__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(
|
|
2114
2234
|
TrackingQueryCard,
|
|
2115
2235
|
{
|
|
2116
2236
|
phase: runtime.phase,
|
|
@@ -2122,8 +2242,6 @@ function QueryHero(props) {
|
|
|
2122
2242
|
initialMode: text3(props, "defaultQueryMode", "tracking") === "order" ? "order" : "tracking",
|
|
2123
2243
|
trackingTabLabel: text3(props, "trackingTabLabel", "Tracking Number"),
|
|
2124
2244
|
orderTabLabel: text3(props, "orderTabLabel", "Order Number"),
|
|
2125
|
-
loadingLabel: "Tracking...",
|
|
2126
|
-
loadingMessage: "Checking your order\u2026",
|
|
2127
2245
|
emptyMessage: "We couldn\u2019t find an order for that number.",
|
|
2128
2246
|
errorMessage: "We couldn\u2019t retrieve this order right now. Please try again later.",
|
|
2129
2247
|
cardDataAttribute: "data-branded-query-card",
|
|
@@ -2136,21 +2254,21 @@ function QueryHero(props) {
|
|
|
2136
2254
|
formStyle: { gap: 12 },
|
|
2137
2255
|
inputStyle: { width: "100%", height: 48, padding: "0 16px", boxSizing: "border-box", border: "1px solid #e2e2e2", borderRadius: 10, font: "inherit" },
|
|
2138
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" }),
|
|
2139
|
-
result: result ? /* @__PURE__ */
|
|
2257
|
+
result: result ? /* @__PURE__ */ jsx6(TrackingQueryResultDetails, { result, onTrackAnother: runtime.reset, trackAnotherLabel: text3(props, "trackAnotherLabel", "Track another order") }) : null,
|
|
2140
2258
|
resultStyle: { padding: 16, border: "1px solid #e7e7e7", borderRadius: 8, background: "#fffdf0" },
|
|
2141
|
-
watermark: /* @__PURE__ */
|
|
2259
|
+
watermark: /* @__PURE__ */ jsx6(RuntimeWatermark2, { watermark: runtime.watermark })
|
|
2142
2260
|
}
|
|
2143
2261
|
) })
|
|
2144
2262
|
] });
|
|
2145
2263
|
}
|
|
2146
2264
|
function PackageContents2({ items }) {
|
|
2147
|
-
if (!items?.length) return /* @__PURE__ */
|
|
2148
|
-
return /* @__PURE__ */
|
|
2149
|
-
/* @__PURE__ */
|
|
2150
|
-
/* @__PURE__ */
|
|
2151
|
-
/* @__PURE__ */
|
|
2152
|
-
/* @__PURE__ */
|
|
2153
|
-
/* @__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: [
|
|
2154
2272
|
"Qty ",
|
|
2155
2273
|
item.quantity
|
|
2156
2274
|
] })
|
|
@@ -2158,12 +2276,12 @@ function PackageContents2({ items }) {
|
|
|
2158
2276
|
] }, item.id)) });
|
|
2159
2277
|
}
|
|
2160
2278
|
function BrandedTextField({ value, onChange }) {
|
|
2161
|
-
return /* @__PURE__ */
|
|
2279
|
+
return /* @__PURE__ */ jsx6("input", { "aria-label": "Branded text", value: typeof value === "string" ? value : "", onChange: (event) => onChange(event.target.value) });
|
|
2162
2280
|
}
|
|
2163
2281
|
function InlineText2({ block, name, fallback }) {
|
|
2164
2282
|
const value = text3(block, name, fallback);
|
|
2165
|
-
if (!block.selected) return /* @__PURE__ */
|
|
2166
|
-
return /* @__PURE__ */
|
|
2283
|
+
if (!block.selected) return /* @__PURE__ */ jsx6("span", { "data-branded-editor-field": name, children: value });
|
|
2284
|
+
return /* @__PURE__ */ jsx6(
|
|
2167
2285
|
"input",
|
|
2168
2286
|
{
|
|
2169
2287
|
"aria-label": "Canvas " + name,
|
|
@@ -2193,22 +2311,22 @@ function InlineText2({ block, name, fallback }) {
|
|
|
2193
2311
|
);
|
|
2194
2312
|
}
|
|
2195
2313
|
function EditorSurface({ block, children }) {
|
|
2196
|
-
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 });
|
|
2197
2315
|
}
|
|
2198
2316
|
function BrandedAnnouncementEditor(block) {
|
|
2199
|
-
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" }) });
|
|
2200
2318
|
}
|
|
2201
2319
|
function BrandedTrackingExperienceEditor(block) {
|
|
2202
2320
|
const labels = shipmentLabels(block.shipmentLabels);
|
|
2203
|
-
return /* @__PURE__ */
|
|
2204
|
-
/* @__PURE__ */
|
|
2205
|
-
/* @__PURE__ */
|
|
2206
|
-
/* @__PURE__ */
|
|
2207
|
-
/* @__PURE__ */
|
|
2208
|
-
/* @__PURE__ */
|
|
2209
|
-
/* @__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" }) })
|
|
2210
2328
|
] }),
|
|
2211
|
-
/* @__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: {
|
|
2212
2330
|
width: "100%",
|
|
2213
2331
|
height: 44,
|
|
2214
2332
|
boxSizing: "border-box",
|
|
@@ -2219,42 +2337,42 @@ function BrandedTrackingExperienceEditor(block) {
|
|
|
2219
2337
|
background: "#fff",
|
|
2220
2338
|
font: "inherit"
|
|
2221
2339
|
} }),
|
|
2222
|
-
/* @__PURE__ */
|
|
2223
|
-
/* @__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" })
|
|
2224
2342
|
] }) })
|
|
2225
2343
|
] });
|
|
2226
2344
|
}
|
|
2227
2345
|
function BrandedQueryEditor(block) {
|
|
2228
|
-
return /* @__PURE__ */
|
|
2346
|
+
return /* @__PURE__ */ jsx6(BrandedTrackingExperienceEditor, { ...block });
|
|
2229
2347
|
}
|
|
2230
2348
|
function BrandedOrderItemsEditor(block) {
|
|
2231
|
-
return /* @__PURE__ */
|
|
2232
|
-
/* @__PURE__ */
|
|
2233
|
-
/* @__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." })
|
|
2234
2352
|
] });
|
|
2235
2353
|
}
|
|
2236
2354
|
function BrandedRecommendationsEditor(block) {
|
|
2237
|
-
return /* @__PURE__ */
|
|
2238
|
-
/* @__PURE__ */
|
|
2239
|
-
/* @__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." })
|
|
2240
2358
|
] });
|
|
2241
2359
|
}
|
|
2242
2360
|
function BrandedQuickLinksEditor(block) {
|
|
2243
|
-
return /* @__PURE__ */
|
|
2244
|
-
/* @__PURE__ */
|
|
2245
|
-
/* @__PURE__ */
|
|
2246
|
-
/* @__PURE__ */
|
|
2247
|
-
/* @__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" })
|
|
2248
2366
|
] })
|
|
2249
2367
|
] });
|
|
2250
2368
|
}
|
|
2251
2369
|
function BrandedBlogEditor(block) {
|
|
2252
|
-
return /* @__PURE__ */
|
|
2253
|
-
/* @__PURE__ */
|
|
2254
|
-
/* @__PURE__ */
|
|
2255
|
-
/* @__PURE__ */
|
|
2256
|
-
/* @__PURE__ */
|
|
2257
|
-
/* @__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" })
|
|
2258
2376
|
] })
|
|
2259
2377
|
] });
|
|
2260
2378
|
}
|
|
@@ -2262,42 +2380,42 @@ function BrandedAnnouncementBlock(props) {
|
|
|
2262
2380
|
const message = text3(props, "message", "");
|
|
2263
2381
|
const href = safeHref2(props.href);
|
|
2264
2382
|
if (!message) return null;
|
|
2265
|
-
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 });
|
|
2266
2384
|
}
|
|
2267
2385
|
function BrandedTrackingExperienceBlock(props) {
|
|
2268
|
-
return /* @__PURE__ */
|
|
2269
|
-
/* @__PURE__ */
|
|
2270
|
-
/* @__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 })
|
|
2271
2389
|
] });
|
|
2272
2390
|
}
|
|
2273
2391
|
function BrandedQueryBlock(props) {
|
|
2274
|
-
return /* @__PURE__ */
|
|
2275
|
-
/* @__PURE__ */
|
|
2276
|
-
/* @__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 })
|
|
2277
2395
|
] });
|
|
2278
2396
|
}
|
|
2279
2397
|
function BrandedOrderItemsBlock(props) {
|
|
2280
2398
|
const runtime = useBrandedRuntime();
|
|
2281
2399
|
const items = runtime.displayedResult?.orderItems ?? [];
|
|
2282
2400
|
const title = text3(props, "heading", "What's Inside");
|
|
2283
|
-
return /* @__PURE__ */
|
|
2284
|
-
/* @__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: [
|
|
2285
2403
|
title,
|
|
2286
2404
|
runtime.phase === "success" ? " (" + items.length + ")" : ""
|
|
2287
2405
|
] }),
|
|
2288
|
-
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." })
|
|
2289
2407
|
] }) });
|
|
2290
2408
|
}
|
|
2291
2409
|
function RecommendationCard({ item }) {
|
|
2292
2410
|
const href = safeHref2(item.href);
|
|
2293
2411
|
const price = item.price ? formatTrackingPageMoney(item.price) : void 0;
|
|
2294
|
-
return /* @__PURE__ */
|
|
2295
|
-
/* @__PURE__ */
|
|
2296
|
-
/* @__PURE__ */
|
|
2297
|
-
/* @__PURE__ */
|
|
2298
|
-
price?.amount ? /* @__PURE__ */
|
|
2299
|
-
/* @__PURE__ */
|
|
2300
|
-
!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" })
|
|
2301
2419
|
] })
|
|
2302
2420
|
] });
|
|
2303
2421
|
}
|
|
@@ -2306,32 +2424,32 @@ function BrandedRecommendationsBlock(props) {
|
|
|
2306
2424
|
const recommendations = runtime.displayedResult?.recommendations ?? [];
|
|
2307
2425
|
const title = text3(props, "heading", "You might also like");
|
|
2308
2426
|
if ((runtime.phase === "success" || runtime.phase === "empty") && !recommendations.length && text3(props, "hideWhenEmpty", "false") === "true") return null;
|
|
2309
|
-
return /* @__PURE__ */
|
|
2310
|
-
/* @__PURE__ */
|
|
2311
|
-
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." })
|
|
2312
2430
|
] }) });
|
|
2313
2431
|
}
|
|
2314
2432
|
function BrandedQuickLinksBlock(props) {
|
|
2315
2433
|
const title = text3(props, "heading", "Need help?");
|
|
2316
2434
|
const primaryHref = safeHref2(props.primaryHref);
|
|
2317
2435
|
const secondaryHref = safeHref2(props.secondaryHref);
|
|
2318
|
-
return /* @__PURE__ */
|
|
2319
|
-
/* @__PURE__ */
|
|
2320
|
-
/* @__PURE__ */
|
|
2321
|
-
primaryHref ? /* @__PURE__ */
|
|
2322
|
-
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") })
|
|
2323
2441
|
] })
|
|
2324
2442
|
] });
|
|
2325
2443
|
}
|
|
2326
2444
|
function BrandedBlogBlock(props) {
|
|
2327
2445
|
const title = text3(props, "heading", "From our journal");
|
|
2328
2446
|
const href = safeHref2(props.articleHref);
|
|
2329
|
-
return /* @__PURE__ */
|
|
2330
|
-
/* @__PURE__ */
|
|
2331
|
-
/* @__PURE__ */
|
|
2332
|
-
/* @__PURE__ */
|
|
2333
|
-
/* @__PURE__ */
|
|
2334
|
-
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") })
|
|
2335
2453
|
] })
|
|
2336
2454
|
] });
|
|
2337
2455
|
}
|
|
@@ -2369,7 +2487,7 @@ import { createPageDocument as createPageDocument3 } from "@standhigher/puck-pag
|
|
|
2369
2487
|
|
|
2370
2488
|
// src/sales.tsx
|
|
2371
2489
|
import { createContext as createContext3, useCallback as useCallback4, useContext as useContext3, useMemo as useMemo4, useRef as useRef4, useState as useState5 } from "react";
|
|
2372
|
-
import { Fragment as
|
|
2490
|
+
import { Fragment as Fragment5, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
2373
2491
|
var initialRuntime3 = { phase: "idle", async query() {
|
|
2374
2492
|
return void 0;
|
|
2375
2493
|
} };
|
|
@@ -2395,13 +2513,13 @@ function SalesRuntimeProvider({ children, query: injectedQuery, watermark, resou
|
|
|
2395
2513
|
}
|
|
2396
2514
|
}, [injectedQuery]);
|
|
2397
2515
|
const value = useMemo4(() => ({ ...state, query, watermark, resourceResolution }), [query, resourceResolution, state, watermark]);
|
|
2398
|
-
return /* @__PURE__ */
|
|
2516
|
+
return /* @__PURE__ */ jsx7(SalesRuntimeContext.Provider, { value, children });
|
|
2399
2517
|
}
|
|
2400
2518
|
function useSalesRuntime() {
|
|
2401
2519
|
return useContext3(SalesRuntimeContext);
|
|
2402
2520
|
}
|
|
2403
2521
|
function RuntimeWatermark3({ watermark }) {
|
|
2404
|
-
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;
|
|
2405
2523
|
}
|
|
2406
2524
|
function text5(props, key, fallback) {
|
|
2407
2525
|
const value = props[key];
|
|
@@ -2410,28 +2528,28 @@ function text5(props, key, fallback) {
|
|
|
2410
2528
|
var safeHref3 = safeTrackingPageUrl;
|
|
2411
2529
|
var safeImageUrl3 = safeTrackingPageUrl;
|
|
2412
2530
|
function Status({ children, alert = false }) {
|
|
2413
|
-
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 });
|
|
2414
2532
|
}
|
|
2415
2533
|
function Section({ title, children, busy = false }) {
|
|
2416
|
-
return /* @__PURE__ */
|
|
2417
|
-
/* @__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 }),
|
|
2418
2536
|
children
|
|
2419
2537
|
] }) });
|
|
2420
2538
|
}
|
|
2421
2539
|
function ProductImage3({ src, alt }) {
|
|
2422
2540
|
const [failed, setFailed] = useState5(false);
|
|
2423
2541
|
const safeSrc = safeImageUrl3(src);
|
|
2424
|
-
if (!safeSrc || failed) return /* @__PURE__ */
|
|
2425
|
-
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)" } });
|
|
2426
2544
|
}
|
|
2427
2545
|
function HeroAsset({ src }) {
|
|
2428
2546
|
const [failed, setFailed] = useState5(false);
|
|
2429
2547
|
const safeSrc = safeImageUrl3(src);
|
|
2430
2548
|
if (!safeSrc || failed) return null;
|
|
2431
|
-
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 } });
|
|
2432
2550
|
}
|
|
2433
2551
|
function SalesTextField({ value, onChange }) {
|
|
2434
|
-
return /* @__PURE__ */
|
|
2552
|
+
return /* @__PURE__ */ jsx7("input", { "aria-label": "Sales text", value: typeof value === "string" ? value : "", onChange: (event) => onChange(event.target.value) });
|
|
2435
2553
|
}
|
|
2436
2554
|
var editorSurfaceStyle = { boxSizing: "border-box", border: "1px solid #dfddd7", borderRadius: 10, padding: 24, background: "#ffffff", color: "#0a0a0a", fontFamily: "Arial, Helvetica, sans-serif" };
|
|
2437
2555
|
var editorCardStyle = { boxSizing: "border-box", padding: 18, border: "1px solid #dfddd7", borderRadius: 7, background: "#f7f5f0" };
|
|
@@ -2440,8 +2558,8 @@ function editorText(block, name, fallback) {
|
|
|
2440
2558
|
}
|
|
2441
2559
|
function SalesInlineText({ block, name, fallback, style }) {
|
|
2442
2560
|
const value = editorText(block, name, fallback);
|
|
2443
|
-
if (!block.selected) return /* @__PURE__ */
|
|
2444
|
-
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: {
|
|
2445
2563
|
boxSizing: "border-box",
|
|
2446
2564
|
width: "100%",
|
|
2447
2565
|
/* border: "1px dashed currentColor", */
|
|
@@ -2458,95 +2576,95 @@ function SalesInlineText({ block, name, fallback, style }) {
|
|
|
2458
2576
|
} });
|
|
2459
2577
|
}
|
|
2460
2578
|
function SalesEditorSurface({ block, children }) {
|
|
2461
|
-
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 });
|
|
2462
2580
|
}
|
|
2463
2581
|
function SalesAnnouncementEditor(block) {
|
|
2464
|
-
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" }) });
|
|
2465
2583
|
}
|
|
2466
2584
|
function SalesQueryEditor(block) {
|
|
2467
2585
|
const imageUrl = safeImageUrl3(block.heroImageUrl);
|
|
2468
2586
|
const trackingNumber = editorText(block, "defaultTrackingNumber", "BT-2048-DEMO");
|
|
2469
|
-
return /* @__PURE__ */
|
|
2470
|
-
imageUrl ? /* @__PURE__ */
|
|
2471
|
-
/* @__PURE__ */
|
|
2472
|
-
/* @__PURE__ */
|
|
2473
|
-
/* @__PURE__ */
|
|
2474
|
-
/* @__PURE__ */
|
|
2475
|
-
/* @__PURE__ */
|
|
2476
|
-
/* @__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" })
|
|
2477
2595
|
] })
|
|
2478
2596
|
] });
|
|
2479
2597
|
}
|
|
2480
2598
|
function SalesOrderItemsEditor(block) {
|
|
2481
|
-
return /* @__PURE__ */
|
|
2482
|
-
/* @__PURE__ */
|
|
2483
|
-
/* @__PURE__ */
|
|
2484
|
-
/* @__PURE__ */
|
|
2485
|
-
/* @__PURE__ */
|
|
2486
|
-
/* @__PURE__ */
|
|
2487
|
-
/* @__PURE__ */
|
|
2488
|
-
/* @__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." })
|
|
2489
2607
|
] })
|
|
2490
2608
|
] })
|
|
2491
2609
|
] });
|
|
2492
2610
|
}
|
|
2493
2611
|
function SalesOtherTrackingEditor(block) {
|
|
2494
|
-
return /* @__PURE__ */
|
|
2495
|
-
/* @__PURE__ */
|
|
2496
|
-
/* @__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." }) })
|
|
2497
2615
|
] });
|
|
2498
2616
|
}
|
|
2499
2617
|
function SalesServiceCardsEditor(block) {
|
|
2500
|
-
return /* @__PURE__ */
|
|
2501
|
-
/* @__PURE__ */
|
|
2502
|
-
/* @__PURE__ */
|
|
2503
|
-
/* @__PURE__ */
|
|
2504
|
-
/* @__PURE__ */
|
|
2505
|
-
/* @__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." }) })
|
|
2506
2624
|
] }),
|
|
2507
|
-
/* @__PURE__ */
|
|
2508
|
-
/* @__PURE__ */
|
|
2509
|
-
/* @__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." }) })
|
|
2510
2628
|
] })
|
|
2511
2629
|
] })
|
|
2512
2630
|
] });
|
|
2513
2631
|
}
|
|
2514
2632
|
function SalesProductCategoriesEditor(block) {
|
|
2515
2633
|
const collection = isShopifyResourceReference(block.collection, "collection") ? block.collection : void 0;
|
|
2516
|
-
return /* @__PURE__ */
|
|
2517
|
-
/* @__PURE__ */
|
|
2518
|
-
/* @__PURE__ */
|
|
2519
|
-
/* @__PURE__ */
|
|
2520
|
-
/* @__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" })
|
|
2521
2639
|
] })
|
|
2522
2640
|
] });
|
|
2523
2641
|
}
|
|
2524
2642
|
function SalesFeaturedProductEditor(block) {
|
|
2525
2643
|
const product = isShopifyResourceReference(block.product, "product") ? block.product : void 0;
|
|
2526
|
-
return /* @__PURE__ */
|
|
2527
|
-
/* @__PURE__ */
|
|
2528
|
-
/* @__PURE__ */
|
|
2529
|
-
/* @__PURE__ */
|
|
2530
|
-
/* @__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" })
|
|
2531
2649
|
] }),
|
|
2532
|
-
/* @__PURE__ */
|
|
2650
|
+
/* @__PURE__ */ jsx7("small", { style: { display: "block", marginTop: 10, color: "#6b6b6b" }, children: "Availability is supplied by the authorized runtime." })
|
|
2533
2651
|
] });
|
|
2534
2652
|
}
|
|
2535
2653
|
function SalesRecommendationsEditor(block) {
|
|
2536
|
-
return /* @__PURE__ */
|
|
2537
|
-
/* @__PURE__ */
|
|
2538
|
-
/* @__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." })
|
|
2539
2657
|
] });
|
|
2540
2658
|
}
|
|
2541
2659
|
function SalesAnnouncementBlock(props) {
|
|
2542
|
-
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") }) });
|
|
2543
2661
|
}
|
|
2544
2662
|
function SalesQueryBlock(props) {
|
|
2545
2663
|
const runtime = useSalesRuntime();
|
|
2546
|
-
return /* @__PURE__ */
|
|
2547
|
-
/* @__PURE__ */
|
|
2548
|
-
/* @__PURE__ */
|
|
2549
|
-
/* @__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(
|
|
2550
2668
|
TrackingQueryCard,
|
|
2551
2669
|
{
|
|
2552
2670
|
phase: runtime.phase,
|
|
@@ -2555,8 +2673,6 @@ function SalesQueryBlock(props) {
|
|
|
2555
2673
|
submitLabel: text5(props, "submitLabel", "Track order"),
|
|
2556
2674
|
initialTrackingNumber: text5(props, "defaultTrackingNumber", "BT-2048-DEMO"),
|
|
2557
2675
|
initialOrderNumber: text5(props, "defaultOrderNumber", ""),
|
|
2558
|
-
loadingLabel: "Checking...",
|
|
2559
|
-
loadingMessage: "Checking your order\u2026",
|
|
2560
2676
|
emptyMessage: "We couldn\u2019t find an order for that number.",
|
|
2561
2677
|
errorMessage: "We couldn\u2019t retrieve this order right now. Please try again later.",
|
|
2562
2678
|
trackingInputLabel: "Sales tracking number",
|
|
@@ -2571,9 +2687,9 @@ function SalesQueryBlock(props) {
|
|
|
2571
2687
|
formStyle: { gap: 14 },
|
|
2572
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 },
|
|
2573
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" }),
|
|
2574
|
-
result: runtime.result ? /* @__PURE__ */
|
|
2690
|
+
result: runtime.result ? /* @__PURE__ */ jsx7(TrackingQueryResultDetails, { result: runtime.result }) : null,
|
|
2575
2691
|
resultStyle: { padding: 16, border: "1px solid var(--pb-color-border)", borderRadius: "calc(var(--pb-radius) / 1.25)", background: "var(--pb-color-background)" },
|
|
2576
|
-
watermark: /* @__PURE__ */
|
|
2692
|
+
watermark: /* @__PURE__ */ jsx7(RuntimeWatermark3, { watermark: runtime.watermark })
|
|
2577
2693
|
}
|
|
2578
2694
|
) })
|
|
2579
2695
|
] });
|
|
@@ -2582,114 +2698,114 @@ function SalesOrderItemsBlock(props) {
|
|
|
2582
2698
|
const runtime = useSalesRuntime();
|
|
2583
2699
|
const title = text5(props, "heading", "Items in your order");
|
|
2584
2700
|
const items = runtime.result?.orderItems ?? [];
|
|
2585
|
-
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) => {
|
|
2586
2702
|
const href = safeHref3(item.href);
|
|
2587
2703
|
const itemTitle = text5(item, "title", "Order item");
|
|
2588
|
-
const itemContent = href ? /* @__PURE__ */
|
|
2589
|
-
return /* @__PURE__ */
|
|
2590
|
-
/* @__PURE__ */
|
|
2591
|
-
/* @__PURE__ */
|
|
2592
|
-
/* @__PURE__ */
|
|
2593
|
-
/* @__PURE__ */
|
|
2594
|
-
/* @__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: [
|
|
2595
2711
|
"Qty ",
|
|
2596
2712
|
Number.isFinite(item.quantity) && item.quantity > 0 ? item.quantity : 1
|
|
2597
2713
|
] }),
|
|
2598
|
-
item.description ? /* @__PURE__ */
|
|
2599
|
-
/* @__PURE__ */
|
|
2600
|
-
/* @__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 })
|
|
2601
2717
|
] }) : null
|
|
2602
2718
|
] })
|
|
2603
2719
|
] }, item.id);
|
|
2604
|
-
}) }) : /* @__PURE__ */
|
|
2720
|
+
}) }) : /* @__PURE__ */ jsx7(Status, { children: runtime.phase === "loading" ? "Loading order items\u2026" : "Order items appear after a successful query." }) });
|
|
2605
2721
|
}
|
|
2606
2722
|
function SalesOtherTrackingBlock(props) {
|
|
2607
2723
|
const runtime = useSalesRuntime();
|
|
2608
2724
|
const title = text5(props, "heading", "Other shipments");
|
|
2609
2725
|
const shipments = (runtime.result?.shipments ?? []).filter((shipment) => shipment.trackingNumber !== runtime.result?.trackingNumber);
|
|
2610
|
-
return /* @__PURE__ */
|
|
2611
|
-
/* @__PURE__ */
|
|
2612
|
-
shipment.status ? /* @__PURE__ */
|
|
2613
|
-
shipment.trackingNumber ? /* @__PURE__ */
|
|
2614
|
-
] }, 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." }) });
|
|
2615
2731
|
}
|
|
2616
2732
|
function SalesServiceCardsBlock(props) {
|
|
2617
2733
|
const title = text5(props, "heading", "Shop with confidence");
|
|
2618
|
-
return /* @__PURE__ */
|
|
2619
|
-
/* @__PURE__ */
|
|
2620
|
-
/* @__PURE__ */
|
|
2621
|
-
/* @__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.") })
|
|
2622
2738
|
] }),
|
|
2623
|
-
/* @__PURE__ */
|
|
2624
|
-
/* @__PURE__ */
|
|
2625
|
-
/* @__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.") })
|
|
2626
2742
|
] })
|
|
2627
2743
|
] }) });
|
|
2628
2744
|
}
|
|
2629
2745
|
function SalesProductCategoriesBlock(props) {
|
|
2630
2746
|
const title = text5(props, "heading", "Shop by category");
|
|
2631
2747
|
const runtime = useSalesRuntime();
|
|
2632
|
-
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." }) });
|
|
2633
2749
|
const collection = isShopifyResourceReference(props.collection, "collection") ? props.collection : void 0;
|
|
2634
|
-
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." }) });
|
|
2635
2751
|
const resolved = getResolvedShopifyResource(collection, runtime.resourceResolution);
|
|
2636
2752
|
const error = getShopifyResourceResolutionError(collection, runtime.resourceResolution);
|
|
2637
|
-
if (error) return /* @__PURE__ */
|
|
2638
|
-
if (!resolved) return /* @__PURE__ */
|
|
2639
|
-
const content = /* @__PURE__ */
|
|
2640
|
-
/* @__PURE__ */
|
|
2641
|
-
/* @__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" })
|
|
2642
2758
|
] });
|
|
2643
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" };
|
|
2644
|
-
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 }) });
|
|
2645
2761
|
}
|
|
2646
2762
|
function SalesFeaturedProductBlock(props) {
|
|
2647
2763
|
const runtime = useSalesRuntime();
|
|
2648
2764
|
const title = text5(props, "heading", "Featured product");
|
|
2649
|
-
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." }) });
|
|
2650
2766
|
const product = isShopifyResourceReference(props.product, "product") ? props.product : void 0;
|
|
2651
|
-
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." }) });
|
|
2652
2768
|
const resolved = getResolvedShopifyResource(product, runtime.resourceResolution);
|
|
2653
2769
|
const error = getShopifyResourceResolutionError(product, runtime.resourceResolution);
|
|
2654
|
-
if (error) return /* @__PURE__ */
|
|
2655
|
-
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." }) });
|
|
2656
2772
|
const available = resolved.availability === "available";
|
|
2657
|
-
const body = /* @__PURE__ */
|
|
2658
|
-
/* @__PURE__ */
|
|
2659
|
-
/* @__PURE__ */
|
|
2660
|
-
/* @__PURE__ */
|
|
2661
|
-
/* @__PURE__ */
|
|
2662
|
-
/* @__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" })
|
|
2663
2779
|
] })
|
|
2664
2780
|
] });
|
|
2665
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" };
|
|
2666
|
-
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 }) });
|
|
2667
2783
|
}
|
|
2668
2784
|
function SalesRecommendationsBlock(props) {
|
|
2669
2785
|
const runtime = useSalesRuntime();
|
|
2670
2786
|
const title = text5(props, "heading", "Complete your order");
|
|
2671
2787
|
const recommendations = runtime.result?.recommendations ?? [];
|
|
2672
|
-
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) => {
|
|
2673
2789
|
const href = safeHref3(item.href);
|
|
2674
2790
|
const itemTitle = text5(item, "title", "Recommended product");
|
|
2675
2791
|
const price = item.price ? formatTrackingPageMoney(item.price) : void 0;
|
|
2676
|
-
return /* @__PURE__ */
|
|
2677
|
-
/* @__PURE__ */
|
|
2678
|
-
/* @__PURE__ */
|
|
2679
|
-
/* @__PURE__ */
|
|
2680
|
-
price?.amount ? /* @__PURE__ */
|
|
2681
|
-
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
|
|
2682
2798
|
] })
|
|
2683
2799
|
] }, item.id);
|
|
2684
|
-
}) }) : /* @__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." }) });
|
|
2685
2801
|
}
|
|
2686
2802
|
|
|
2687
2803
|
// src/shopify-resources.tsx
|
|
2688
2804
|
import { createContext as createContext4, useCallback as useCallback5, useContext as useContext4, useState as useState6 } from "react";
|
|
2689
|
-
import { jsx as
|
|
2805
|
+
import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
2690
2806
|
var ShopifyResourceBrowserContext = createContext4(void 0);
|
|
2691
2807
|
function ShopifyResourcePickerProvider({ browser, children }) {
|
|
2692
|
-
return /* @__PURE__ */
|
|
2808
|
+
return /* @__PURE__ */ jsx8(ShopifyResourceBrowserContext.Provider, { value: browser, children });
|
|
2693
2809
|
}
|
|
2694
2810
|
var pickerSurface = { marginTop: 8, padding: 12, border: "1px solid #c9cccf", borderRadius: 8, background: "#fff", color: "#202223" };
|
|
2695
2811
|
var pickerButton = { minHeight: 32, padding: "6px 10px", border: "1px solid #8c9196", borderRadius: 6, background: "#fff", color: "#202223", font: "inherit", cursor: "pointer" };
|
|
@@ -2715,17 +2831,17 @@ function ResourceField({ value, onChange, kind }) {
|
|
|
2715
2831
|
}
|
|
2716
2832
|
}, [browser, kind]);
|
|
2717
2833
|
const name = kind === "product" ? "product" : "collection";
|
|
2718
|
-
return /* @__PURE__ */
|
|
2719
|
-
selected ? /* @__PURE__ */
|
|
2720
|
-
/* @__PURE__ */
|
|
2721
|
-
/* @__PURE__ */
|
|
2722
|
-
/* @__PURE__ */
|
|
2723
|
-
] }) : /* @__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: [
|
|
2724
2840
|
"No ",
|
|
2725
2841
|
name,
|
|
2726
2842
|
" selected."
|
|
2727
2843
|
] }),
|
|
2728
|
-
/* @__PURE__ */
|
|
2844
|
+
/* @__PURE__ */ jsx8("button", { type: "button", style: pickerButton, onClick: () => {
|
|
2729
2845
|
if (open) {
|
|
2730
2846
|
setOpen(false);
|
|
2731
2847
|
return;
|
|
@@ -2734,41 +2850,41 @@ function ResourceField({ value, onChange, kind }) {
|
|
|
2734
2850
|
if (browser) void search("");
|
|
2735
2851
|
else setState("error");
|
|
2736
2852
|
}, children: open ? "Close selector" : `Select ${name}` }),
|
|
2737
|
-
open ? /* @__PURE__ */
|
|
2738
|
-
/* @__PURE__ */
|
|
2853
|
+
open ? /* @__PURE__ */ jsxs8("div", { role: "dialog", "aria-label": `Select Shopify ${name}`, style: pickerSurface, children: [
|
|
2854
|
+
/* @__PURE__ */ jsxs8("form", { onSubmit: (event) => {
|
|
2739
2855
|
event.preventDefault();
|
|
2740
2856
|
void search(query);
|
|
2741
2857
|
}, children: [
|
|
2742
|
-
/* @__PURE__ */
|
|
2858
|
+
/* @__PURE__ */ jsxs8("label", { style: { display: "block" }, children: [
|
|
2743
2859
|
"Search ",
|
|
2744
2860
|
name,
|
|
2745
2861
|
"s",
|
|
2746
|
-
/* @__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" } })
|
|
2747
2863
|
] }),
|
|
2748
|
-
/* @__PURE__ */
|
|
2864
|
+
/* @__PURE__ */ jsx8("button", { type: "submit", disabled: state === "loading", style: { ...pickerButton, marginTop: 8 }, children: state === "loading" ? "Searching\u2026" : "Search" })
|
|
2749
2865
|
] }),
|
|
2750
|
-
state === "error" ? /* @__PURE__ */
|
|
2751
|
-
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: [
|
|
2752
2868
|
"No ",
|
|
2753
2869
|
name,
|
|
2754
2870
|
"s found."
|
|
2755
2871
|
] }) : null,
|
|
2756
|
-
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: () => {
|
|
2757
2873
|
onChange(item);
|
|
2758
2874
|
setOpen(false);
|
|
2759
2875
|
}, children: [
|
|
2760
|
-
/* @__PURE__ */
|
|
2761
|
-
item.handle ? /* @__PURE__ */
|
|
2876
|
+
/* @__PURE__ */ jsx8("strong", { children: item.title }),
|
|
2877
|
+
item.handle ? /* @__PURE__ */ jsx8("small", { style: { display: "block" }, children: item.handle }) : null
|
|
2762
2878
|
] }) }, item.id)) }) : null,
|
|
2763
|
-
cursor ? /* @__PURE__ */
|
|
2879
|
+
cursor ? /* @__PURE__ */ jsx8("button", { type: "button", disabled: state === "loading", style: pickerButton, onClick: () => void search(query, cursor, true), children: "Load more" }) : null
|
|
2764
2880
|
] }) : null
|
|
2765
2881
|
] });
|
|
2766
2882
|
}
|
|
2767
2883
|
function ShopifyProductResourceField(props) {
|
|
2768
|
-
return /* @__PURE__ */
|
|
2884
|
+
return /* @__PURE__ */ jsx8(ResourceField, { ...props, kind: "product" });
|
|
2769
2885
|
}
|
|
2770
2886
|
function ShopifyCollectionResourceField(props) {
|
|
2771
|
-
return /* @__PURE__ */
|
|
2887
|
+
return /* @__PURE__ */ jsx8(ResourceField, { ...props, kind: "collection" });
|
|
2772
2888
|
}
|
|
2773
2889
|
|
|
2774
2890
|
// src/sales-definition.ts
|