@standhigher/besttrack-page-extension 0.5.4 → 0.5.6
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 +545 -427
- 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(/^#/, ""));
|
|
@@ -838,12 +910,15 @@ var contentWidth = {
|
|
|
838
910
|
boxSizing: "border-box"
|
|
839
911
|
};
|
|
840
912
|
var trackingProgressStyles = `
|
|
913
|
+
.bt-progress-band { container-type: inline-size; }
|
|
914
|
+
.bt-edd-card { --bt-progress-icon: 44px; }
|
|
841
915
|
.bt-progress { container-type: inline-size; }
|
|
842
916
|
.bt-progress__icon { width: 44px; height: 44px; }
|
|
843
917
|
.bt-progress__line { top: 19px; }
|
|
844
918
|
.bt-progress__copy { margin-top: 16px; }
|
|
845
919
|
.bt-progress__label { font-size: 16px; line-height: 20px; }
|
|
846
920
|
@container (max-width: 640px) {
|
|
921
|
+
.bt-edd-card { --bt-progress-icon: 32px; }
|
|
847
922
|
.bt-progress__icon { width: 32px; height: 32px; }
|
|
848
923
|
.bt-progress__line { top: 13px; }
|
|
849
924
|
.bt-progress__copy { margin-top: 8px; }
|
|
@@ -1046,6 +1121,7 @@ function RecommendationCards({ items }) {
|
|
|
1046
1121
|
] });
|
|
1047
1122
|
}
|
|
1048
1123
|
var trackingPageAdSlotStyle = {
|
|
1124
|
+
position: "relative",
|
|
1049
1125
|
display: "block",
|
|
1050
1126
|
width: "100%",
|
|
1051
1127
|
maxWidth: 500,
|
|
@@ -1055,6 +1131,8 @@ var trackingPageAdSlotStyle = {
|
|
|
1055
1131
|
textDecoration: "none"
|
|
1056
1132
|
};
|
|
1057
1133
|
var trackingPageAdImageStyle = {
|
|
1134
|
+
position: "absolute",
|
|
1135
|
+
inset: 0,
|
|
1058
1136
|
display: "block",
|
|
1059
1137
|
width: "100%",
|
|
1060
1138
|
height: "100%",
|
|
@@ -1070,25 +1148,16 @@ function TrackingPageAdSlot({ ad, disableLink = false }) {
|
|
|
1070
1148
|
if (!href || disableLink) return /* @__PURE__ */ jsx("div", { "data-tracking-page-ad": true, style: trackingPageAdSlotStyle, children: content });
|
|
1071
1149
|
return /* @__PURE__ */ jsx("a", { "data-tracking-page-ad": true, href, target: "_blank", rel: "noopener noreferrer", style: trackingPageAdSlotStyle, children: content });
|
|
1072
1150
|
}
|
|
1073
|
-
function EstimatedDeliveryCard({ dateText }) {
|
|
1074
|
-
|
|
1151
|
+
function EstimatedDeliveryCard({ dateText, steps = 5 }) {
|
|
1152
|
+
const trackInset = `max(0px, calc(50% / ${Math.max(steps, 1)} - var(--bt-progress-icon, 44px) / 2))`;
|
|
1153
|
+
return /* @__PURE__ */ jsxs("div", { "aria-label": "Est. Delivery", className: "bt-edd-card", style: { margin: `16px ${trackInset} 0`, width: "auto", boxSizing: "border-box", border: "1px solid transparent", borderRadius: 10, backgroundColor: "#eaf4ff", padding: "20px 22px 18px", textAlign: "left" }, children: [
|
|
1075
1154
|
/* @__PURE__ */ jsx("p", { style: { margin: 0, color: "#202124", fontSize: 13, fontWeight: 700, lineHeight: 1.3 }, children: "Est. Delivery" }),
|
|
1076
1155
|
/* @__PURE__ */ jsx("p", { style: { margin: "6px 0 0", color: "#202124", fontSize: 22, fontWeight: 700, lineHeight: 1.15, letterSpacing: 0, overflowWrap: "anywhere", wordBreak: "break-word" }, children: dateText }),
|
|
1077
1156
|
/* @__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
1157
|
] });
|
|
1079
1158
|
}
|
|
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
|
-
] });
|
|
1159
|
+
function SectionShell({ title, children, bordered = true, resultAnchor = false }) {
|
|
1160
|
+
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
1161
|
}
|
|
1093
1162
|
|
|
1094
1163
|
// src/shopify-track-page/assets/not-found.png.ts
|
|
@@ -1096,15 +1165,68 @@ var not_found_png_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcQAA
|
|
|
1096
1165
|
|
|
1097
1166
|
// src/tracking-not-found.tsx
|
|
1098
1167
|
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: [
|
|
1168
|
+
function TrackingNotFound({ resultAnchor = false } = {}) {
|
|
1169
|
+
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
1170
|
/* @__PURE__ */ jsx2("img", { src: not_found_png_default, alt: "", width: 180, height: 180, style: { width: 180, height: 180, objectFit: "contain" } }),
|
|
1102
1171
|
/* @__PURE__ */ jsx2("p", { style: { margin: 0, fontSize: 16, fontWeight: 500, color: "#475569" }, children: "Can not find order" })
|
|
1103
1172
|
] });
|
|
1104
1173
|
}
|
|
1105
1174
|
|
|
1106
|
-
// src/
|
|
1175
|
+
// src/tracking-loading.tsx
|
|
1176
|
+
import { useId } from "react";
|
|
1107
1177
|
import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
1178
|
+
var loadingStyles = `
|
|
1179
|
+
@keyframes bt-tracking-pin-float {
|
|
1180
|
+
0%, 100% { transform: translateY(-1px); }
|
|
1181
|
+
50% { transform: translateY(-5px); }
|
|
1182
|
+
}
|
|
1183
|
+
.bt-tracking-loading__pin {
|
|
1184
|
+
transform-box: fill-box;
|
|
1185
|
+
transform-origin: center;
|
|
1186
|
+
animation: bt-tracking-pin-float 1.8s ease-in-out infinite;
|
|
1187
|
+
}
|
|
1188
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1189
|
+
.bt-tracking-loading__pin { animation: none; transform: translateY(-1px); }
|
|
1190
|
+
}
|
|
1191
|
+
`;
|
|
1192
|
+
function TrackingLoading() {
|
|
1193
|
+
const id = useId();
|
|
1194
|
+
return /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1195
|
+
/* @__PURE__ */ jsx3("style", { children: loadingStyles }),
|
|
1196
|
+
/* @__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: [
|
|
1197
|
+
/* @__PURE__ */ jsx3("p", { style: { margin: 0, color: "var(--pb-color-muted, #64748b)", fontSize: 14, fontWeight: 400, lineHeight: "20px" }, children: "\u67E5\u8BE2\u4E2D..." }),
|
|
1198
|
+
/* @__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: [
|
|
1199
|
+
/* @__PURE__ */ jsxs3("defs", { children: [
|
|
1200
|
+
/* @__PURE__ */ jsxs3("linearGradient", { id: `${id}-top`, x1: "10", y1: "28", x2: "44", y2: "40", gradientUnits: "userSpaceOnUse", children: [
|
|
1201
|
+
/* @__PURE__ */ jsx3("stop", { stopColor: "#FFF0DA" }),
|
|
1202
|
+
/* @__PURE__ */ jsx3("stop", { offset: "1", stopColor: "#EABD8E" })
|
|
1203
|
+
] }),
|
|
1204
|
+
/* @__PURE__ */ jsxs3("linearGradient", { id: `${id}-left`, x1: "11", y1: "35", x2: "29", y2: "60", gradientUnits: "userSpaceOnUse", children: [
|
|
1205
|
+
/* @__PURE__ */ jsx3("stop", { stopColor: "#FFE8CD" }),
|
|
1206
|
+
/* @__PURE__ */ jsx3("stop", { offset: "1", stopColor: "#F3C79C" })
|
|
1207
|
+
] }),
|
|
1208
|
+
/* @__PURE__ */ jsxs3("linearGradient", { id: `${id}-right`, x1: "28", y1: "40", x2: "45", y2: "52", gradientUnits: "userSpaceOnUse", children: [
|
|
1209
|
+
/* @__PURE__ */ jsx3("stop", { stopColor: "#F8D2AA" }),
|
|
1210
|
+
/* @__PURE__ */ jsx3("stop", { offset: "1", stopColor: "#DCA574" })
|
|
1211
|
+
] }),
|
|
1212
|
+
/* @__PURE__ */ jsxs3("linearGradient", { id: `${id}-pin`, x1: "21", y1: "8", x2: "35", y2: "25", gradientUnits: "userSpaceOnUse", children: [
|
|
1213
|
+
/* @__PURE__ */ jsx3("stop", { stopColor: "#FFD18A" }),
|
|
1214
|
+
/* @__PURE__ */ jsx3("stop", { offset: "1", stopColor: "#F6A34A" })
|
|
1215
|
+
] })
|
|
1216
|
+
] }),
|
|
1217
|
+
/* @__PURE__ */ jsx3("path", { d: "m11 35 17-10 17 10-17 10-17-10Z", fill: `url(#${id}-top)` }),
|
|
1218
|
+
/* @__PURE__ */ jsx3("path", { d: "M11 35v19l17 10V45L11 35Z", fill: `url(#${id}-left)` }),
|
|
1219
|
+
/* @__PURE__ */ jsx3("path", { d: "M28 45v19l17-10V35L28 45Z", fill: `url(#${id}-right)` }),
|
|
1220
|
+
/* @__PURE__ */ jsx3("path", { d: "m18 31 17 10v19l4-2V39L22 29l-4 2Z", fill: "#FFF3E0", fillOpacity: ".6" }),
|
|
1221
|
+
/* @__PURE__ */ jsx3("path", { d: "M11 35 28 45 45 35M28 45v19", stroke: "#FFF8EC", strokeOpacity: ".35", strokeWidth: ".7" }),
|
|
1222
|
+
/* @__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" }) })
|
|
1223
|
+
] })
|
|
1224
|
+
] })
|
|
1225
|
+
] });
|
|
1226
|
+
}
|
|
1227
|
+
|
|
1228
|
+
// src/ready-to-go.tsx
|
|
1229
|
+
import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
1108
1230
|
var initialRuntime = {
|
|
1109
1231
|
phase: "idle",
|
|
1110
1232
|
recommendations: { phase: "idle", items: [] },
|
|
@@ -1141,7 +1263,7 @@ async function queryMockReadyToGoTracking(request) {
|
|
|
1141
1263
|
}
|
|
1142
1264
|
function ReadyToGoRuntimeProvider({ children, query: injectedQuery, queryRecommendations, transport, autoQueryFromUrl, autoQueryDemo = false, watermark, adPreview }) {
|
|
1143
1265
|
const [state, setState] = useState2({ phase: "idle" });
|
|
1144
|
-
const [recommendations, setRecommendations] = useState2(() => queryRecommendations || transport ? { phase: "loading", items: [] } : { phase: "
|
|
1266
|
+
const [recommendations, setRecommendations] = useState2(() => queryRecommendations || transport ? { phase: "loading", items: [] } : { phase: "idle", items: [] });
|
|
1145
1267
|
const requestId = useRef(0);
|
|
1146
1268
|
const resolvedQuery = useMemo2(() => {
|
|
1147
1269
|
if (injectedQuery) return injectedQuery;
|
|
@@ -1186,13 +1308,13 @@ function ReadyToGoRuntimeProvider({ children, query: injectedQuery, queryRecomme
|
|
|
1186
1308
|
[watermark]
|
|
1187
1309
|
);
|
|
1188
1310
|
const value = useMemo2(() => ({ ...state, adPreview, query, recommendations, autoQueryFromUrl: resolveAutoQuery, autoQueryDemo, watermark: resolvedWatermark }), [adPreview, autoQueryDemo, query, recommendations, resolveAutoQuery, resolvedWatermark, state]);
|
|
1189
|
-
return /* @__PURE__ */
|
|
1311
|
+
return /* @__PURE__ */ jsx4(ReadyToGoRuntimeContext.Provider, { value, children });
|
|
1190
1312
|
}
|
|
1191
1313
|
function useReadyToGoRuntime() {
|
|
1192
1314
|
return useContext(ReadyToGoRuntimeContext);
|
|
1193
1315
|
}
|
|
1194
1316
|
function RuntimeWatermark({ watermark }) {
|
|
1195
|
-
return watermark?.visible ? /* @__PURE__ */
|
|
1317
|
+
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
1318
|
}
|
|
1197
1319
|
var heroStyle = {
|
|
1198
1320
|
...pageFont,
|
|
@@ -1284,12 +1406,12 @@ function submitButtonStyle(props, loading = false) {
|
|
|
1284
1406
|
};
|
|
1285
1407
|
}
|
|
1286
1408
|
function ReadyToGoTextField({ value, onChange }) {
|
|
1287
|
-
return /* @__PURE__ */
|
|
1409
|
+
return /* @__PURE__ */ jsx4("input", { "aria-label": "Ready-to-go text", value: typeof value === "string" ? value : "", onChange: (event) => onChange(event.target.value) });
|
|
1288
1410
|
}
|
|
1289
1411
|
function InlineText({ block, name, fallback }) {
|
|
1290
1412
|
const value = text(block, name, fallback);
|
|
1291
|
-
if (!block.selected) return /* @__PURE__ */
|
|
1292
|
-
return /* @__PURE__ */
|
|
1413
|
+
if (!block.selected) return /* @__PURE__ */ jsx4("span", { "data-ready-to-go-editor-field": name, children: value });
|
|
1414
|
+
return /* @__PURE__ */ jsx4(
|
|
1293
1415
|
"input",
|
|
1294
1416
|
{
|
|
1295
1417
|
"aria-label": "Canvas " + name,
|
|
@@ -1325,45 +1447,46 @@ function eventsFrom(result) {
|
|
|
1325
1447
|
}
|
|
1326
1448
|
function ProgressResult({ result, showEstimatedDelivery = true, color }) {
|
|
1327
1449
|
const steps = result.progress?.length ? result.progress : defaultProgress(result.status);
|
|
1328
|
-
return /* @__PURE__ */
|
|
1329
|
-
/* @__PURE__ */
|
|
1450
|
+
return /* @__PURE__ */ jsxs4(Fragment3, { children: [
|
|
1451
|
+
/* @__PURE__ */ jsxs4("p", { style: { margin: 0, fontSize: 20, lineHeight: 1.4, color: "#000", overflowWrap: "anywhere" }, children: [
|
|
1330
1452
|
"Tracking: ",
|
|
1331
1453
|
result.trackingNumber
|
|
1332
1454
|
] }),
|
|
1333
|
-
/* @__PURE__ */
|
|
1334
|
-
|
|
1335
|
-
|
|
1455
|
+
/* @__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 }),
|
|
1456
|
+
/* @__PURE__ */ jsxs4("div", { className: "bt-progress-band", children: [
|
|
1457
|
+
showEstimatedDelivery && result.estimatedDelivery ? /* @__PURE__ */ jsx4(EstimatedDeliveryCard, { dateText: result.estimatedDelivery, steps: steps.length }) : null,
|
|
1458
|
+
/* @__PURE__ */ jsx4(TrackingProgress, { steps, color })
|
|
1459
|
+
] })
|
|
1336
1460
|
] });
|
|
1337
1461
|
}
|
|
1338
1462
|
function DeliveryResult({ heading, contentsHeading, carrierHeading, result, editing }) {
|
|
1339
|
-
return /* @__PURE__ */
|
|
1340
|
-
/* @__PURE__ */
|
|
1341
|
-
/* @__PURE__ */
|
|
1342
|
-
/* @__PURE__ */
|
|
1463
|
+
return /* @__PURE__ */ jsxs4("div", { style: { ...contentWidth, display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 280px), 500px))", gap: 40, justifyContent: "center", alignItems: "start" }, children: [
|
|
1464
|
+
/* @__PURE__ */ jsxs4("div", { children: [
|
|
1465
|
+
/* @__PURE__ */ jsx4("h3", { style: { margin: 0, fontSize: 20, lineHeight: "20px", fontWeight: 700 }, children: heading }),
|
|
1466
|
+
/* @__PURE__ */ jsx4(ShippingTimeline, { events: eventsFrom(result) })
|
|
1343
1467
|
] }),
|
|
1344
|
-
/* @__PURE__ */
|
|
1345
|
-
/* @__PURE__ */
|
|
1346
|
-
/* @__PURE__ */
|
|
1347
|
-
/* @__PURE__ */
|
|
1348
|
-
/* @__PURE__ */
|
|
1468
|
+
/* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", gap: 24 }, children: [
|
|
1469
|
+
/* @__PURE__ */ jsx4(TrackingPageAdSlot, { ad: result.ad, disableLink: editing }),
|
|
1470
|
+
/* @__PURE__ */ jsxs4("div", { children: [
|
|
1471
|
+
/* @__PURE__ */ jsx4("h3", { style: { margin: "0 0 12px", fontSize: 18, fontWeight: 700 }, children: contentsHeading }),
|
|
1472
|
+
/* @__PURE__ */ jsx4(PackageContents, { items: result.orderItems ?? [] })
|
|
1349
1473
|
] }),
|
|
1350
|
-
/* @__PURE__ */
|
|
1351
|
-
/* @__PURE__ */
|
|
1352
|
-
/* @__PURE__ */
|
|
1353
|
-
/* @__PURE__ */
|
|
1474
|
+
/* @__PURE__ */ jsxs4("div", { children: [
|
|
1475
|
+
/* @__PURE__ */ jsx4("h3", { style: { margin: "0 0 12px", fontSize: 18, fontWeight: 700 }, children: carrierHeading }),
|
|
1476
|
+
/* @__PURE__ */ jsx4("p", { style: { margin: 0, fontSize: 14, fontWeight: 600, color: "#1e293b" }, children: result.carrier ?? "Not available" }),
|
|
1477
|
+
/* @__PURE__ */ jsx4("p", { style: { margin: "8px 0 0", fontSize: 14, color: "#64748b" }, children: result.destination ?? "Destination details are not available." })
|
|
1354
1478
|
] })
|
|
1355
1479
|
] })
|
|
1356
1480
|
] });
|
|
1357
1481
|
}
|
|
1358
1482
|
function ReadyToGoQueryEditor(block) {
|
|
1359
|
-
return /* @__PURE__ */
|
|
1360
|
-
/* @__PURE__ */
|
|
1361
|
-
|
|
1362
|
-
/* @__PURE__ */
|
|
1363
|
-
/* @__PURE__ */ jsx3("div", { style: { ...tabStyle(false), display: "flex", alignItems: "center", justifyContent: "center", cursor: "default" }, children: /* @__PURE__ */ jsx3(InlineText, { block, name: "orderTabLabel", fallback: "Order Number" }) })
|
|
1483
|
+
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: [
|
|
1484
|
+
/* @__PURE__ */ jsxs4("div", { style: { display: "flex", width: "100%", borderBottom: "1px solid #cbd5e1" }, children: [
|
|
1485
|
+
/* @__PURE__ */ jsx4("div", { style: { ...tabStyle(true), display: "flex", alignItems: "center", justifyContent: "center", cursor: "default" }, children: /* @__PURE__ */ jsx4(InlineText, { block, name: "trackingTabLabel", fallback: "Tracking Number" }) }),
|
|
1486
|
+
/* @__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
1487
|
] }),
|
|
1365
|
-
/* @__PURE__ */
|
|
1366
|
-
/* @__PURE__ */
|
|
1488
|
+
/* @__PURE__ */ jsxs4("div", { style: { marginTop: 24, display: "flex", flexDirection: "column", gap: 16, flex: 1 }, children: [
|
|
1489
|
+
/* @__PURE__ */ jsx4(
|
|
1367
1490
|
"input",
|
|
1368
1491
|
{
|
|
1369
1492
|
"aria-label": "Canvas default tracking number",
|
|
@@ -1378,39 +1501,42 @@ function ReadyToGoQueryEditor(block) {
|
|
|
1378
1501
|
}
|
|
1379
1502
|
}
|
|
1380
1503
|
),
|
|
1381
|
-
/* @__PURE__ */
|
|
1504
|
+
/* @__PURE__ */ jsx4("div", { style: submitButtonStyle(block), children: /* @__PURE__ */ jsx4(InlineText, { block, name: "submitLabel", fallback: "Track Your Order" }) })
|
|
1382
1505
|
] }),
|
|
1383
|
-
/* @__PURE__ */
|
|
1506
|
+
/* @__PURE__ */ jsx4("p", { style: { marginTop: "auto", paddingTop: 28, textAlign: "center", fontSize: 12, lineHeight: "17px", fontStyle: "italic", color: "#b8b8b8" }, children: "Powered by BestTrack" })
|
|
1384
1507
|
] }) });
|
|
1385
1508
|
}
|
|
1386
1509
|
function ReadyToGoProgressEditor(block) {
|
|
1387
|
-
return /* @__PURE__ */
|
|
1510
|
+
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
1511
|
}
|
|
1389
1512
|
function ReadyToGoDeliveryEditor(block) {
|
|
1390
1513
|
const { adPreview } = useReadyToGoRuntime();
|
|
1391
|
-
return /* @__PURE__ */
|
|
1514
|
+
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
1515
|
DeliveryResult,
|
|
1393
1516
|
{
|
|
1394
|
-
heading: /* @__PURE__ */
|
|
1395
|
-
contentsHeading: /* @__PURE__ */
|
|
1396
|
-
carrierHeading: /* @__PURE__ */
|
|
1517
|
+
heading: /* @__PURE__ */ jsx4(InlineText, { block, name: "heading", fallback: "Shipping Details" }),
|
|
1518
|
+
contentsHeading: /* @__PURE__ */ jsx4(InlineText, { block, name: "contentsHeading", fallback: "Package Contents" }),
|
|
1519
|
+
carrierHeading: /* @__PURE__ */ jsx4(InlineText, { block, name: "carrierHeading", fallback: "Carrier" }),
|
|
1397
1520
|
editing: true,
|
|
1398
1521
|
result: { ...previewReadyToGoTracking(), ad: adPreview ?? void 0 }
|
|
1399
1522
|
}
|
|
1400
1523
|
) });
|
|
1401
1524
|
}
|
|
1402
|
-
function
|
|
1403
|
-
|
|
1525
|
+
function configuredRecommendations(products) {
|
|
1526
|
+
return parseProductReferences(products).map((product) => ({
|
|
1404
1527
|
id: product.id,
|
|
1405
1528
|
title: product.title || product.id,
|
|
1406
1529
|
description: "",
|
|
1407
1530
|
imageUrl: product.imageUrl,
|
|
1408
1531
|
href: product.handle ? `/products/${product.handle}` : void 0
|
|
1409
1532
|
}));
|
|
1533
|
+
}
|
|
1534
|
+
function ReadyToGoRecommendationsEditor(block) {
|
|
1535
|
+
const selected = configuredRecommendations(block.products);
|
|
1410
1536
|
const items = selected.length ? selected : previewReadyToGoTracking().recommendations ?? [];
|
|
1411
|
-
return /* @__PURE__ */
|
|
1412
|
-
/* @__PURE__ */
|
|
1413
|
-
/* @__PURE__ */
|
|
1537
|
+
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: [
|
|
1538
|
+
/* @__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..." }) }),
|
|
1539
|
+
/* @__PURE__ */ jsx4("div", { style: { marginTop: 24 }, children: /* @__PURE__ */ jsx4(RecommendationCards, { items }) })
|
|
1414
1540
|
] }) });
|
|
1415
1541
|
}
|
|
1416
1542
|
function ReadyToGoQueryBlock(props) {
|
|
@@ -1423,7 +1549,6 @@ function ReadyToGoQueryBlock(props) {
|
|
|
1423
1549
|
const [localError, setLocalError] = useState2("");
|
|
1424
1550
|
const autoQueryStarted = useRef(false);
|
|
1425
1551
|
const previewDemoTrackingNumber = useRef(trackingNumber);
|
|
1426
|
-
const heading = text(props, "heading");
|
|
1427
1552
|
const submitLabel = text(props, "submitLabel", "Track Your Order");
|
|
1428
1553
|
const trackingTabLabel = text(props, "trackingTabLabel", "Tracking Number");
|
|
1429
1554
|
const orderTabLabel = text(props, "orderTabLabel", "Order Number");
|
|
@@ -1431,7 +1556,7 @@ function ReadyToGoQueryBlock(props) {
|
|
|
1431
1556
|
if (autoQueryStarted.current) return;
|
|
1432
1557
|
if (locationState?.canAutoQuery) {
|
|
1433
1558
|
autoQueryStarted.current = true;
|
|
1434
|
-
void runtime.query(locationState.tab === "tracking" ? { mode: "tracking", trackingNumber: locationState.trackingNumber } : { mode: "order", orderNumber: locationState.orderNumber, email: locationState.email });
|
|
1559
|
+
void runtime.query(locationState.tab === "tracking" ? { mode: "tracking", trackingNumber: locationState.trackingNumber } : { mode: "order", orderNumber: locationState.orderNumber, email: locationState.email }).finally(() => scrollToTrackingResult());
|
|
1435
1560
|
return;
|
|
1436
1561
|
}
|
|
1437
1562
|
const demoTrackingNumber = previewDemoTrackingNumber.current.trim();
|
|
@@ -1441,6 +1566,7 @@ function ReadyToGoQueryBlock(props) {
|
|
|
1441
1566
|
}, [locationState, runtime]);
|
|
1442
1567
|
const submit = (event) => {
|
|
1443
1568
|
event.preventDefault();
|
|
1569
|
+
if (runtime.phase === "loading") return;
|
|
1444
1570
|
setLocalError("");
|
|
1445
1571
|
if (mode === "order") {
|
|
1446
1572
|
if (!orderNumber.trim() || !email.trim()) {
|
|
@@ -1448,7 +1574,7 @@ function ReadyToGoQueryBlock(props) {
|
|
|
1448
1574
|
return;
|
|
1449
1575
|
}
|
|
1450
1576
|
syncTrackingQueryToUrl("order", orderNumber.trim(), email.trim());
|
|
1451
|
-
void runtime.query({ mode: "order", orderNumber: orderNumber.trim(), email: email.trim() });
|
|
1577
|
+
void runtime.query({ mode: "order", orderNumber: orderNumber.trim(), email: email.trim() }).finally(() => scrollToTrackingResult());
|
|
1452
1578
|
return;
|
|
1453
1579
|
}
|
|
1454
1580
|
if (!trackingNumber.trim()) {
|
|
@@ -1456,72 +1582,69 @@ function ReadyToGoQueryBlock(props) {
|
|
|
1456
1582
|
return;
|
|
1457
1583
|
}
|
|
1458
1584
|
syncTrackingQueryToUrl("tracking", trackingNumber.trim());
|
|
1459
|
-
void runtime.query({ mode: "tracking", trackingNumber: trackingNumber.trim() });
|
|
1585
|
+
void runtime.query({ mode: "tracking", trackingNumber: trackingNumber.trim() }).finally(() => scrollToTrackingResult());
|
|
1460
1586
|
};
|
|
1461
1587
|
const loading = runtime.phase === "loading";
|
|
1462
|
-
return /* @__PURE__ */
|
|
1463
|
-
|
|
1464
|
-
|
|
1465
|
-
/* @__PURE__ */ jsx3("button", { type: "button", role: "tab", "aria-selected": mode === "tracking", onClick: () => {
|
|
1588
|
+
return /* @__PURE__ */ jsx4("section", { style: heroStyle, children: /* @__PURE__ */ jsxs4("div", { role: "region", "aria-label": "Ready-to-go tracking query", style: formCardStyle, children: [
|
|
1589
|
+
/* @__PURE__ */ jsxs4("div", { role: "tablist", "aria-label": "Tracking method", style: { display: "flex", width: "100%", borderBottom: "1px solid #cbd5e1" }, children: [
|
|
1590
|
+
/* @__PURE__ */ jsx4("button", { type: "button", role: "tab", "aria-selected": mode === "tracking", onClick: () => {
|
|
1466
1591
|
setMode("tracking");
|
|
1467
1592
|
setLocalError("");
|
|
1468
1593
|
}, style: tabStyle(mode === "tracking"), children: trackingTabLabel }),
|
|
1469
|
-
/* @__PURE__ */
|
|
1594
|
+
/* @__PURE__ */ jsx4("button", { type: "button", role: "tab", "aria-selected": mode === "order", onClick: () => {
|
|
1470
1595
|
setMode("order");
|
|
1471
1596
|
setLocalError("");
|
|
1472
1597
|
}, style: tabStyle(mode === "order"), children: orderTabLabel })
|
|
1473
1598
|
] }),
|
|
1474
|
-
/* @__PURE__ */
|
|
1475
|
-
mode === "order" ? /* @__PURE__ */
|
|
1476
|
-
/* @__PURE__ */
|
|
1477
|
-
/* @__PURE__ */
|
|
1478
|
-
/* @__PURE__ */
|
|
1479
|
-
/* @__PURE__ */
|
|
1480
|
-
] }) : /* @__PURE__ */
|
|
1481
|
-
/* @__PURE__ */
|
|
1482
|
-
/* @__PURE__ */
|
|
1599
|
+
/* @__PURE__ */ jsxs4("form", { onSubmit: submit, style: { marginTop: 24, display: "flex", flexDirection: "column", gap: 16, flex: 1 }, children: [
|
|
1600
|
+
mode === "order" ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
|
|
1601
|
+
/* @__PURE__ */ jsx4("label", { htmlFor: "ready-to-go-order-number", style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clipPath: "inset(50%)" }, children: "Order number" }),
|
|
1602
|
+
/* @__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 }),
|
|
1603
|
+
/* @__PURE__ */ jsx4("label", { htmlFor: "ready-to-go-email", style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clipPath: "inset(50%)" }, children: "Email" }),
|
|
1604
|
+
/* @__PURE__ */ jsx4("input", { id: "ready-to-go-email", "aria-label": "Email", value: email, onChange: (event) => setEmail(event.target.value), placeholder: "Email", style: inputStyle })
|
|
1605
|
+
] }) : /* @__PURE__ */ jsxs4(Fragment3, { children: [
|
|
1606
|
+
/* @__PURE__ */ jsx4("label", { htmlFor: "ready-to-go-tracking-number", style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clipPath: "inset(50%)" }, children: "Tracking number" }),
|
|
1607
|
+
/* @__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
1608
|
] }),
|
|
1484
|
-
localError ? /* @__PURE__ */
|
|
1485
|
-
/* @__PURE__ */
|
|
1486
|
-
runtime.phase === "error" ? /* @__PURE__ */
|
|
1609
|
+
localError ? /* @__PURE__ */ jsx4("p", { style: { margin: 0, textAlign: "center", fontSize: 12, color: "#f43f5e" }, children: localError }) : null,
|
|
1610
|
+
/* @__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 }),
|
|
1611
|
+
runtime.phase === "error" ? /* @__PURE__ */ jsx4("p", { role: "alert", style: { margin: 0, textAlign: "center", fontSize: 12, color: "#f43f5e" }, children: runtime.error }) : null
|
|
1487
1612
|
] }),
|
|
1488
|
-
/* @__PURE__ */
|
|
1613
|
+
/* @__PURE__ */ jsx4(RuntimeWatermark, { watermark: runtime.watermark }),
|
|
1614
|
+
loading ? /* @__PURE__ */ jsx4(TrackingLoading, {}) : null
|
|
1489
1615
|
] }) });
|
|
1490
1616
|
}
|
|
1491
1617
|
function ReadyToGoProgressBlock(props) {
|
|
1492
1618
|
const runtime = useReadyToGoRuntime();
|
|
1493
1619
|
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
|
|
1620
|
+
if (runtime.phase === "idle" || runtime.phase === "loading") return null;
|
|
1621
|
+
if (runtime.phase === "empty") return /* @__PURE__ */ jsx4(TrackingNotFound, { resultAnchor: true });
|
|
1622
|
+
return /* @__PURE__ */ jsx4(SectionShell, { title: "Shipment progress", resultAnchor: true, children: /* @__PURE__ */ jsxs4("div", { style: { ...contentWidth, textAlign: "center", width: "min(1248px, 100%)" }, children: [
|
|
1623
|
+
runtime.phase === "error" ? /* @__PURE__ */ jsx4("p", { style: { margin: 0, color: "#b42318" }, children: "Shipment progress is temporarily unavailable." }) : null,
|
|
1624
|
+
runtime.phase === "success" && result ? /* @__PURE__ */ jsx4(ProgressResult, { result, showEstimatedDelivery: !runtime.autoQueryDemo, color: text(props, "progressColor") }) : null
|
|
1503
1625
|
] }) });
|
|
1504
1626
|
}
|
|
1505
1627
|
function ReadyToGoDeliveryBlock(props) {
|
|
1506
1628
|
const runtime = useReadyToGoRuntime();
|
|
1507
|
-
if (runtime.phase === "idle" || runtime.phase === "empty") return null;
|
|
1629
|
+
if (runtime.phase === "idle" || runtime.phase === "loading" || runtime.phase === "empty") return null;
|
|
1508
1630
|
const heading = text(props, "heading", "Shipping Details");
|
|
1509
1631
|
const contentsHeading = text(props, "contentsHeading", "Package Contents");
|
|
1510
1632
|
const carrierHeading = text(props, "carrierHeading", "Carrier");
|
|
1511
1633
|
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
|
|
1634
|
+
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: [
|
|
1635
|
+
/* @__PURE__ */ jsx4("h3", { style: { margin: 0, fontSize: 20, lineHeight: "20px", fontWeight: 700 }, children: heading }),
|
|
1636
|
+
runtime.phase === "error" ? /* @__PURE__ */ jsx4("p", { style: { margin: "16px 0 0", color: "#b42318" }, children: "Delivery details are temporarily unavailable." }) : null
|
|
1516
1637
|
] }) }) });
|
|
1517
1638
|
}
|
|
1518
1639
|
function ReadyToGoRecommendationsBlock(props) {
|
|
1519
1640
|
const runtime = useReadyToGoRuntime();
|
|
1520
1641
|
const heading = text(props, "heading", "You may also like...");
|
|
1521
|
-
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
|
|
1642
|
+
const configured = configuredRecommendations(props.products);
|
|
1643
|
+
const items = configured.length ? configured : runtime.recommendations.phase === "success" ? runtime.recommendations.items : [];
|
|
1644
|
+
if (!items.length) return null;
|
|
1645
|
+
return /* @__PURE__ */ jsx4(SectionShell, { title: heading, bordered: false, children: /* @__PURE__ */ jsxs4("div", { style: contentWidth, children: [
|
|
1646
|
+
/* @__PURE__ */ jsx4("h3", { style: { margin: 0, textAlign: "center", fontSize: 20, lineHeight: "20px", fontWeight: 700 }, children: heading }),
|
|
1647
|
+
/* @__PURE__ */ jsx4("div", { style: { marginTop: 24 }, children: /* @__PURE__ */ jsx4(RecommendationCards, { items }) })
|
|
1525
1648
|
] }) });
|
|
1526
1649
|
}
|
|
1527
1650
|
|
|
@@ -1552,7 +1675,7 @@ var readyToGoBlocks = withTemplatePolicy([
|
|
|
1552
1675
|
category: "BestTrack Ready-to-go",
|
|
1553
1676
|
targets: ["web"],
|
|
1554
1677
|
defaultProps: {
|
|
1555
|
-
heading: "
|
|
1678
|
+
heading: "",
|
|
1556
1679
|
submitLabel: "Track Your Order",
|
|
1557
1680
|
submitButtonColor: "#111111",
|
|
1558
1681
|
defaultTrackingNumber: "BT-2048-DEMO",
|
|
@@ -1564,14 +1687,13 @@ var readyToGoBlocks = withTemplatePolicy([
|
|
|
1564
1687
|
defaultVariant: "default",
|
|
1565
1688
|
variants: [{ id: "default", label: "Default" }],
|
|
1566
1689
|
fields: {
|
|
1567
|
-
|
|
1568
|
-
submitLabel: text2("Button label"),
|
|
1690
|
+
submitLabel: text2("Button label", { validation: { maxLength: 52 } }),
|
|
1569
1691
|
submitButtonColor: { field: "besttrack.ready-to-go.text", label: "Button color", control: "color", group: "Style" },
|
|
1570
|
-
defaultTrackingNumber: text2("Default tracking number"),
|
|
1692
|
+
defaultTrackingNumber: text2("Default tracking number", { validation: { maxLength: 52 } }),
|
|
1571
1693
|
defaultOrderNumber: text2("Default order number"),
|
|
1572
1694
|
defaultQueryMode: text2("Default query mode"),
|
|
1573
|
-
trackingTabLabel: text2("Tracking tab label"),
|
|
1574
|
-
orderTabLabel: text2("Order tab label")
|
|
1695
|
+
trackingTabLabel: text2("Tracking tab label", { validation: { maxLength: 52 } }),
|
|
1696
|
+
orderTabLabel: text2("Order tab label", { validation: { maxLength: 52 } })
|
|
1575
1697
|
},
|
|
1576
1698
|
render: { web: ReadyToGoQueryBlock, editor: ReadyToGoQueryEditor }
|
|
1577
1699
|
},
|
|
@@ -1599,9 +1721,9 @@ var readyToGoBlocks = withTemplatePolicy([
|
|
|
1599
1721
|
defaultVariant: "default",
|
|
1600
1722
|
variants: [{ id: "default", label: "Default" }, { id: "compact", label: "Compact", theme: { spacing: "12px" } }],
|
|
1601
1723
|
fields: {
|
|
1602
|
-
heading: text2("Heading"),
|
|
1603
|
-
contentsHeading: text2("Package contents heading"),
|
|
1604
|
-
carrierHeading: text2("Carrier heading"),
|
|
1724
|
+
heading: text2("Heading", { validation: { maxLength: 52 } }),
|
|
1725
|
+
contentsHeading: text2("Package contents heading", { validation: { maxLength: 52 } }),
|
|
1726
|
+
carrierHeading: text2("Carrier heading", { validation: { maxLength: 52 } }),
|
|
1605
1727
|
adImageUrl: { field: "besttrack.ready-to-go.asset", label: "Advertisement image", control: "asset", persist: false, group: "Advertisement" },
|
|
1606
1728
|
adLinkUrl: { field: "besttrack.ready-to-go.url", label: "Advertisement link", control: "url", persist: false, group: "Advertisement", validation: { allowRelativeUrl: true, allowedUrlProtocols: ["https:", "http:"] } }
|
|
1607
1729
|
},
|
|
@@ -1617,17 +1739,17 @@ var readyToGoBlocks = withTemplatePolicy([
|
|
|
1617
1739
|
defaultVariant: "default",
|
|
1618
1740
|
variants: [{ id: "default", label: "Default" }, { id: "grid", label: "Grid", theme: { "color.surface": "#ffffff" } }],
|
|
1619
1741
|
fields: {
|
|
1620
|
-
heading: text2("Heading"),
|
|
1742
|
+
heading: text2("Heading", { validation: { maxLength: 100 } }),
|
|
1621
1743
|
products: { field: "besttrack.ready-to-go.products", label: "\u63A8\u8350\u5546\u54C1 (Shopify)", control: "products", group: "Content" }
|
|
1622
1744
|
},
|
|
1623
1745
|
render: { web: ReadyToGoRecommendationsBlock, editor: ReadyToGoRecommendationsEditor }
|
|
1624
1746
|
}
|
|
1625
|
-
], ["besttrack.ready-to-go.query"]);
|
|
1747
|
+
], ["besttrack.ready-to-go.query", "besttrack.ready-to-go.progress", "besttrack.ready-to-go.delivery"]);
|
|
1626
1748
|
var readyToGoTemplatePolicy = defineTemplatePolicy(
|
|
1627
1749
|
"besttrack.ready-to-go",
|
|
1628
1750
|
"Ready-to-go",
|
|
1629
1751
|
readyToGoBlocks.map((block) => block.type),
|
|
1630
|
-
["besttrack.ready-to-go.query"]
|
|
1752
|
+
["besttrack.ready-to-go.query", "besttrack.ready-to-go.progress", "besttrack.ready-to-go.delivery"]
|
|
1631
1753
|
);
|
|
1632
1754
|
function createReadyToGoTemplate() {
|
|
1633
1755
|
return {
|
|
@@ -1680,8 +1802,8 @@ import { createPageDocument as createPageDocument2 } from "@standhigher/puck-pag
|
|
|
1680
1802
|
import { createContext as createContext2, useCallback as useCallback3, useContext as useContext2, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
|
|
1681
1803
|
|
|
1682
1804
|
// src/tracking-query-experience.tsx
|
|
1683
|
-
import { useEffect as useEffect3, useId, useRef as useRef2, useState as useState3 } from "react";
|
|
1684
|
-
import { Fragment as
|
|
1805
|
+
import { useEffect as useEffect3, useId as useId2, useRef as useRef2, useState as useState3 } from "react";
|
|
1806
|
+
import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
1685
1807
|
var srOnly = {
|
|
1686
1808
|
position: "absolute",
|
|
1687
1809
|
width: 1,
|
|
@@ -1743,8 +1865,6 @@ function TrackingQueryCard({
|
|
|
1743
1865
|
trackingPlaceholder = "Enter your tracking number",
|
|
1744
1866
|
orderPlaceholder = "Enter your order number",
|
|
1745
1867
|
emailPlaceholder = "Enter your email",
|
|
1746
|
-
loadingLabel = "Querying...",
|
|
1747
|
-
loadingMessage = "Checking your order...",
|
|
1748
1868
|
emptyMessage = "We couldn't find an order or shipment for that number.",
|
|
1749
1869
|
errorMessage = "We couldn't retrieve this order right now. Please try again later.",
|
|
1750
1870
|
trackingInputLabel = "Tracking number",
|
|
@@ -1765,13 +1885,13 @@ function TrackingQueryCard({
|
|
|
1765
1885
|
messageStyle,
|
|
1766
1886
|
resultStyle
|
|
1767
1887
|
}) {
|
|
1768
|
-
const trackingInputId =
|
|
1769
|
-
const orderInputId =
|
|
1770
|
-
const emailInputId =
|
|
1771
|
-
const trackingTabId =
|
|
1772
|
-
const orderTabId =
|
|
1773
|
-
const tabPanelId =
|
|
1774
|
-
const queryStatusId =
|
|
1888
|
+
const trackingInputId = useId2();
|
|
1889
|
+
const orderInputId = useId2();
|
|
1890
|
+
const emailInputId = useId2();
|
|
1891
|
+
const trackingTabId = useId2();
|
|
1892
|
+
const orderTabId = useId2();
|
|
1893
|
+
const tabPanelId = useId2();
|
|
1894
|
+
const queryStatusId = useId2();
|
|
1775
1895
|
const [mode, setMode] = useState3(initialMode);
|
|
1776
1896
|
const [trackingNumber, setTrackingNumber] = useState3(initialTrackingNumber);
|
|
1777
1897
|
const [orderNumber, setOrderNumber] = useState3(initialOrderNumber);
|
|
@@ -1821,6 +1941,7 @@ function TrackingQueryCard({
|
|
|
1821
1941
|
};
|
|
1822
1942
|
const submit = (event) => {
|
|
1823
1943
|
event.preventDefault();
|
|
1944
|
+
if (loading) return;
|
|
1824
1945
|
const nextErrors = {};
|
|
1825
1946
|
const normalizedTrackingNumber = trackingNumber.trim();
|
|
1826
1947
|
const normalizedOrderNumber = orderNumber.trim();
|
|
@@ -1839,53 +1960,54 @@ function TrackingQueryCard({
|
|
|
1839
1960
|
};
|
|
1840
1961
|
const errorFor = (field) => errors[field];
|
|
1841
1962
|
const inputWithError = (field) => ({ ...inputStyle2, borderColor: errorFor(field) ? "#b42318" : inputStyle2.borderColor ?? "#cbd5e1" });
|
|
1842
|
-
const message = phase === "
|
|
1963
|
+
const message = phase === "empty" ? emptyMessage : phase === "error" ? errorMessage : void 0;
|
|
1843
1964
|
const cardData = cardDataAttribute ? { [cardDataAttribute]: "true" } : {};
|
|
1844
1965
|
const resultData = resultDataAttribute ? { [resultDataAttribute]: "true" } : {};
|
|
1845
1966
|
const activeTabId = mode === "tracking" ? trackingTabId : orderTabId;
|
|
1846
1967
|
const resultLabel = phase === "success" ? "Tracking result" : "Tracking query status";
|
|
1847
|
-
return /* @__PURE__ */
|
|
1848
|
-
/* @__PURE__ */
|
|
1849
|
-
/* @__PURE__ */
|
|
1850
|
-
/* @__PURE__ */
|
|
1968
|
+
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: [
|
|
1969
|
+
/* @__PURE__ */ jsx5("h1", { style: { margin: "0 0 28px", textAlign: "center", ...headingStyle }, children: heading }),
|
|
1970
|
+
/* @__PURE__ */ jsxs5("div", { role: "tablist", "aria-label": "Tracking method", style: { display: "grid", gridTemplateColumns: "1fr 1fr", borderBottom: "1px solid #cbd5e1", marginBottom: 18, ...tabListStyle }, children: [
|
|
1971
|
+
/* @__PURE__ */ jsx5("button", { ref: (element) => {
|
|
1851
1972
|
tabRefs.current.tracking = element;
|
|
1852
1973
|
}, 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__ */
|
|
1974
|
+
/* @__PURE__ */ jsx5("button", { ref: (element) => {
|
|
1854
1975
|
tabRefs.current.order = element;
|
|
1855
1976
|
}, 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
1977
|
] }),
|
|
1857
|
-
/* @__PURE__ */
|
|
1858
|
-
mode === "tracking" ? /* @__PURE__ */
|
|
1859
|
-
/* @__PURE__ */
|
|
1860
|
-
/* @__PURE__ */
|
|
1978
|
+
/* @__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: [
|
|
1979
|
+
mode === "tracking" ? /* @__PURE__ */ jsxs5("div", { children: [
|
|
1980
|
+
/* @__PURE__ */ jsx5("label", { htmlFor: trackingInputId, style: srOnly, children: trackingInputLabel }),
|
|
1981
|
+
/* @__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
1982
|
setTrackingNumber(event.target.value);
|
|
1862
1983
|
clearError("tracking");
|
|
1863
1984
|
}, placeholder: trackingPlaceholder, style: inputWithError("tracking") }),
|
|
1864
|
-
errorFor("tracking") ? /* @__PURE__ */
|
|
1865
|
-
] }) : /* @__PURE__ */
|
|
1866
|
-
/* @__PURE__ */
|
|
1867
|
-
/* @__PURE__ */
|
|
1868
|
-
/* @__PURE__ */
|
|
1985
|
+
errorFor("tracking") ? /* @__PURE__ */ jsx5("p", { id: trackingInputId + "-error", role: "alert", style: { margin: "6px 0 0", color: "#b42318", fontSize: 13 }, children: errorFor("tracking") }) : null
|
|
1986
|
+
] }) : /* @__PURE__ */ jsxs5(Fragment4, { children: [
|
|
1987
|
+
/* @__PURE__ */ jsxs5("div", { children: [
|
|
1988
|
+
/* @__PURE__ */ jsx5("label", { htmlFor: orderInputId, style: srOnly, children: orderInputLabel }),
|
|
1989
|
+
/* @__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
1990
|
setOrderNumber(event.target.value);
|
|
1870
1991
|
clearError("order");
|
|
1871
1992
|
}, placeholder: orderPlaceholder, style: inputWithError("order") }),
|
|
1872
|
-
errorFor("order") ? /* @__PURE__ */
|
|
1993
|
+
errorFor("order") ? /* @__PURE__ */ jsx5("p", { id: orderInputId + "-error", role: "alert", style: { margin: "6px 0 0", color: "#b42318", fontSize: 13 }, children: errorFor("order") }) : null
|
|
1873
1994
|
] }),
|
|
1874
|
-
/* @__PURE__ */
|
|
1875
|
-
/* @__PURE__ */
|
|
1876
|
-
/* @__PURE__ */
|
|
1995
|
+
/* @__PURE__ */ jsxs5("div", { children: [
|
|
1996
|
+
/* @__PURE__ */ jsx5("label", { htmlFor: emailInputId, style: srOnly, children: emailInputLabel }),
|
|
1997
|
+
/* @__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
1998
|
setEmail(event.target.value);
|
|
1878
1999
|
clearError("email");
|
|
1879
2000
|
}, placeholder: emailPlaceholder, style: inputWithError("email") }),
|
|
1880
|
-
errorFor("email") ? /* @__PURE__ */
|
|
2001
|
+
errorFor("email") ? /* @__PURE__ */ jsx5("p", { id: emailInputId + "-error", role: "alert", style: { margin: "6px 0 0", color: "#b42318", fontSize: 13 }, children: errorFor("email") }) : null
|
|
1881
2002
|
] })
|
|
1882
2003
|
] }),
|
|
1883
|
-
/* @__PURE__ */
|
|
2004
|
+
/* @__PURE__ */ jsx5("button", { type: "submit", disabled: loading, style: submitStyle(loading), children: submitLabel })
|
|
1884
2005
|
] }) }),
|
|
1885
|
-
message ? /* @__PURE__ */
|
|
1886
|
-
phase === "success" ? /* @__PURE__ */
|
|
1887
|
-
terminalPhase ? /* @__PURE__ */
|
|
1888
|
-
watermark
|
|
2006
|
+
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,
|
|
2007
|
+
phase === "success" ? /* @__PURE__ */ jsx5("p", { id: queryStatusId, role: "status", "aria-live": "polite", style: srOnly, children: "Tracking details loaded." }) : null,
|
|
2008
|
+
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,
|
|
2009
|
+
watermark,
|
|
2010
|
+
loading ? /* @__PURE__ */ jsx5(TrackingLoading, {}) : null
|
|
1889
2011
|
] });
|
|
1890
2012
|
}
|
|
1891
2013
|
function defaultProgress2(status) {
|
|
@@ -1901,55 +2023,55 @@ function defaultProgress2(status) {
|
|
|
1901
2023
|
return steps.map((step, index) => ({ ...step, state: index < current ? "complete" : index === current ? "current" : "upcoming" }));
|
|
1902
2024
|
}
|
|
1903
2025
|
function TrackingProgressDetails({ steps }) {
|
|
1904
|
-
return /* @__PURE__ */
|
|
1905
|
-
/* @__PURE__ */
|
|
1906
|
-
/* @__PURE__ */
|
|
1907
|
-
step.date ? /* @__PURE__ */
|
|
2026
|
+
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: [
|
|
2027
|
+
/* @__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 }),
|
|
2028
|
+
/* @__PURE__ */ jsx5("span", { style: { display: "block", marginTop: 6, overflowWrap: "anywhere", fontSize: 11, lineHeight: 1.25 }, children: step.label }),
|
|
2029
|
+
step.date ? /* @__PURE__ */ jsx5("span", { style: { display: "block", marginTop: 3, color: "#94a3b8", fontSize: 10, lineHeight: 1.2 }, children: step.date }) : null
|
|
1908
2030
|
] }, step.id)) });
|
|
1909
2031
|
}
|
|
1910
2032
|
function TrackingEvents({ result }) {
|
|
1911
2033
|
const [expanded, setExpanded] = useState3(false);
|
|
1912
2034
|
const events = result.events ?? (result.latestEvent ? [{ id: "latest", title: result.latestEvent, at: result.updatedAt, state: "current" }] : []);
|
|
1913
|
-
if (!events.length) return /* @__PURE__ */
|
|
2035
|
+
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
2036
|
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__ */
|
|
2037
|
+
return /* @__PURE__ */ jsxs5("div", { "aria-label": "Shipping events", style: { marginTop: 16 }, children: [
|
|
2038
|
+
/* @__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: [
|
|
2039
|
+
/* @__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" } }),
|
|
2040
|
+
/* @__PURE__ */ jsx5("strong", { style: { display: "block", fontSize: 14 }, children: event.title }),
|
|
2041
|
+
event.detail ? /* @__PURE__ */ jsx5("span", { style: { display: "block", marginTop: 2, color: "#64748b", fontSize: 13 }, children: event.detail }) : null,
|
|
2042
|
+
event.at ? /* @__PURE__ */ jsx5("time", { style: { display: "block", marginTop: 3, color: "#94a3b8", fontSize: 12 }, children: event.at }) : null
|
|
1921
2043
|
] }, event.id)) }),
|
|
1922
|
-
events.length > 3 ? /* @__PURE__ */
|
|
2044
|
+
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
2045
|
] });
|
|
1924
2046
|
}
|
|
1925
2047
|
function TrackingOrderItemImage({ src, title }) {
|
|
1926
2048
|
const [failed, setFailed] = useState3(false);
|
|
1927
2049
|
const imageUrl = safeTrackingPageUrl(src);
|
|
1928
|
-
if (!imageUrl || failed) return /* @__PURE__ */
|
|
1929
|
-
return /* @__PURE__ */
|
|
2050
|
+
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() });
|
|
2051
|
+
return /* @__PURE__ */ jsx5("img", { src: imageUrl, alt: "", onError: () => setFailed(true), style: { width: 56, height: 56, borderRadius: 6, objectFit: "cover", background: "#f1f5f9" } });
|
|
1930
2052
|
}
|
|
1931
2053
|
function TrackingOrderItems({ items }) {
|
|
1932
2054
|
if (!items.length) return null;
|
|
1933
|
-
return /* @__PURE__ */
|
|
1934
|
-
/* @__PURE__ */
|
|
1935
|
-
/* @__PURE__ */
|
|
2055
|
+
return /* @__PURE__ */ jsxs5("section", { "aria-label": "Order items", style: { marginTop: 24, borderTop: "1px solid #e2e8f0", paddingTop: 18 }, children: [
|
|
2056
|
+
/* @__PURE__ */ jsx5("h2", { style: { margin: 0, fontSize: 16 }, children: "Items in your order" }),
|
|
2057
|
+
/* @__PURE__ */ jsx5("div", { style: { display: "grid", gap: 12, marginTop: 12 }, children: items.map((item) => {
|
|
1936
2058
|
const price = item.price ? formatTrackingPageMoney(item.price) : void 0;
|
|
1937
2059
|
const href = safeTrackingPageUrl(item.href);
|
|
1938
|
-
return /* @__PURE__ */
|
|
1939
|
-
/* @__PURE__ */
|
|
1940
|
-
/* @__PURE__ */
|
|
1941
|
-
href ? /* @__PURE__ */
|
|
1942
|
-
item.description ? /* @__PURE__ */
|
|
1943
|
-
/* @__PURE__ */
|
|
1944
|
-
/* @__PURE__ */
|
|
2060
|
+
return /* @__PURE__ */ jsxs5("article", { style: { display: "grid", gridTemplateColumns: "56px minmax(0, 1fr)", gap: 12, alignItems: "center" }, children: [
|
|
2061
|
+
/* @__PURE__ */ jsx5(TrackingOrderItemImage, { src: item.imageUrl, title: item.title }),
|
|
2062
|
+
/* @__PURE__ */ jsxs5("div", { style: { minWidth: 0, overflowWrap: "anywhere" }, children: [
|
|
2063
|
+
href ? /* @__PURE__ */ jsx5("a", { href, style: { color: "inherit", fontWeight: 700, overflowWrap: "anywhere" }, children: item.title }) : /* @__PURE__ */ jsx5("strong", { style: { overflowWrap: "anywhere" }, children: item.title }),
|
|
2064
|
+
item.description ? /* @__PURE__ */ jsx5("p", { style: { margin: "3px 0 0", color: "#64748b", fontSize: 13 }, children: item.description }) : null,
|
|
2065
|
+
/* @__PURE__ */ jsxs5("p", { style: { display: "flex", flexWrap: "wrap", gap: 8, margin: "4px 0 0", color: "#475569", fontSize: 13 }, children: [
|
|
2066
|
+
/* @__PURE__ */ jsxs5("span", { children: [
|
|
1945
2067
|
"Qty ",
|
|
1946
2068
|
item.quantity
|
|
1947
2069
|
] }),
|
|
1948
|
-
price?.amount ? /* @__PURE__ */
|
|
2070
|
+
price?.amount ? /* @__PURE__ */ jsxs5("span", { children: [
|
|
1949
2071
|
price.amount,
|
|
1950
2072
|
price.startsAt ? " and up" : ""
|
|
1951
2073
|
] }) : null,
|
|
1952
|
-
price?.compareAt ? /* @__PURE__ */
|
|
2074
|
+
price?.compareAt ? /* @__PURE__ */ jsx5("s", { style: { color: "#94a3b8" }, children: price.compareAt }) : null
|
|
1953
2075
|
] })
|
|
1954
2076
|
] })
|
|
1955
2077
|
] }, item.id);
|
|
@@ -1964,60 +2086,60 @@ function TrackingQueryResultDetails({ result, onTrackAnother, trackAnotherLabel
|
|
|
1964
2086
|
void navigator.clipboard.writeText(result.trackingNumber).then(() => setCopied(true)).catch(() => void 0);
|
|
1965
2087
|
}
|
|
1966
2088
|
};
|
|
1967
|
-
return /* @__PURE__ */
|
|
1968
|
-
/* @__PURE__ */
|
|
1969
|
-
/* @__PURE__ */
|
|
1970
|
-
/* @__PURE__ */
|
|
2089
|
+
return /* @__PURE__ */ jsxs5("section", { "aria-label": "Tracking result details", style: { minWidth: 0, overflowWrap: "anywhere" }, children: [
|
|
2090
|
+
/* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexWrap: "wrap", alignItems: "start", justifyContent: "space-between", gap: 12 }, children: [
|
|
2091
|
+
/* @__PURE__ */ jsxs5("div", { style: { minWidth: 0, flex: "1 1 180px" }, children: [
|
|
2092
|
+
/* @__PURE__ */ jsxs5("strong", { style: { fontSize: 17 }, children: [
|
|
1971
2093
|
"Your order is ",
|
|
1972
2094
|
result.status || "being updated"
|
|
1973
2095
|
] }),
|
|
1974
|
-
result.estimatedDelivery ? /* @__PURE__ */
|
|
2096
|
+
result.estimatedDelivery ? /* @__PURE__ */ jsxs5("p", { style: { margin: "5px 0 0", color: "#475569", fontSize: 14 }, children: [
|
|
1975
2097
|
"Estimated delivery: ",
|
|
1976
2098
|
result.estimatedDelivery
|
|
1977
2099
|
] }) : null
|
|
1978
2100
|
] }),
|
|
1979
|
-
onTrackAnother ? /* @__PURE__ */
|
|
2101
|
+
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
2102
|
] }),
|
|
1981
|
-
/* @__PURE__ */
|
|
1982
|
-
/* @__PURE__ */
|
|
1983
|
-
/* @__PURE__ */
|
|
1984
|
-
/* @__PURE__ */
|
|
1985
|
-
/* @__PURE__ */
|
|
2103
|
+
/* @__PURE__ */ jsx5(TrackingProgressDetails, { steps: progress }),
|
|
2104
|
+
/* @__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: [
|
|
2105
|
+
/* @__PURE__ */ jsxs5("span", { style: { minWidth: 0, overflowWrap: "anywhere" }, children: [
|
|
2106
|
+
/* @__PURE__ */ jsx5("strong", { children: "Carrier" }),
|
|
2107
|
+
/* @__PURE__ */ jsx5("br", {}),
|
|
1986
2108
|
result.carrier || "\u2014"
|
|
1987
2109
|
] }),
|
|
1988
|
-
/* @__PURE__ */
|
|
1989
|
-
/* @__PURE__ */
|
|
1990
|
-
/* @__PURE__ */
|
|
1991
|
-
/* @__PURE__ */
|
|
2110
|
+
/* @__PURE__ */ jsxs5("span", { style: { minWidth: 0, overflowWrap: "anywhere" }, children: [
|
|
2111
|
+
/* @__PURE__ */ jsx5("strong", { children: "Tracking number" }),
|
|
2112
|
+
/* @__PURE__ */ jsx5("br", {}),
|
|
2113
|
+
/* @__PURE__ */ jsx5("span", { children: result.trackingNumber }),
|
|
1992
2114
|
" ",
|
|
1993
|
-
/* @__PURE__ */
|
|
2115
|
+
/* @__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
2116
|
] }),
|
|
1995
|
-
/* @__PURE__ */
|
|
1996
|
-
/* @__PURE__ */
|
|
1997
|
-
/* @__PURE__ */
|
|
2117
|
+
/* @__PURE__ */ jsxs5("span", { style: { minWidth: 0, overflowWrap: "anywhere" }, children: [
|
|
2118
|
+
/* @__PURE__ */ jsx5("strong", { children: "Destination" }),
|
|
2119
|
+
/* @__PURE__ */ jsx5("br", {}),
|
|
1998
2120
|
result.destination || "\u2014"
|
|
1999
2121
|
] }),
|
|
2000
|
-
/* @__PURE__ */
|
|
2001
|
-
/* @__PURE__ */
|
|
2002
|
-
/* @__PURE__ */
|
|
2122
|
+
/* @__PURE__ */ jsxs5("span", { style: { minWidth: 0, overflowWrap: "anywhere" }, children: [
|
|
2123
|
+
/* @__PURE__ */ jsx5("strong", { children: "Transit time" }),
|
|
2124
|
+
/* @__PURE__ */ jsx5("br", {}),
|
|
2003
2125
|
result.transitDuration || "\u2014"
|
|
2004
2126
|
] }),
|
|
2005
|
-
result.orderNumber ? /* @__PURE__ */
|
|
2006
|
-
/* @__PURE__ */
|
|
2007
|
-
/* @__PURE__ */
|
|
2127
|
+
result.orderNumber ? /* @__PURE__ */ jsxs5("span", { style: { minWidth: 0, overflowWrap: "anywhere" }, children: [
|
|
2128
|
+
/* @__PURE__ */ jsx5("strong", { children: "Order number" }),
|
|
2129
|
+
/* @__PURE__ */ jsx5("br", {}),
|
|
2008
2130
|
result.orderNumber
|
|
2009
2131
|
] }) : null
|
|
2010
2132
|
] }),
|
|
2011
|
-
/* @__PURE__ */
|
|
2012
|
-
/* @__PURE__ */
|
|
2013
|
-
/* @__PURE__ */
|
|
2133
|
+
/* @__PURE__ */ jsxs5("section", { "aria-label": "Tracking timeline", style: { marginTop: 24, borderTop: "1px solid #e2e8f0", paddingTop: 18 }, children: [
|
|
2134
|
+
/* @__PURE__ */ jsx5("h2", { style: { margin: 0, fontSize: 16 }, children: "Tracking timeline" }),
|
|
2135
|
+
/* @__PURE__ */ jsx5(TrackingEvents, { result })
|
|
2014
2136
|
] }),
|
|
2015
|
-
/* @__PURE__ */
|
|
2137
|
+
/* @__PURE__ */ jsx5(TrackingOrderItems, { items: result.orderItems ?? [] })
|
|
2016
2138
|
] });
|
|
2017
2139
|
}
|
|
2018
2140
|
|
|
2019
2141
|
// src/branded.tsx
|
|
2020
|
-
import { jsx as
|
|
2142
|
+
import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
2021
2143
|
var initialRuntime2 = {
|
|
2022
2144
|
phase: "idle",
|
|
2023
2145
|
selectedShipmentId: null,
|
|
@@ -2069,13 +2191,13 @@ function BrandedRuntimeProvider({ children, query: injectedQuery, watermark }) {
|
|
|
2069
2191
|
() => ({ ...state, displayedResult, selectedShipmentId, query, reset, selectShipment, watermark }),
|
|
2070
2192
|
[displayedResult, query, reset, selectedShipmentId, selectShipment, state, watermark]
|
|
2071
2193
|
);
|
|
2072
|
-
return /* @__PURE__ */
|
|
2194
|
+
return /* @__PURE__ */ jsx6(BrandedRuntimeContext.Provider, { value, children });
|
|
2073
2195
|
}
|
|
2074
2196
|
function useBrandedRuntime() {
|
|
2075
2197
|
return useContext2(BrandedRuntimeContext);
|
|
2076
2198
|
}
|
|
2077
2199
|
function RuntimeWatermark2({ watermark }) {
|
|
2078
|
-
return watermark?.visible ? /* @__PURE__ */
|
|
2200
|
+
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
2201
|
}
|
|
2080
2202
|
function text3(props, key, fallback) {
|
|
2081
2203
|
return typeof props[key] === "string" ? props[key] : fallback;
|
|
@@ -2089,28 +2211,28 @@ function ProductImage2({ src, alt }) {
|
|
|
2089
2211
|
const [failed, setFailed] = useState4(false);
|
|
2090
2212
|
const safeSrc = safeImageUrl2(src);
|
|
2091
2213
|
if (!safeSrc || failed) {
|
|
2092
|
-
return /* @__PURE__ */
|
|
2214
|
+
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
2215
|
}
|
|
2094
|
-
return /* @__PURE__ */
|
|
2216
|
+
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
2217
|
}
|
|
2096
2218
|
function ShipmentSwitcher({ shipmentLabels: configuredLabels }) {
|
|
2097
2219
|
const runtime = useBrandedRuntime();
|
|
2098
2220
|
const configuredShipments = shipmentLabels(configuredLabels);
|
|
2099
2221
|
const shipments = runtime.phase === "idle" || runtime.phase === "loading" ? configuredShipments : runtime.result?.shipments ?? [];
|
|
2100
2222
|
if (!shipments.length) return null;
|
|
2101
|
-
return /* @__PURE__ */
|
|
2223
|
+
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
2224
|
const selected = (runtime.selectedShipmentId ?? shipments[0]?.id) === shipment.id;
|
|
2103
|
-
return /* @__PURE__ */
|
|
2225
|
+
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
2226
|
}) });
|
|
2105
2227
|
}
|
|
2106
2228
|
function QueryHero(props) {
|
|
2107
2229
|
const runtime = useBrandedRuntime();
|
|
2108
2230
|
const [heroImageFailed, setHeroImageFailed] = useState4(false);
|
|
2109
2231
|
const result = runtime.displayedResult;
|
|
2110
|
-
return /* @__PURE__ */
|
|
2111
|
-
!heroImageFailed && safeImageUrl2(props.heroImageUrl) ? /* @__PURE__ */
|
|
2112
|
-
/* @__PURE__ */
|
|
2113
|
-
/* @__PURE__ */
|
|
2232
|
+
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: [
|
|
2233
|
+
!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,
|
|
2234
|
+
/* @__PURE__ */ jsx6("div", { "aria-hidden": "true", style: { position: "absolute", inset: 0, background: "rgba(255,255,255,0.12)" } }),
|
|
2235
|
+
/* @__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
2236
|
TrackingQueryCard,
|
|
2115
2237
|
{
|
|
2116
2238
|
phase: runtime.phase,
|
|
@@ -2122,8 +2244,6 @@ function QueryHero(props) {
|
|
|
2122
2244
|
initialMode: text3(props, "defaultQueryMode", "tracking") === "order" ? "order" : "tracking",
|
|
2123
2245
|
trackingTabLabel: text3(props, "trackingTabLabel", "Tracking Number"),
|
|
2124
2246
|
orderTabLabel: text3(props, "orderTabLabel", "Order Number"),
|
|
2125
|
-
loadingLabel: "Tracking...",
|
|
2126
|
-
loadingMessage: "Checking your order\u2026",
|
|
2127
2247
|
emptyMessage: "We couldn\u2019t find an order for that number.",
|
|
2128
2248
|
errorMessage: "We couldn\u2019t retrieve this order right now. Please try again later.",
|
|
2129
2249
|
cardDataAttribute: "data-branded-query-card",
|
|
@@ -2136,21 +2256,21 @@ function QueryHero(props) {
|
|
|
2136
2256
|
formStyle: { gap: 12 },
|
|
2137
2257
|
inputStyle: { width: "100%", height: 48, padding: "0 16px", boxSizing: "border-box", border: "1px solid #e2e2e2", borderRadius: 10, font: "inherit" },
|
|
2138
2258
|
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__ */
|
|
2259
|
+
result: result ? /* @__PURE__ */ jsx6(TrackingQueryResultDetails, { result, onTrackAnother: runtime.reset, trackAnotherLabel: text3(props, "trackAnotherLabel", "Track another order") }) : null,
|
|
2140
2260
|
resultStyle: { padding: 16, border: "1px solid #e7e7e7", borderRadius: 8, background: "#fffdf0" },
|
|
2141
|
-
watermark: /* @__PURE__ */
|
|
2261
|
+
watermark: /* @__PURE__ */ jsx6(RuntimeWatermark2, { watermark: runtime.watermark })
|
|
2142
2262
|
}
|
|
2143
2263
|
) })
|
|
2144
2264
|
] });
|
|
2145
2265
|
}
|
|
2146
2266
|
function PackageContents2({ items }) {
|
|
2147
|
-
if (!items?.length) return /* @__PURE__ */
|
|
2148
|
-
return /* @__PURE__ */
|
|
2149
|
-
/* @__PURE__ */
|
|
2150
|
-
/* @__PURE__ */
|
|
2151
|
-
/* @__PURE__ */
|
|
2152
|
-
/* @__PURE__ */
|
|
2153
|
-
/* @__PURE__ */
|
|
2267
|
+
if (!items?.length) return /* @__PURE__ */ jsx6("p", { style: { margin: 0, color: "#6b6b6b" }, children: "Package contents are not available for this shipment." });
|
|
2268
|
+
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: [
|
|
2269
|
+
/* @__PURE__ */ jsx6(ProductImage2, { src: item.imageUrl, alt: item.title }),
|
|
2270
|
+
/* @__PURE__ */ jsxs6("div", { style: { minWidth: 0, overflowWrap: "anywhere" }, children: [
|
|
2271
|
+
/* @__PURE__ */ jsx6("strong", { children: item.title }),
|
|
2272
|
+
/* @__PURE__ */ jsx6("p", { style: { margin: "5px 0", color: "#6b6b6b", fontSize: 14 }, children: item.description ?? "Product details are available in your order." }),
|
|
2273
|
+
/* @__PURE__ */ jsxs6("small", { style: { color: "#6b6b6b" }, children: [
|
|
2154
2274
|
"Qty ",
|
|
2155
2275
|
item.quantity
|
|
2156
2276
|
] })
|
|
@@ -2158,12 +2278,12 @@ function PackageContents2({ items }) {
|
|
|
2158
2278
|
] }, item.id)) });
|
|
2159
2279
|
}
|
|
2160
2280
|
function BrandedTextField({ value, onChange }) {
|
|
2161
|
-
return /* @__PURE__ */
|
|
2281
|
+
return /* @__PURE__ */ jsx6("input", { "aria-label": "Branded text", value: typeof value === "string" ? value : "", onChange: (event) => onChange(event.target.value) });
|
|
2162
2282
|
}
|
|
2163
2283
|
function InlineText2({ block, name, fallback }) {
|
|
2164
2284
|
const value = text3(block, name, fallback);
|
|
2165
|
-
if (!block.selected) return /* @__PURE__ */
|
|
2166
|
-
return /* @__PURE__ */
|
|
2285
|
+
if (!block.selected) return /* @__PURE__ */ jsx6("span", { "data-branded-editor-field": name, children: value });
|
|
2286
|
+
return /* @__PURE__ */ jsx6(
|
|
2167
2287
|
"input",
|
|
2168
2288
|
{
|
|
2169
2289
|
"aria-label": "Canvas " + name,
|
|
@@ -2193,22 +2313,22 @@ function InlineText2({ block, name, fallback }) {
|
|
|
2193
2313
|
);
|
|
2194
2314
|
}
|
|
2195
2315
|
function EditorSurface({ block, children }) {
|
|
2196
|
-
return /* @__PURE__ */
|
|
2316
|
+
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
2317
|
}
|
|
2198
2318
|
function BrandedAnnouncementEditor(block) {
|
|
2199
|
-
return /* @__PURE__ */
|
|
2319
|
+
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
2320
|
}
|
|
2201
2321
|
function BrandedTrackingExperienceEditor(block) {
|
|
2202
2322
|
const labels = shipmentLabels(block.shipmentLabels);
|
|
2203
|
-
return /* @__PURE__ */
|
|
2204
|
-
/* @__PURE__ */
|
|
2205
|
-
/* @__PURE__ */
|
|
2206
|
-
/* @__PURE__ */
|
|
2207
|
-
/* @__PURE__ */
|
|
2208
|
-
/* @__PURE__ */
|
|
2209
|
-
/* @__PURE__ */
|
|
2323
|
+
return /* @__PURE__ */ jsxs6("section", { "aria-label": "Branded tracking experience editor", style: { background: "#fffdf0", fontFamily: "var(--pb-font-family)" }, children: [
|
|
2324
|
+
/* @__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)) }),
|
|
2325
|
+
/* @__PURE__ */ jsx6("div", { style: { minHeight: 360, display: "grid", placeItems: "center", padding: 16, background: "linear-gradient(135deg, #dedbd4, #b9b3aa)" }, children: /* @__PURE__ */ jsxs6(EditorSurface, { block, children: [
|
|
2326
|
+
/* @__PURE__ */ jsx6("h1", { style: { margin: "0 0 28px", textAlign: "center", fontSize: 32 }, children: /* @__PURE__ */ jsx6(InlineText2, { block, name: "heading", fallback: "Track your order" }) }),
|
|
2327
|
+
/* @__PURE__ */ jsxs6("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", borderBottom: "1px solid #e7e7e7", marginBottom: 20, textAlign: "center" }, children: [
|
|
2328
|
+
/* @__PURE__ */ jsx6("span", { style: { padding: 10 }, children: /* @__PURE__ */ jsx6(InlineText2, { block, name: "orderTabLabel", fallback: "Order Number" }) }),
|
|
2329
|
+
/* @__PURE__ */ jsx6("strong", { style: { padding: 10, borderBottom: "2px solid #0a0a0a" }, children: /* @__PURE__ */ jsx6(InlineText2, { block, name: "trackingTabLabel", fallback: "Tracking Number" }) })
|
|
2210
2330
|
] }),
|
|
2211
|
-
/* @__PURE__ */
|
|
2331
|
+
/* @__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
2332
|
width: "100%",
|
|
2213
2333
|
height: 44,
|
|
2214
2334
|
boxSizing: "border-box",
|
|
@@ -2219,42 +2339,42 @@ function BrandedTrackingExperienceEditor(block) {
|
|
|
2219
2339
|
background: "#fff",
|
|
2220
2340
|
font: "inherit"
|
|
2221
2341
|
} }),
|
|
2222
|
-
/* @__PURE__ */
|
|
2223
|
-
/* @__PURE__ */
|
|
2342
|
+
/* @__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" }) }),
|
|
2343
|
+
/* @__PURE__ */ jsx6("small", { style: { display: "block", marginTop: 10, color: "#8a8a8a", fontSize: 9, textAlign: "right" }, children: "Powered by BestTrack" })
|
|
2224
2344
|
] }) })
|
|
2225
2345
|
] });
|
|
2226
2346
|
}
|
|
2227
2347
|
function BrandedQueryEditor(block) {
|
|
2228
|
-
return /* @__PURE__ */
|
|
2348
|
+
return /* @__PURE__ */ jsx6(BrandedTrackingExperienceEditor, { ...block });
|
|
2229
2349
|
}
|
|
2230
2350
|
function BrandedOrderItemsEditor(block) {
|
|
2231
|
-
return /* @__PURE__ */
|
|
2232
|
-
/* @__PURE__ */
|
|
2233
|
-
/* @__PURE__ */
|
|
2351
|
+
return /* @__PURE__ */ jsxs6(EditorSurface, { block, children: [
|
|
2352
|
+
/* @__PURE__ */ jsx6("h2", { style: { margin: 0 }, children: /* @__PURE__ */ jsx6(InlineText2, { block, name: "heading", fallback: "What's Inside" }) }),
|
|
2353
|
+
/* @__PURE__ */ jsx6("p", { style: { color: "#6b6b6b" }, children: "Package contents appear after a consumer tracking query." })
|
|
2234
2354
|
] });
|
|
2235
2355
|
}
|
|
2236
2356
|
function BrandedRecommendationsEditor(block) {
|
|
2237
|
-
return /* @__PURE__ */
|
|
2238
|
-
/* @__PURE__ */
|
|
2239
|
-
/* @__PURE__ */
|
|
2357
|
+
return /* @__PURE__ */ jsxs6(EditorSurface, { block, children: [
|
|
2358
|
+
/* @__PURE__ */ jsx6("h2", { style: { margin: 0, textAlign: "center" }, children: /* @__PURE__ */ jsx6(InlineText2, { block, name: "heading", fallback: "You might also like" }) }),
|
|
2359
|
+
/* @__PURE__ */ jsx6("p", { style: { color: "#6b6b6b", textAlign: "center" }, children: "Recommendations appear with the active shipment." })
|
|
2240
2360
|
] });
|
|
2241
2361
|
}
|
|
2242
2362
|
function BrandedQuickLinksEditor(block) {
|
|
2243
|
-
return /* @__PURE__ */
|
|
2244
|
-
/* @__PURE__ */
|
|
2245
|
-
/* @__PURE__ */
|
|
2246
|
-
/* @__PURE__ */
|
|
2247
|
-
/* @__PURE__ */
|
|
2363
|
+
return /* @__PURE__ */ jsxs6(EditorSurface, { block, children: [
|
|
2364
|
+
/* @__PURE__ */ jsx6("h2", { children: /* @__PURE__ */ jsx6(InlineText2, { block, name: "heading", fallback: "Need help?" }) }),
|
|
2365
|
+
/* @__PURE__ */ jsxs6("div", { style: { display: "flex", gap: 20 }, children: [
|
|
2366
|
+
/* @__PURE__ */ jsx6(InlineText2, { block, name: "primaryLabel", fallback: "Shipping help" }),
|
|
2367
|
+
/* @__PURE__ */ jsx6(InlineText2, { block, name: "secondaryLabel", fallback: "Contact us" })
|
|
2248
2368
|
] })
|
|
2249
2369
|
] });
|
|
2250
2370
|
}
|
|
2251
2371
|
function BrandedBlogEditor(block) {
|
|
2252
|
-
return /* @__PURE__ */
|
|
2253
|
-
/* @__PURE__ */
|
|
2254
|
-
/* @__PURE__ */
|
|
2255
|
-
/* @__PURE__ */
|
|
2256
|
-
/* @__PURE__ */
|
|
2257
|
-
/* @__PURE__ */
|
|
2372
|
+
return /* @__PURE__ */ jsxs6(EditorSurface, { block, children: [
|
|
2373
|
+
/* @__PURE__ */ jsx6("h2", { children: /* @__PURE__ */ jsx6(InlineText2, { block, name: "heading", fallback: "From our journal" }) }),
|
|
2374
|
+
/* @__PURE__ */ jsxs6("article", { children: [
|
|
2375
|
+
/* @__PURE__ */ jsx6("strong", { children: /* @__PURE__ */ jsx6(InlineText2, { block, name: "articleTitle", fallback: "Delivery tips for every season" }) }),
|
|
2376
|
+
/* @__PURE__ */ jsx6("p", { children: /* @__PURE__ */ jsx6(InlineText2, { block, name: "excerpt", fallback: "Simple ways to make every delivery feel considered." }) }),
|
|
2377
|
+
/* @__PURE__ */ jsx6(InlineText2, { block, name: "linkLabel", fallback: "Read the story" })
|
|
2258
2378
|
] })
|
|
2259
2379
|
] });
|
|
2260
2380
|
}
|
|
@@ -2262,42 +2382,42 @@ function BrandedAnnouncementBlock(props) {
|
|
|
2262
2382
|
const message = text3(props, "message", "");
|
|
2263
2383
|
const href = safeHref2(props.href);
|
|
2264
2384
|
if (!message) return null;
|
|
2265
|
-
return /* @__PURE__ */
|
|
2385
|
+
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
2386
|
}
|
|
2267
2387
|
function BrandedTrackingExperienceBlock(props) {
|
|
2268
|
-
return /* @__PURE__ */
|
|
2269
|
-
/* @__PURE__ */
|
|
2270
|
-
/* @__PURE__ */
|
|
2388
|
+
return /* @__PURE__ */ jsxs6("section", { "aria-label": "Branded tracking experience", style: { background: "#fffdf0", fontFamily: "var(--pb-font-family)" }, children: [
|
|
2389
|
+
/* @__PURE__ */ jsx6(ShipmentSwitcher, { shipmentLabels: props.shipmentLabels }),
|
|
2390
|
+
/* @__PURE__ */ jsx6(QueryHero, { ...props })
|
|
2271
2391
|
] });
|
|
2272
2392
|
}
|
|
2273
2393
|
function BrandedQueryBlock(props) {
|
|
2274
|
-
return /* @__PURE__ */
|
|
2275
|
-
/* @__PURE__ */
|
|
2276
|
-
/* @__PURE__ */
|
|
2394
|
+
return /* @__PURE__ */ jsxs6("section", { "aria-label": "Branded tracking query", style: { background: "#fffdf0", fontFamily: "var(--pb-font-family)" }, children: [
|
|
2395
|
+
/* @__PURE__ */ jsx6(ShipmentSwitcher, { shipmentLabels: props.shipmentLabels }),
|
|
2396
|
+
/* @__PURE__ */ jsx6(QueryHero, { ...props })
|
|
2277
2397
|
] });
|
|
2278
2398
|
}
|
|
2279
2399
|
function BrandedOrderItemsBlock(props) {
|
|
2280
2400
|
const runtime = useBrandedRuntime();
|
|
2281
2401
|
const items = runtime.displayedResult?.orderItems ?? [];
|
|
2282
2402
|
const title = text3(props, "heading", "What's Inside");
|
|
2283
|
-
return /* @__PURE__ */
|
|
2284
|
-
/* @__PURE__ */
|
|
2403
|
+
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: [
|
|
2404
|
+
/* @__PURE__ */ jsxs6("h2", { style: { margin: "0 0 20px", fontSize: 20 }, children: [
|
|
2285
2405
|
title,
|
|
2286
2406
|
runtime.phase === "success" ? " (" + items.length + ")" : ""
|
|
2287
2407
|
] }),
|
|
2288
|
-
runtime.phase === "success" ? /* @__PURE__ */
|
|
2408
|
+
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
2409
|
] }) });
|
|
2290
2410
|
}
|
|
2291
2411
|
function RecommendationCard({ item }) {
|
|
2292
2412
|
const href = safeHref2(item.href);
|
|
2293
2413
|
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__ */
|
|
2414
|
+
return /* @__PURE__ */ jsxs6("article", { style: { overflow: "hidden", borderRadius: 6, background: "#fff", boxShadow: "0 1px 2px rgb(0 0 0 / 8%)" }, children: [
|
|
2415
|
+
/* @__PURE__ */ jsx6(ProductImage2, { src: item.imageUrl, alt: item.title }),
|
|
2416
|
+
/* @__PURE__ */ jsxs6("div", { style: { padding: 14 }, children: [
|
|
2417
|
+
/* @__PURE__ */ jsx6("strong", { children: item.title }),
|
|
2418
|
+
price?.amount ? /* @__PURE__ */ jsx6("p", { style: { margin: "6px 0", fontWeight: 700 }, children: price.amount }) : null,
|
|
2419
|
+
/* @__PURE__ */ jsx6("p", { style: { margin: "6px 0", color: "#6b6b6b", fontSize: 13 }, children: item.description }),
|
|
2420
|
+
!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
2421
|
] })
|
|
2302
2422
|
] });
|
|
2303
2423
|
}
|
|
@@ -2306,32 +2426,32 @@ function BrandedRecommendationsBlock(props) {
|
|
|
2306
2426
|
const recommendations = runtime.displayedResult?.recommendations ?? [];
|
|
2307
2427
|
const title = text3(props, "heading", "You might also like");
|
|
2308
2428
|
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__ */
|
|
2429
|
+
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: [
|
|
2430
|
+
/* @__PURE__ */ jsx6("h2", { style: { margin: "0 0 24px", textAlign: "center", fontSize: 20 }, children: title }),
|
|
2431
|
+
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
2432
|
] }) });
|
|
2313
2433
|
}
|
|
2314
2434
|
function BrandedQuickLinksBlock(props) {
|
|
2315
2435
|
const title = text3(props, "heading", "Need help?");
|
|
2316
2436
|
const primaryHref = safeHref2(props.primaryHref);
|
|
2317
2437
|
const secondaryHref = safeHref2(props.secondaryHref);
|
|
2318
|
-
return /* @__PURE__ */
|
|
2319
|
-
/* @__PURE__ */
|
|
2320
|
-
/* @__PURE__ */
|
|
2321
|
-
primaryHref ? /* @__PURE__ */
|
|
2322
|
-
secondaryHref ? /* @__PURE__ */
|
|
2438
|
+
return /* @__PURE__ */ jsxs6("section", { "aria-label": title, style: { ...cardStyle, margin: "24px auto", maxWidth: 1200, padding: 24 }, children: [
|
|
2439
|
+
/* @__PURE__ */ jsx6("h2", { children: title }),
|
|
2440
|
+
/* @__PURE__ */ jsxs6("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: 16 }, children: [
|
|
2441
|
+
primaryHref ? /* @__PURE__ */ jsx6("a", { href: primaryHref, style: { color: "#0a0a0a" }, children: text3(props, "primaryLabel", "Shipping help") }) : /* @__PURE__ */ jsx6("span", { children: text3(props, "primaryLabel", "Shipping help") }),
|
|
2442
|
+
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
2443
|
] })
|
|
2324
2444
|
] });
|
|
2325
2445
|
}
|
|
2326
2446
|
function BrandedBlogBlock(props) {
|
|
2327
2447
|
const title = text3(props, "heading", "From our journal");
|
|
2328
2448
|
const href = safeHref2(props.articleHref);
|
|
2329
|
-
return /* @__PURE__ */
|
|
2330
|
-
/* @__PURE__ */
|
|
2331
|
-
/* @__PURE__ */
|
|
2332
|
-
/* @__PURE__ */
|
|
2333
|
-
/* @__PURE__ */
|
|
2334
|
-
href ? /* @__PURE__ */
|
|
2449
|
+
return /* @__PURE__ */ jsxs6("section", { "aria-label": title, style: { ...cardStyle, margin: "24px auto", maxWidth: 1200, padding: 24 }, children: [
|
|
2450
|
+
/* @__PURE__ */ jsx6("h2", { children: title }),
|
|
2451
|
+
/* @__PURE__ */ jsxs6("article", { children: [
|
|
2452
|
+
/* @__PURE__ */ jsx6("strong", { children: text3(props, "articleTitle", "Delivery tips for every season") }),
|
|
2453
|
+
/* @__PURE__ */ jsx6("p", { children: text3(props, "excerpt", "Simple ways to make every delivery feel considered.") }),
|
|
2454
|
+
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
2455
|
] })
|
|
2336
2456
|
] });
|
|
2337
2457
|
}
|
|
@@ -2369,7 +2489,7 @@ import { createPageDocument as createPageDocument3 } from "@standhigher/puck-pag
|
|
|
2369
2489
|
|
|
2370
2490
|
// src/sales.tsx
|
|
2371
2491
|
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
|
|
2492
|
+
import { Fragment as Fragment5, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
2373
2493
|
var initialRuntime3 = { phase: "idle", async query() {
|
|
2374
2494
|
return void 0;
|
|
2375
2495
|
} };
|
|
@@ -2395,13 +2515,13 @@ function SalesRuntimeProvider({ children, query: injectedQuery, watermark, resou
|
|
|
2395
2515
|
}
|
|
2396
2516
|
}, [injectedQuery]);
|
|
2397
2517
|
const value = useMemo4(() => ({ ...state, query, watermark, resourceResolution }), [query, resourceResolution, state, watermark]);
|
|
2398
|
-
return /* @__PURE__ */
|
|
2518
|
+
return /* @__PURE__ */ jsx7(SalesRuntimeContext.Provider, { value, children });
|
|
2399
2519
|
}
|
|
2400
2520
|
function useSalesRuntime() {
|
|
2401
2521
|
return useContext3(SalesRuntimeContext);
|
|
2402
2522
|
}
|
|
2403
2523
|
function RuntimeWatermark3({ watermark }) {
|
|
2404
|
-
return watermark?.visible ? /* @__PURE__ */
|
|
2524
|
+
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
2525
|
}
|
|
2406
2526
|
function text5(props, key, fallback) {
|
|
2407
2527
|
const value = props[key];
|
|
@@ -2410,28 +2530,28 @@ function text5(props, key, fallback) {
|
|
|
2410
2530
|
var safeHref3 = safeTrackingPageUrl;
|
|
2411
2531
|
var safeImageUrl3 = safeTrackingPageUrl;
|
|
2412
2532
|
function Status({ children, alert = false }) {
|
|
2413
|
-
return /* @__PURE__ */
|
|
2533
|
+
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
2534
|
}
|
|
2415
2535
|
function Section({ title, children, busy = false }) {
|
|
2416
|
-
return /* @__PURE__ */
|
|
2417
|
-
/* @__PURE__ */
|
|
2536
|
+
return /* @__PURE__ */ jsx7("section", { "aria-label": title, "aria-busy": busy || void 0, style: sectionStyle, children: /* @__PURE__ */ jsxs7("div", { style: panelStyle, children: [
|
|
2537
|
+
/* @__PURE__ */ jsx7("h2", { style: { margin: "0 0 20px", fontSize: "clamp(24px, 3vw, 34px)", lineHeight: 1.15 }, children: title }),
|
|
2418
2538
|
children
|
|
2419
2539
|
] }) });
|
|
2420
2540
|
}
|
|
2421
2541
|
function ProductImage3({ src, alt }) {
|
|
2422
2542
|
const [failed, setFailed] = useState5(false);
|
|
2423
2543
|
const safeSrc = safeImageUrl3(src);
|
|
2424
|
-
if (!safeSrc || failed) return /* @__PURE__ */
|
|
2425
|
-
return /* @__PURE__ */
|
|
2544
|
+
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() });
|
|
2545
|
+
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
2546
|
}
|
|
2427
2547
|
function HeroAsset({ src }) {
|
|
2428
2548
|
const [failed, setFailed] = useState5(false);
|
|
2429
2549
|
const safeSrc = safeImageUrl3(src);
|
|
2430
2550
|
if (!safeSrc || failed) return null;
|
|
2431
|
-
return /* @__PURE__ */
|
|
2551
|
+
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
2552
|
}
|
|
2433
2553
|
function SalesTextField({ value, onChange }) {
|
|
2434
|
-
return /* @__PURE__ */
|
|
2554
|
+
return /* @__PURE__ */ jsx7("input", { "aria-label": "Sales text", value: typeof value === "string" ? value : "", onChange: (event) => onChange(event.target.value) });
|
|
2435
2555
|
}
|
|
2436
2556
|
var editorSurfaceStyle = { boxSizing: "border-box", border: "1px solid #dfddd7", borderRadius: 10, padding: 24, background: "#ffffff", color: "#0a0a0a", fontFamily: "Arial, Helvetica, sans-serif" };
|
|
2437
2557
|
var editorCardStyle = { boxSizing: "border-box", padding: 18, border: "1px solid #dfddd7", borderRadius: 7, background: "#f7f5f0" };
|
|
@@ -2440,8 +2560,8 @@ function editorText(block, name, fallback) {
|
|
|
2440
2560
|
}
|
|
2441
2561
|
function SalesInlineText({ block, name, fallback, style }) {
|
|
2442
2562
|
const value = editorText(block, name, fallback);
|
|
2443
|
-
if (!block.selected) return /* @__PURE__ */
|
|
2444
|
-
return /* @__PURE__ */
|
|
2563
|
+
if (!block.selected) return /* @__PURE__ */ jsx7("span", { "data-sales-editor-field": name, style, children: value });
|
|
2564
|
+
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
2565
|
boxSizing: "border-box",
|
|
2446
2566
|
width: "100%",
|
|
2447
2567
|
/* border: "1px dashed currentColor", */
|
|
@@ -2458,95 +2578,95 @@ function SalesInlineText({ block, name, fallback, style }) {
|
|
|
2458
2578
|
} });
|
|
2459
2579
|
}
|
|
2460
2580
|
function SalesEditorSurface({ block, children }) {
|
|
2461
|
-
return /* @__PURE__ */
|
|
2581
|
+
return /* @__PURE__ */ jsx7("section", { "aria-label": "Sales editor preview", style: { ...editorSurfaceStyle, outline: block.selected ? "2px solid #2563eb" : void 0, outlineOffset: -2 }, children });
|
|
2462
2582
|
}
|
|
2463
2583
|
function SalesAnnouncementEditor(block) {
|
|
2464
|
-
return /* @__PURE__ */
|
|
2584
|
+
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
2585
|
}
|
|
2466
2586
|
function SalesQueryEditor(block) {
|
|
2467
2587
|
const imageUrl = safeImageUrl3(block.heroImageUrl);
|
|
2468
2588
|
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__ */
|
|
2589
|
+
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: [
|
|
2590
|
+
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,
|
|
2591
|
+
/* @__PURE__ */ jsx7("div", { "aria-hidden": "true", style: { position: "absolute", inset: 0, background: "rgb(0 0 0 / 42%)" } }),
|
|
2592
|
+
/* @__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: [
|
|
2593
|
+
/* @__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" }) }),
|
|
2594
|
+
/* @__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 } }),
|
|
2595
|
+
/* @__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" }) }),
|
|
2596
|
+
/* @__PURE__ */ jsx7("small", { style: { display: "block", marginTop: 14, color: "#6b6b6b", fontSize: 11, textAlign: "right" }, children: "Powered by BestTrack" })
|
|
2477
2597
|
] })
|
|
2478
2598
|
] });
|
|
2479
2599
|
}
|
|
2480
2600
|
function SalesOrderItemsEditor(block) {
|
|
2481
|
-
return /* @__PURE__ */
|
|
2482
|
-
/* @__PURE__ */
|
|
2483
|
-
/* @__PURE__ */
|
|
2484
|
-
/* @__PURE__ */
|
|
2485
|
-
/* @__PURE__ */
|
|
2486
|
-
/* @__PURE__ */
|
|
2487
|
-
/* @__PURE__ */
|
|
2488
|
-
/* @__PURE__ */
|
|
2601
|
+
return /* @__PURE__ */ jsxs7(SalesEditorSurface, { block, children: [
|
|
2602
|
+
/* @__PURE__ */ jsx7("h2", { style: { margin: "0 0 20px" }, children: /* @__PURE__ */ jsx7(SalesInlineText, { block, name: "heading", fallback: "Items in your order" }) }),
|
|
2603
|
+
/* @__PURE__ */ jsxs7("article", { style: { ...editorCardStyle, display: "flex", alignItems: "center", gap: 14 }, children: [
|
|
2604
|
+
/* @__PURE__ */ jsx7("span", { "aria-hidden": "true", style: { width: 68, height: 68, borderRadius: 7, background: "#dfddd7" } }),
|
|
2605
|
+
/* @__PURE__ */ jsxs7("span", { children: [
|
|
2606
|
+
/* @__PURE__ */ jsx7("strong", { children: "Order item" }),
|
|
2607
|
+
/* @__PURE__ */ jsx7("br", {}),
|
|
2608
|
+
/* @__PURE__ */ jsx7("small", { style: { color: "#6b6b6b" }, children: "Items appear after a successful tracking query." })
|
|
2489
2609
|
] })
|
|
2490
2610
|
] })
|
|
2491
2611
|
] });
|
|
2492
2612
|
}
|
|
2493
2613
|
function SalesOtherTrackingEditor(block) {
|
|
2494
|
-
return /* @__PURE__ */
|
|
2495
|
-
/* @__PURE__ */
|
|
2496
|
-
/* @__PURE__ */
|
|
2614
|
+
return /* @__PURE__ */ jsxs7(SalesEditorSurface, { block, children: [
|
|
2615
|
+
/* @__PURE__ */ jsx7("h2", { style: { margin: "0 0 20px" }, children: /* @__PURE__ */ jsx7(SalesInlineText, { block, name: "heading", fallback: "Other shipments" }) }),
|
|
2616
|
+
/* @__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
2617
|
] });
|
|
2498
2618
|
}
|
|
2499
2619
|
function SalesServiceCardsEditor(block) {
|
|
2500
|
-
return /* @__PURE__ */
|
|
2501
|
-
/* @__PURE__ */
|
|
2502
|
-
/* @__PURE__ */
|
|
2503
|
-
/* @__PURE__ */
|
|
2504
|
-
/* @__PURE__ */
|
|
2505
|
-
/* @__PURE__ */
|
|
2620
|
+
return /* @__PURE__ */ jsxs7(SalesEditorSurface, { block, children: [
|
|
2621
|
+
/* @__PURE__ */ jsx7("h2", { style: { margin: "0 0 20px" }, children: /* @__PURE__ */ jsx7(SalesInlineText, { block, name: "heading", fallback: "Shop with confidence" }) }),
|
|
2622
|
+
/* @__PURE__ */ jsxs7("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 180px), 1fr))", gap: 14 }, children: [
|
|
2623
|
+
/* @__PURE__ */ jsxs7("article", { style: editorCardStyle, children: [
|
|
2624
|
+
/* @__PURE__ */ jsx7("strong", { children: /* @__PURE__ */ jsx7(SalesInlineText, { block, name: "firstTitle", fallback: "Easy returns" }) }),
|
|
2625
|
+
/* @__PURE__ */ jsx7("p", { style: { marginBottom: 0, color: "#6b6b6b" }, children: /* @__PURE__ */ jsx7(SalesInlineText, { block, name: "firstDescription", fallback: "Simple support when plans change." }) })
|
|
2506
2626
|
] }),
|
|
2507
|
-
/* @__PURE__ */
|
|
2508
|
-
/* @__PURE__ */
|
|
2509
|
-
/* @__PURE__ */
|
|
2627
|
+
/* @__PURE__ */ jsxs7("article", { style: editorCardStyle, children: [
|
|
2628
|
+
/* @__PURE__ */ jsx7("strong", { children: /* @__PURE__ */ jsx7(SalesInlineText, { block, name: "secondTitle", fallback: "Secure delivery" }) }),
|
|
2629
|
+
/* @__PURE__ */ jsx7("p", { style: { marginBottom: 0, color: "#6b6b6b" }, children: /* @__PURE__ */ jsx7(SalesInlineText, { block, name: "secondDescription", fallback: "Follow every milestone in one place." }) })
|
|
2510
2630
|
] })
|
|
2511
2631
|
] })
|
|
2512
2632
|
] });
|
|
2513
2633
|
}
|
|
2514
2634
|
function SalesProductCategoriesEditor(block) {
|
|
2515
2635
|
const collection = isShopifyResourceReference(block.collection, "collection") ? block.collection : void 0;
|
|
2516
|
-
return /* @__PURE__ */
|
|
2517
|
-
/* @__PURE__ */
|
|
2518
|
-
/* @__PURE__ */
|
|
2519
|
-
/* @__PURE__ */
|
|
2520
|
-
/* @__PURE__ */
|
|
2636
|
+
return /* @__PURE__ */ jsxs7(SalesEditorSurface, { block, children: [
|
|
2637
|
+
/* @__PURE__ */ jsx7("h2", { style: { margin: "0 0 20px" }, children: /* @__PURE__ */ jsx7(SalesInlineText, { block, name: "heading", fallback: "Shop by category" }) }),
|
|
2638
|
+
/* @__PURE__ */ jsxs7("div", { style: { ...editorCardStyle, display: "flex", justifyContent: "space-between", fontWeight: 700 }, children: [
|
|
2639
|
+
/* @__PURE__ */ jsx7("span", { children: collection?.title ?? "Choose a collection in the inspector" }),
|
|
2640
|
+
/* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\u2192" })
|
|
2521
2641
|
] })
|
|
2522
2642
|
] });
|
|
2523
2643
|
}
|
|
2524
2644
|
function SalesFeaturedProductEditor(block) {
|
|
2525
2645
|
const product = isShopifyResourceReference(block.product, "product") ? block.product : void 0;
|
|
2526
|
-
return /* @__PURE__ */
|
|
2527
|
-
/* @__PURE__ */
|
|
2528
|
-
/* @__PURE__ */
|
|
2529
|
-
/* @__PURE__ */
|
|
2530
|
-
/* @__PURE__ */
|
|
2646
|
+
return /* @__PURE__ */ jsxs7(SalesEditorSurface, { block, children: [
|
|
2647
|
+
/* @__PURE__ */ jsx7("h2", { style: { margin: "0 0 20px" }, children: /* @__PURE__ */ jsx7(SalesInlineText, { block, name: "heading", fallback: "Featured product" }) }),
|
|
2648
|
+
/* @__PURE__ */ jsxs7("div", { style: { ...editorCardStyle, display: "flex", justifyContent: "space-between", fontWeight: 700 }, children: [
|
|
2649
|
+
/* @__PURE__ */ jsx7("span", { children: product?.title ?? "Choose a product in the inspector" }),
|
|
2650
|
+
/* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\u2192" })
|
|
2531
2651
|
] }),
|
|
2532
|
-
/* @__PURE__ */
|
|
2652
|
+
/* @__PURE__ */ jsx7("small", { style: { display: "block", marginTop: 10, color: "#6b6b6b" }, children: "Availability is supplied by the authorized runtime." })
|
|
2533
2653
|
] });
|
|
2534
2654
|
}
|
|
2535
2655
|
function SalesRecommendationsEditor(block) {
|
|
2536
|
-
return /* @__PURE__ */
|
|
2537
|
-
/* @__PURE__ */
|
|
2538
|
-
/* @__PURE__ */
|
|
2656
|
+
return /* @__PURE__ */ jsxs7(SalesEditorSurface, { block, children: [
|
|
2657
|
+
/* @__PURE__ */ jsx7("h2", { style: { margin: "0 0 20px" }, children: /* @__PURE__ */ jsx7(SalesInlineText, { block, name: "heading", fallback: "Complete your order" }) }),
|
|
2658
|
+
/* @__PURE__ */ jsx7("div", { style: { ...editorCardStyle, color: "#6b6b6b" }, children: "Recommended products appear after a successful tracking query." })
|
|
2539
2659
|
] });
|
|
2540
2660
|
}
|
|
2541
2661
|
function SalesAnnouncementBlock(props) {
|
|
2542
|
-
return /* @__PURE__ */
|
|
2662
|
+
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
2663
|
}
|
|
2544
2664
|
function SalesQueryBlock(props) {
|
|
2545
2665
|
const runtime = useSalesRuntime();
|
|
2546
|
-
return /* @__PURE__ */
|
|
2547
|
-
/* @__PURE__ */
|
|
2548
|
-
/* @__PURE__ */
|
|
2549
|
-
/* @__PURE__ */
|
|
2666
|
+
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: [
|
|
2667
|
+
/* @__PURE__ */ jsx7(HeroAsset, { src: props.heroImageUrl }),
|
|
2668
|
+
/* @__PURE__ */ jsx7("div", { "aria-hidden": "true", style: { position: "absolute", inset: 0, background: "rgb(0 0 0 / 42%)" } }),
|
|
2669
|
+
/* @__PURE__ */ jsx7("div", { style: { ...contentWidth3, position: "relative", zIndex: 1, display: "grid", alignItems: "center", width: "100%", minWidth: 0 }, children: /* @__PURE__ */ jsx7(
|
|
2550
2670
|
TrackingQueryCard,
|
|
2551
2671
|
{
|
|
2552
2672
|
phase: runtime.phase,
|
|
@@ -2555,8 +2675,6 @@ function SalesQueryBlock(props) {
|
|
|
2555
2675
|
submitLabel: text5(props, "submitLabel", "Track order"),
|
|
2556
2676
|
initialTrackingNumber: text5(props, "defaultTrackingNumber", "BT-2048-DEMO"),
|
|
2557
2677
|
initialOrderNumber: text5(props, "defaultOrderNumber", ""),
|
|
2558
|
-
loadingLabel: "Checking...",
|
|
2559
|
-
loadingMessage: "Checking your order\u2026",
|
|
2560
2678
|
emptyMessage: "We couldn\u2019t find an order for that number.",
|
|
2561
2679
|
errorMessage: "We couldn\u2019t retrieve this order right now. Please try again later.",
|
|
2562
2680
|
trackingInputLabel: "Sales tracking number",
|
|
@@ -2571,9 +2689,9 @@ function SalesQueryBlock(props) {
|
|
|
2571
2689
|
formStyle: { gap: 14 },
|
|
2572
2690
|
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
2691
|
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__ */
|
|
2692
|
+
result: runtime.result ? /* @__PURE__ */ jsx7(TrackingQueryResultDetails, { result: runtime.result }) : null,
|
|
2575
2693
|
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__ */
|
|
2694
|
+
watermark: /* @__PURE__ */ jsx7(RuntimeWatermark3, { watermark: runtime.watermark })
|
|
2577
2695
|
}
|
|
2578
2696
|
) })
|
|
2579
2697
|
] });
|
|
@@ -2582,114 +2700,114 @@ function SalesOrderItemsBlock(props) {
|
|
|
2582
2700
|
const runtime = useSalesRuntime();
|
|
2583
2701
|
const title = text5(props, "heading", "Items in your order");
|
|
2584
2702
|
const items = runtime.result?.orderItems ?? [];
|
|
2585
|
-
return /* @__PURE__ */
|
|
2703
|
+
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
2704
|
const href = safeHref3(item.href);
|
|
2587
2705
|
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__ */
|
|
2706
|
+
const itemContent = href ? /* @__PURE__ */ jsx7("a", { href, style: { color: "inherit" }, children: itemTitle }) : itemTitle;
|
|
2707
|
+
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: [
|
|
2708
|
+
/* @__PURE__ */ jsx7(ProductImage3, { src: item.imageUrl, alt: itemTitle }),
|
|
2709
|
+
/* @__PURE__ */ jsxs7("span", { style: { minWidth: 0 }, children: [
|
|
2710
|
+
/* @__PURE__ */ jsx7("strong", { children: itemContent }),
|
|
2711
|
+
/* @__PURE__ */ jsx7("br", {}),
|
|
2712
|
+
/* @__PURE__ */ jsxs7("small", { style: { color: "var(--pb-color-muted)" }, children: [
|
|
2595
2713
|
"Qty ",
|
|
2596
2714
|
Number.isFinite(item.quantity) && item.quantity > 0 ? item.quantity : 1
|
|
2597
2715
|
] }),
|
|
2598
|
-
item.description ? /* @__PURE__ */
|
|
2599
|
-
/* @__PURE__ */
|
|
2600
|
-
/* @__PURE__ */
|
|
2716
|
+
item.description ? /* @__PURE__ */ jsxs7(Fragment5, { children: [
|
|
2717
|
+
/* @__PURE__ */ jsx7("br", {}),
|
|
2718
|
+
/* @__PURE__ */ jsx7("small", { style: { color: "var(--pb-color-muted)" }, children: item.description })
|
|
2601
2719
|
] }) : null
|
|
2602
2720
|
] })
|
|
2603
2721
|
] }, item.id);
|
|
2604
|
-
}) }) : /* @__PURE__ */
|
|
2722
|
+
}) }) : /* @__PURE__ */ jsx7(Status, { children: runtime.phase === "loading" ? "Loading order items\u2026" : "Order items appear after a successful query." }) });
|
|
2605
2723
|
}
|
|
2606
2724
|
function SalesOtherTrackingBlock(props) {
|
|
2607
2725
|
const runtime = useSalesRuntime();
|
|
2608
2726
|
const title = text5(props, "heading", "Other shipments");
|
|
2609
2727
|
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__ */
|
|
2728
|
+
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: [
|
|
2729
|
+
/* @__PURE__ */ jsx7("strong", { children: text5(shipment, "label", "Shipment") }),
|
|
2730
|
+
shipment.status ? /* @__PURE__ */ jsx7("p", { style: { margin: "8px 0 0", color: "var(--pb-color-muted)" }, children: shipment.status }) : null,
|
|
2731
|
+
shipment.trackingNumber ? /* @__PURE__ */ jsx7("small", { style: { display: "block", marginTop: 8, color: "var(--pb-color-muted)" }, children: shipment.trackingNumber }) : null
|
|
2732
|
+
] }, 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
2733
|
}
|
|
2616
2734
|
function SalesServiceCardsBlock(props) {
|
|
2617
2735
|
const title = text5(props, "heading", "Shop with confidence");
|
|
2618
|
-
return /* @__PURE__ */
|
|
2619
|
-
/* @__PURE__ */
|
|
2620
|
-
/* @__PURE__ */
|
|
2621
|
-
/* @__PURE__ */
|
|
2736
|
+
return /* @__PURE__ */ jsx7(Section, { title, children: /* @__PURE__ */ jsxs7("div", { style: gridStyle, children: [
|
|
2737
|
+
/* @__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: [
|
|
2738
|
+
/* @__PURE__ */ jsx7("strong", { children: text5(props, "firstTitle", "Easy returns") }),
|
|
2739
|
+
/* @__PURE__ */ jsx7("p", { style: { marginBottom: 0, color: "var(--pb-color-muted)" }, children: text5(props, "firstDescription", "Simple support when plans change.") })
|
|
2622
2740
|
] }),
|
|
2623
|
-
/* @__PURE__ */
|
|
2624
|
-
/* @__PURE__ */
|
|
2625
|
-
/* @__PURE__ */
|
|
2741
|
+
/* @__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: [
|
|
2742
|
+
/* @__PURE__ */ jsx7("strong", { children: text5(props, "secondTitle", "Secure delivery") }),
|
|
2743
|
+
/* @__PURE__ */ jsx7("p", { style: { marginBottom: 0, color: "var(--pb-color-muted)" }, children: text5(props, "secondDescription", "Follow every milestone in one place.") })
|
|
2626
2744
|
] })
|
|
2627
2745
|
] }) });
|
|
2628
2746
|
}
|
|
2629
2747
|
function SalesProductCategoriesBlock(props) {
|
|
2630
2748
|
const title = text5(props, "heading", "Shop by category");
|
|
2631
2749
|
const runtime = useSalesRuntime();
|
|
2632
|
-
if (props.collection !== void 0 && props.collection !== null && !isShopifyResourceReference(props.collection, "collection")) return /* @__PURE__ */
|
|
2750
|
+
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
2751
|
const collection = isShopifyResourceReference(props.collection, "collection") ? props.collection : void 0;
|
|
2634
|
-
if (!collection) return /* @__PURE__ */
|
|
2752
|
+
if (!collection) return /* @__PURE__ */ jsx7(Section, { title, children: /* @__PURE__ */ jsx7(Status, { children: "No collection selected. Choose a collection through an authorized resource integration." }) });
|
|
2635
2753
|
const resolved = getResolvedShopifyResource(collection, runtime.resourceResolution);
|
|
2636
2754
|
const error = getShopifyResourceResolutionError(collection, runtime.resourceResolution);
|
|
2637
|
-
if (error) return /* @__PURE__ */
|
|
2638
|
-
if (!resolved) return /* @__PURE__ */
|
|
2639
|
-
const content = /* @__PURE__ */
|
|
2640
|
-
/* @__PURE__ */
|
|
2641
|
-
/* @__PURE__ */
|
|
2755
|
+
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." }) });
|
|
2756
|
+
if (!resolved) return /* @__PURE__ */ jsx7(Section, { title, children: /* @__PURE__ */ jsx7(Status, { children: "Collection details are resolved by the authorized runtime." }) });
|
|
2757
|
+
const content = /* @__PURE__ */ jsxs7(Fragment5, { children: [
|
|
2758
|
+
/* @__PURE__ */ jsx7("span", { children: resolved.title }),
|
|
2759
|
+
/* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\u2192" })
|
|
2642
2760
|
] });
|
|
2643
2761
|
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__ */
|
|
2762
|
+
return /* @__PURE__ */ jsx7(Section, { title, children: resolved.href ? /* @__PURE__ */ jsx7("a", { href: resolved.href, style, children: content }) : /* @__PURE__ */ jsx7("div", { style, children: content }) });
|
|
2645
2763
|
}
|
|
2646
2764
|
function SalesFeaturedProductBlock(props) {
|
|
2647
2765
|
const runtime = useSalesRuntime();
|
|
2648
2766
|
const title = text5(props, "heading", "Featured product");
|
|
2649
|
-
if (props.product !== void 0 && props.product !== null && !isShopifyResourceReference(props.product, "product")) return /* @__PURE__ */
|
|
2767
|
+
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
2768
|
const product = isShopifyResourceReference(props.product, "product") ? props.product : void 0;
|
|
2651
|
-
if (!product) return /* @__PURE__ */
|
|
2769
|
+
if (!product) return /* @__PURE__ */ jsx7(Section, { title, children: /* @__PURE__ */ jsx7(Status, { children: "No product selected. Choose a product through an authorized resource integration." }) });
|
|
2652
2770
|
const resolved = getResolvedShopifyResource(product, runtime.resourceResolution);
|
|
2653
2771
|
const error = getShopifyResourceResolutionError(product, runtime.resourceResolution);
|
|
2654
|
-
if (error) return /* @__PURE__ */
|
|
2655
|
-
if (!resolved) return /* @__PURE__ */
|
|
2772
|
+
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." }) });
|
|
2773
|
+
if (!resolved) return /* @__PURE__ */ jsx7(Section, { title, children: /* @__PURE__ */ jsx7(Status, { children: "Product details and availability are resolved by the authorized runtime." }) });
|
|
2656
2774
|
const available = resolved.availability === "available";
|
|
2657
|
-
const body = /* @__PURE__ */
|
|
2658
|
-
/* @__PURE__ */
|
|
2659
|
-
/* @__PURE__ */
|
|
2660
|
-
/* @__PURE__ */
|
|
2661
|
-
/* @__PURE__ */
|
|
2662
|
-
/* @__PURE__ */
|
|
2775
|
+
const body = /* @__PURE__ */ jsxs7(Fragment5, { children: [
|
|
2776
|
+
/* @__PURE__ */ jsx7(ProductImage3, { src: resolved.imageUrl, alt: resolved.title }),
|
|
2777
|
+
/* @__PURE__ */ jsxs7("span", { style: { minWidth: 0, flex: 1 }, children: [
|
|
2778
|
+
/* @__PURE__ */ jsx7("strong", { children: resolved.title }),
|
|
2779
|
+
/* @__PURE__ */ jsx7("br", {}),
|
|
2780
|
+
/* @__PURE__ */ jsx7("small", { style: { color: "var(--pb-color-muted)" }, children: available ? "Available" : resolved.availability === "sold-out" ? "Sold out" : "Unavailable" })
|
|
2663
2781
|
] })
|
|
2664
2782
|
] });
|
|
2665
2783
|
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__ */
|
|
2784
|
+
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
2785
|
}
|
|
2668
2786
|
function SalesRecommendationsBlock(props) {
|
|
2669
2787
|
const runtime = useSalesRuntime();
|
|
2670
2788
|
const title = text5(props, "heading", "Complete your order");
|
|
2671
2789
|
const recommendations = runtime.result?.recommendations ?? [];
|
|
2672
|
-
return /* @__PURE__ */
|
|
2790
|
+
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
2791
|
const href = safeHref3(item.href);
|
|
2674
2792
|
const itemTitle = text5(item, "title", "Recommended product");
|
|
2675
2793
|
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__ */
|
|
2794
|
+
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: [
|
|
2795
|
+
/* @__PURE__ */ jsx7(ProductImage3, { src: item.imageUrl, alt: itemTitle }),
|
|
2796
|
+
/* @__PURE__ */ jsxs7("div", { children: [
|
|
2797
|
+
/* @__PURE__ */ jsx7("strong", { children: href ? /* @__PURE__ */ jsx7("a", { href, style: { color: "inherit" }, children: itemTitle }) : itemTitle }),
|
|
2798
|
+
price?.amount ? /* @__PURE__ */ jsx7("small", { style: { display: "block", marginTop: 5, color: "var(--pb-color-muted)" }, children: price.amount }) : null,
|
|
2799
|
+
item.description ? /* @__PURE__ */ jsx7("p", { style: { marginBottom: 0, color: "var(--pb-color-muted)" }, children: item.description }) : null
|
|
2682
2800
|
] })
|
|
2683
2801
|
] }, item.id);
|
|
2684
|
-
}) }) : /* @__PURE__ */
|
|
2802
|
+
}) }) : /* @__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
2803
|
}
|
|
2686
2804
|
|
|
2687
2805
|
// src/shopify-resources.tsx
|
|
2688
2806
|
import { createContext as createContext4, useCallback as useCallback5, useContext as useContext4, useState as useState6 } from "react";
|
|
2689
|
-
import { jsx as
|
|
2807
|
+
import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
2690
2808
|
var ShopifyResourceBrowserContext = createContext4(void 0);
|
|
2691
2809
|
function ShopifyResourcePickerProvider({ browser, children }) {
|
|
2692
|
-
return /* @__PURE__ */
|
|
2810
|
+
return /* @__PURE__ */ jsx8(ShopifyResourceBrowserContext.Provider, { value: browser, children });
|
|
2693
2811
|
}
|
|
2694
2812
|
var pickerSurface = { marginTop: 8, padding: 12, border: "1px solid #c9cccf", borderRadius: 8, background: "#fff", color: "#202223" };
|
|
2695
2813
|
var pickerButton = { minHeight: 32, padding: "6px 10px", border: "1px solid #8c9196", borderRadius: 6, background: "#fff", color: "#202223", font: "inherit", cursor: "pointer" };
|
|
@@ -2715,17 +2833,17 @@ function ResourceField({ value, onChange, kind }) {
|
|
|
2715
2833
|
}
|
|
2716
2834
|
}, [browser, kind]);
|
|
2717
2835
|
const name = kind === "product" ? "product" : "collection";
|
|
2718
|
-
return /* @__PURE__ */
|
|
2719
|
-
selected ? /* @__PURE__ */
|
|
2720
|
-
/* @__PURE__ */
|
|
2721
|
-
/* @__PURE__ */
|
|
2722
|
-
/* @__PURE__ */
|
|
2723
|
-
] }) : /* @__PURE__ */
|
|
2836
|
+
return /* @__PURE__ */ jsxs8("div", { "data-shopify-resource-field": kind, children: [
|
|
2837
|
+
selected ? /* @__PURE__ */ jsxs8("p", { style: { margin: "0 0 8px" }, children: [
|
|
2838
|
+
/* @__PURE__ */ jsx8("strong", { children: selected.title }),
|
|
2839
|
+
/* @__PURE__ */ jsx8("br", {}),
|
|
2840
|
+
/* @__PURE__ */ jsx8("small", { children: selected.id })
|
|
2841
|
+
] }) : /* @__PURE__ */ jsxs8("p", { style: { margin: "0 0 8px" }, children: [
|
|
2724
2842
|
"No ",
|
|
2725
2843
|
name,
|
|
2726
2844
|
" selected."
|
|
2727
2845
|
] }),
|
|
2728
|
-
/* @__PURE__ */
|
|
2846
|
+
/* @__PURE__ */ jsx8("button", { type: "button", style: pickerButton, onClick: () => {
|
|
2729
2847
|
if (open) {
|
|
2730
2848
|
setOpen(false);
|
|
2731
2849
|
return;
|
|
@@ -2734,41 +2852,41 @@ function ResourceField({ value, onChange, kind }) {
|
|
|
2734
2852
|
if (browser) void search("");
|
|
2735
2853
|
else setState("error");
|
|
2736
2854
|
}, children: open ? "Close selector" : `Select ${name}` }),
|
|
2737
|
-
open ? /* @__PURE__ */
|
|
2738
|
-
/* @__PURE__ */
|
|
2855
|
+
open ? /* @__PURE__ */ jsxs8("div", { role: "dialog", "aria-label": `Select Shopify ${name}`, style: pickerSurface, children: [
|
|
2856
|
+
/* @__PURE__ */ jsxs8("form", { onSubmit: (event) => {
|
|
2739
2857
|
event.preventDefault();
|
|
2740
2858
|
void search(query);
|
|
2741
2859
|
}, children: [
|
|
2742
|
-
/* @__PURE__ */
|
|
2860
|
+
/* @__PURE__ */ jsxs8("label", { style: { display: "block" }, children: [
|
|
2743
2861
|
"Search ",
|
|
2744
2862
|
name,
|
|
2745
2863
|
"s",
|
|
2746
|
-
/* @__PURE__ */
|
|
2864
|
+
/* @__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
2865
|
] }),
|
|
2748
|
-
/* @__PURE__ */
|
|
2866
|
+
/* @__PURE__ */ jsx8("button", { type: "submit", disabled: state === "loading", style: { ...pickerButton, marginTop: 8 }, children: state === "loading" ? "Searching\u2026" : "Search" })
|
|
2749
2867
|
] }),
|
|
2750
|
-
state === "error" ? /* @__PURE__ */
|
|
2751
|
-
state === "idle" && !items.length ? /* @__PURE__ */
|
|
2868
|
+
state === "error" ? /* @__PURE__ */ jsx8("p", { role: "alert", children: "The authorized resource service is unavailable. Try again later." }) : null,
|
|
2869
|
+
state === "idle" && !items.length ? /* @__PURE__ */ jsxs8("p", { role: "status", children: [
|
|
2752
2870
|
"No ",
|
|
2753
2871
|
name,
|
|
2754
2872
|
"s found."
|
|
2755
2873
|
] }) : null,
|
|
2756
|
-
items.length ? /* @__PURE__ */
|
|
2874
|
+
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
2875
|
onChange(item);
|
|
2758
2876
|
setOpen(false);
|
|
2759
2877
|
}, children: [
|
|
2760
|
-
/* @__PURE__ */
|
|
2761
|
-
item.handle ? /* @__PURE__ */
|
|
2878
|
+
/* @__PURE__ */ jsx8("strong", { children: item.title }),
|
|
2879
|
+
item.handle ? /* @__PURE__ */ jsx8("small", { style: { display: "block" }, children: item.handle }) : null
|
|
2762
2880
|
] }) }, item.id)) }) : null,
|
|
2763
|
-
cursor ? /* @__PURE__ */
|
|
2881
|
+
cursor ? /* @__PURE__ */ jsx8("button", { type: "button", disabled: state === "loading", style: pickerButton, onClick: () => void search(query, cursor, true), children: "Load more" }) : null
|
|
2764
2882
|
] }) : null
|
|
2765
2883
|
] });
|
|
2766
2884
|
}
|
|
2767
2885
|
function ShopifyProductResourceField(props) {
|
|
2768
|
-
return /* @__PURE__ */
|
|
2886
|
+
return /* @__PURE__ */ jsx8(ResourceField, { ...props, kind: "product" });
|
|
2769
2887
|
}
|
|
2770
2888
|
function ShopifyCollectionResourceField(props) {
|
|
2771
|
-
return /* @__PURE__ */
|
|
2889
|
+
return /* @__PURE__ */ jsx8(ResourceField, { ...props, kind: "collection" });
|
|
2772
2890
|
}
|
|
2773
2891
|
|
|
2774
2892
|
// src/sales-definition.ts
|