@standhigher/besttrack-page-extension 0.5.1 → 0.5.2

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 CHANGED
@@ -834,9 +834,22 @@ var pageFont = { fontFamily: "var(--pb-font-family, Inter, system-ui, sans-serif
834
834
  var contentWidth = {
835
835
  width: "min(1248px, 100%)",
836
836
  margin: "0 auto",
837
- padding: "48px 24px",
837
+ padding: "48px clamp(16px, 4%, 24px)",
838
838
  boxSizing: "border-box"
839
839
  };
840
+ var trackingProgressStyles = `
841
+ .bt-progress { container-type: inline-size; }
842
+ .bt-progress__icon { width: 44px; height: 44px; }
843
+ .bt-progress__line { top: 19px; }
844
+ .bt-progress__copy { margin-top: 16px; }
845
+ .bt-progress__label { font-size: 16px; line-height: 20px; }
846
+ @container (max-width: 640px) {
847
+ .bt-progress__icon { width: 32px; height: 32px; }
848
+ .bt-progress__line { top: 13px; }
849
+ .bt-progress__copy { margin-top: 8px; }
850
+ .bt-progress__label { font-size: 11px; line-height: 14px; }
851
+ }
852
+ `;
840
853
  function text(props, key, fallback = "") {
841
854
  return typeof props[key] === "string" ? props[key] : fallback;
842
855
  }
@@ -902,21 +915,26 @@ function ProductImage({ src, alt, size = 60 }) {
902
915
  }
903
916
  function TrackingProgress({ steps }) {
904
917
  const cells = Math.max(steps.length, 1);
905
- const columns = cells <= 1 ? "44px" : Array.from({ length: cells - 1 }, () => "44px minmax(20px, 1fr)").join(" ") + " 44px";
906
- return /* @__PURE__ */ jsx("div", { role: "region", "aria-label": "Delivery progress", style: { marginTop: 32, width: "100%", maxWidth: 1200, marginLeft: "auto", marginRight: "auto", overflow: "visible" }, children: /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: columns, alignItems: "start", columnGap: 8, width: "100%" }, children: steps.map((step, index) => {
907
- const done = step.state === "complete" || step.state === "current";
908
- const nextDone = steps[index + 1]?.state === "complete" || steps[index + 1]?.state === "current";
909
- return /* @__PURE__ */ jsxs("div", { style: { display: "contents" }, children: [
910
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", overflow: "visible" }, children: [
911
- /* @__PURE__ */ jsx("span", { "aria-label": step.label + " " + step.state, style: { display: "flex", width: 44, height: 44, flexShrink: 0, alignItems: "center", justifyContent: "center", borderRadius: 9999, border: "1px solid #0f172a", background: done ? "#0f172a" : "#fff", color: "#0f172a" }, children: /* @__PURE__ */ jsx(StepIcon, { name: step.icon ?? (index === 0 || index === steps.length - 1 ? "check" : index === 1 ? "bag" : index === 2 ? "truck" : "box"), done }) }),
912
- /* @__PURE__ */ jsxs("div", { style: { width: "max-content", textAlign: "center", marginTop: 16 }, children: [
913
- /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: 16, lineHeight: "20px", fontWeight: 500, color: "#334155" }, children: step.label }),
914
- step.date ? /* @__PURE__ */ jsx("p", { style: { margin: "8px 0 0", fontSize: 14, lineHeight: "18px", color: "#94a3b8" }, children: step.date }) : null
915
- ] })
916
- ] }),
917
- index < steps.length - 1 ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { display: "block", width: "100%", minWidth: 0, height: 6, marginTop: 19, borderRadius: 999, background: done && nextDone ? "#1a1a1a" : "rgba(0, 0, 0, 0.25)" } }) : null
918
- ] }, step.id);
919
- }) }) });
918
+ return /* @__PURE__ */ jsxs("div", { className: "bt-progress", role: "region", "aria-label": "Delivery progress", style: { marginTop: 32, width: "100%", maxWidth: 1200, marginLeft: "auto", marginRight: "auto", overflow: "visible" }, children: [
919
+ /* @__PURE__ */ jsx("style", { children: trackingProgressStyles }),
920
+ /* @__PURE__ */ jsxs("div", { style: { position: "relative", display: "grid", gridTemplateColumns: `repeat(${cells}, minmax(0, 1fr))`, columnGap: 4, width: "100%", alignItems: "start" }, children: [
921
+ cells > 1 ? /* @__PURE__ */ jsx("div", { className: "bt-progress__line", "aria-hidden": "true", style: { position: "absolute", left: `calc(50% / ${cells})`, right: `calc(50% / ${cells})`, height: 6, display: "flex", zIndex: 0, pointerEvents: "none" }, children: steps.slice(0, -1).map((step, index) => {
922
+ const done = step.state === "complete" || step.state === "current";
923
+ const nextDone = steps[index + 1]?.state === "complete" || steps[index + 1]?.state === "current";
924
+ return /* @__PURE__ */ jsx("span", { style: { flex: 1, height: 6, borderRadius: 999, background: done && nextDone ? "#1a1a1a" : "rgba(0, 0, 0, 0.25)" } }, step.id + "-line");
925
+ }) }) : null,
926
+ steps.map((step, index) => {
927
+ const done = step.state === "complete" || step.state === "current";
928
+ return /* @__PURE__ */ jsxs("div", { style: { minWidth: 0, display: "flex", flexDirection: "column", alignItems: "center", position: "relative", zIndex: 1 }, children: [
929
+ /* @__PURE__ */ jsx("span", { className: "bt-progress__icon", "aria-label": step.label + " " + step.state, style: { display: "flex", flexShrink: 0, alignItems: "center", justifyContent: "center", borderRadius: 9999, border: "1px solid #0f172a", background: done ? "#0f172a" : "#fff", color: "#0f172a" }, children: /* @__PURE__ */ jsx(StepIcon, { name: step.icon ?? (index === 0 || index === steps.length - 1 ? "check" : index === 1 ? "bag" : index === 2 ? "truck" : "box"), done }) }),
930
+ /* @__PURE__ */ jsxs("div", { className: "bt-progress__copy", style: { width: "100%", maxWidth: "100%", boxSizing: "border-box", textAlign: "center", padding: "0 2px" }, children: [
931
+ /* @__PURE__ */ jsx("p", { className: "bt-progress__label", style: { margin: 0, fontWeight: 500, color: "#334155", overflowWrap: "anywhere", wordBreak: "break-word" }, children: step.label }),
932
+ step.date ? /* @__PURE__ */ jsx("p", { style: { margin: "6px 0 0", fontSize: 12, lineHeight: "16px", color: "#94a3b8", overflowWrap: "anywhere" }, children: step.date }) : null
933
+ ] })
934
+ ] }, step.id);
935
+ })
936
+ ] })
937
+ ] });
920
938
  }
921
939
  function ShippingTimeline({ events }) {
922
940
  if (!events.length) {
@@ -1004,7 +1022,7 @@ function RecommendationCards({ items }) {
1004
1022
  color: "#333",
1005
1023
  padding: 0
1006
1024
  };
1007
- return /* @__PURE__ */ jsxs("div", { "aria-label": "Recommended products carousel", style: { position: "relative", marginLeft: 48, marginRight: 48 }, children: [
1025
+ return /* @__PURE__ */ jsxs("div", { "aria-label": "Recommended products carousel", style: { position: "relative", marginLeft: "min(48px, 4%)", marginRight: "min(48px, 4%)" }, children: [
1008
1026
  !hideButtons && canScrollPrev ? /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Previous", onClick: () => emblaApi?.scrollPrev(), style: { ...buttonStyle, left: -40 }, children: arrow("15 18 9 12 15 6") }) : null,
1009
1027
  /* @__PURE__ */ jsx("div", { ref: emblaRef, style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx("div", { style: { display: "flex" }, children: items.map((item) => {
1010
1028
  const href = safeHref(item.href);
@@ -1060,7 +1078,11 @@ function IdleMessage({ children }) {
1060
1078
  return /* @__PURE__ */ jsx("p", { style: { margin: 0, textAlign: "center", color: "var(--pb-color-muted, #64748b)" }, children });
1061
1079
  }
1062
1080
  function SkeletonRow() {
1063
- return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { display: "grid", gridTemplateColumns: "44px minmax(20px, 1fr) 44px minmax(20px, 1fr) 44px minmax(20px, 1fr) 44px minmax(20px, 1fr) 44px", columnGap: 8, width: "100%", maxWidth: 1200, margin: "32px auto 0" }, children: Array.from({ length: 5 }, (_, index) => /* @__PURE__ */ jsx("span", { style: { display: "block", width: 44, height: 44, borderRadius: 9999, background: "#e2e8f0" } }, index)).flatMap((circle, index, list) => index < list.length - 1 ? [circle, /* @__PURE__ */ jsx("span", { style: { display: "block", height: 6, marginTop: 19, borderRadius: 999, background: "#e2e8f0" } }, "line-" + index)] : [circle]) });
1081
+ 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: [
1082
+ /* @__PURE__ */ jsx("style", { children: trackingProgressStyles }),
1083
+ /* @__PURE__ */ jsx("span", { className: "bt-progress__line", style: { position: "absolute", left: "10%", right: "10%", height: 6, borderRadius: 999, background: "#e2e8f0" } }),
1084
+ Array.from({ length: 5 }, (_, index) => /* @__PURE__ */ jsx("span", { className: "bt-progress__icon", style: { display: "block", justifySelf: "center", borderRadius: 9999, background: "#e2e8f0" } }, index))
1085
+ ] });
1064
1086
  }
1065
1087
 
1066
1088
  // src/shopify-track-page/assets/not-found.png.ts
@@ -1173,7 +1195,7 @@ var heroStyle = {
1173
1195
  placeItems: "center",
1174
1196
  overflow: "hidden",
1175
1197
  backgroundColor: "#fff",
1176
- padding: "48px 24px",
1198
+ padding: "48px clamp(16px, 4%, 24px)",
1177
1199
  boxSizing: "border-box"
1178
1200
  };
1179
1201
  var editorHeroStyle = {
@@ -1182,7 +1204,7 @@ var editorHeroStyle = {
1182
1204
  display: "grid",
1183
1205
  placeItems: "center",
1184
1206
  backgroundColor: "#fff",
1185
- padding: "48px 24px",
1207
+ padding: "48px clamp(16px, 4%, 24px)",
1186
1208
  boxSizing: "border-box"
1187
1209
  };
1188
1210
  var formCardStyle = {
@@ -1194,7 +1216,7 @@ var formCardStyle = {
1194
1216
  borderRadius: "var(--pb-radius, 8px)",
1195
1217
  background: "var(--pb-color-surface, #fff)",
1196
1218
  color: "var(--pb-color-text, #0f172a)",
1197
- padding: 40,
1219
+ padding: "clamp(20px, 7%, 40px)",
1198
1220
  boxSizing: "border-box",
1199
1221
  boxShadow: "0 8px 24px rgba(0, 0, 0, 0.12)"
1200
1222
  };
@@ -1202,9 +1224,10 @@ var editorFormCardStyle = { ...formCardStyle, minHeight: 0 };
1202
1224
  var tabStyle = (active) => ({
1203
1225
  appearance: "none",
1204
1226
  flex: 1,
1227
+ minWidth: 0,
1205
1228
  minHeight: 53,
1206
1229
  margin: 0,
1207
- padding: "16px 10px",
1230
+ padding: "12px 6px",
1208
1231
  font: "inherit",
1209
1232
  fontSize: 15,
1210
1233
  lineHeight: "21px",
@@ -1214,7 +1237,9 @@ var tabStyle = (active) => ({
1214
1237
  borderBottom: active ? "2px solid #0f172a" : "2px solid transparent",
1215
1238
  borderRadius: 0,
1216
1239
  color: active ? "#0f172a" : "#94a3b8",
1217
- cursor: "pointer"
1240
+ cursor: "pointer",
1241
+ textAlign: "center",
1242
+ overflowWrap: "anywhere"
1218
1243
  });
1219
1244
  var inputStyle = {
1220
1245
  width: "100%",
@@ -1229,6 +1254,28 @@ var inputStyle = {
1229
1254
  color: "#334155",
1230
1255
  boxSizing: "border-box"
1231
1256
  };
1257
+ var hexColor = /^#(?:[\da-f]{3}|[\da-f]{4}|[\da-f]{6}|[\da-f]{8})$/i;
1258
+ var defaultSubmitButtonColor = "var(--pb-color-primary, #111)";
1259
+ function submitButtonBackground(props, loading = false) {
1260
+ if (loading) return "#475569";
1261
+ const value = text(props, "submitButtonColor");
1262
+ return hexColor.test(value) ? value : defaultSubmitButtonColor;
1263
+ }
1264
+ function submitButtonStyle(props, loading = false) {
1265
+ return {
1266
+ display: "flex",
1267
+ alignItems: "center",
1268
+ justifyContent: "center",
1269
+ width: "100%",
1270
+ minHeight: 58,
1271
+ marginTop: 8,
1272
+ borderRadius: "var(--pb-radius, 8px)",
1273
+ background: submitButtonBackground(props, loading),
1274
+ color: "#fff",
1275
+ fontSize: 15,
1276
+ fontWeight: 600
1277
+ };
1278
+ }
1232
1279
  function ReadyToGoTextField({ value, onChange }) {
1233
1280
  return /* @__PURE__ */ jsx3("input", { "aria-label": "Ready-to-go text", value: typeof value === "string" ? value : "", onChange: (event) => onChange(event.target.value) });
1234
1281
  }
@@ -1272,11 +1319,11 @@ function eventsFrom(result) {
1272
1319
  function ProgressResult({ result, showEstimatedDelivery = true }) {
1273
1320
  const steps = result.progress?.length ? result.progress : defaultProgress(result.status);
1274
1321
  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
1275
- /* @__PURE__ */ jsxs3("p", { style: { margin: 0, fontSize: 20, lineHeight: 1.4, color: "#000" }, children: [
1322
+ /* @__PURE__ */ jsxs3("p", { style: { margin: 0, fontSize: 20, lineHeight: 1.4, color: "#000", overflowWrap: "anywhere" }, children: [
1276
1323
  "Tracking: ",
1277
1324
  result.trackingNumber
1278
1325
  ] }),
1279
- /* @__PURE__ */ jsx3("h2", { style: { margin: "48px 0 0", fontSize: 32, lineHeight: "40px", fontWeight: 700, color: "#303030" }, children: result.status }),
1326
+ /* @__PURE__ */ jsx3("h2", { style: { margin: "clamp(24px, 8%, 48px) 0 0", fontSize: 32, lineHeight: 1.25, fontWeight: 700, color: "#303030", overflowWrap: "anywhere" }, children: result.status }),
1280
1327
  showEstimatedDelivery && result.estimatedDelivery ? /* @__PURE__ */ jsx3(EstimatedDeliveryCard, { dateText: result.estimatedDelivery }) : null,
1281
1328
  /* @__PURE__ */ jsx3(TrackingProgress, { steps })
1282
1329
  ] });
@@ -1303,7 +1350,7 @@ function DeliveryResult({ heading, contentsHeading, carrierHeading, result, edit
1303
1350
  }
1304
1351
  function ReadyToGoQueryEditor(block) {
1305
1352
  return /* @__PURE__ */ jsx3("section", { "aria-label": "Ready-to-go query editor", style: editorHeroStyle, children: /* @__PURE__ */ jsxs3("div", { role: "region", "aria-label": "Ready-to-go tracking query", style: editorFormCardStyle, children: [
1306
- /* @__PURE__ */ jsx3("h1", { style: { margin: "0 0 24px", textAlign: "center", fontSize: 28, lineHeight: 1.15 }, children: /* @__PURE__ */ jsx3(InlineText, { block, name: "heading", fallback: "Track your order" }) }),
1353
+ /* @__PURE__ */ jsx3("h1", { style: { margin: "0 0 24px", textAlign: "center", fontSize: 28, lineHeight: 1.15, overflowWrap: "anywhere" }, children: /* @__PURE__ */ jsx3(InlineText, { block, name: "heading", fallback: "Track your order" }) }),
1307
1354
  /* @__PURE__ */ jsxs3("div", { style: { display: "flex", width: "100%", borderBottom: "1px solid #cbd5e1" }, children: [
1308
1355
  /* @__PURE__ */ jsx3("div", { style: { ...tabStyle(true), display: "flex", alignItems: "center", justifyContent: "center", cursor: "default" }, children: /* @__PURE__ */ jsx3(InlineText, { block, name: "trackingTabLabel", fallback: "Tracking Number" }) }),
1309
1356
  /* @__PURE__ */ jsx3("div", { style: { ...tabStyle(false), display: "flex", alignItems: "center", justifyContent: "center", cursor: "default" }, children: /* @__PURE__ */ jsx3(InlineText, { block, name: "orderTabLabel", fallback: "Order Number" }) })
@@ -1324,7 +1371,7 @@ function ReadyToGoQueryEditor(block) {
1324
1371
  }
1325
1372
  }
1326
1373
  ),
1327
- /* @__PURE__ */ jsx3("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", minHeight: 58, marginTop: 8, borderRadius: "var(--pb-radius, 8px)", background: "var(--pb-color-primary, #111)", color: "#fff", fontSize: 15, fontWeight: 600 }, children: /* @__PURE__ */ jsx3(InlineText, { block, name: "submitLabel", fallback: "Track Your Order" }) })
1374
+ /* @__PURE__ */ jsx3("div", { style: submitButtonStyle(block), children: /* @__PURE__ */ jsx3(InlineText, { block, name: "submitLabel", fallback: "Track Your Order" }) })
1328
1375
  ] }),
1329
1376
  /* @__PURE__ */ jsx3("p", { style: { marginTop: "auto", paddingTop: 28, textAlign: "center", fontSize: 12, lineHeight: "17px", fontStyle: "italic", color: "#b8b8b8" }, children: "Powered by BestTrack" })
1330
1377
  ] }) });
@@ -1354,7 +1401,7 @@ function ReadyToGoRecommendationsEditor(block) {
1354
1401
  href: product.handle ? `/products/${product.handle}` : void 0
1355
1402
  }));
1356
1403
  const items = selected.length ? selected : previewReadyToGoTracking().recommendations ?? [];
1357
- return /* @__PURE__ */ jsx3("section", { "aria-label": "Ready-to-go recommendations editor", style: { ...pageFont, background: "var(--pb-color-background, #fff)", color: "var(--pb-color-text, #0f172a)" }, children: /* @__PURE__ */ jsxs3("div", { style: { ...contentWidth, padding: "48px 24px" }, children: [
1404
+ return /* @__PURE__ */ jsx3("section", { "aria-label": "Ready-to-go recommendations editor", style: { ...pageFont, background: "var(--pb-color-background, #fff)", color: "var(--pb-color-text, #0f172a)" }, children: /* @__PURE__ */ jsxs3("div", { style: contentWidth, children: [
1358
1405
  /* @__PURE__ */ jsx3("h3", { style: { margin: 0, textAlign: "center", fontSize: 20, lineHeight: "20px", fontWeight: 700 }, children: /* @__PURE__ */ jsx3(InlineText, { block, name: "heading", fallback: "You may also like..." }) }),
1359
1406
  /* @__PURE__ */ jsx3("div", { style: { marginTop: 24 }, children: /* @__PURE__ */ jsx3(RecommendationCards, { items }) })
1360
1407
  ] }) });
@@ -1398,7 +1445,7 @@ function ReadyToGoQueryBlock(props) {
1398
1445
  };
1399
1446
  const loading = runtime.phase === "loading";
1400
1447
  return /* @__PURE__ */ jsx3("section", { style: heroStyle, children: /* @__PURE__ */ jsxs3("div", { role: "region", "aria-label": "Ready-to-go tracking query", style: formCardStyle, children: [
1401
- heading ? /* @__PURE__ */ jsx3("h1", { style: { margin: "0 0 24px", textAlign: "center", fontSize: 28, lineHeight: 1.15 }, children: heading }) : null,
1448
+ heading ? /* @__PURE__ */ jsx3("h1", { style: { margin: "0 0 24px", textAlign: "center", fontSize: 28, lineHeight: 1.15, overflowWrap: "anywhere" }, children: heading }) : null,
1402
1449
  /* @__PURE__ */ jsxs3("div", { role: "tablist", "aria-label": "Tracking method", style: { display: "flex", width: "100%", borderBottom: "1px solid #cbd5e1" }, children: [
1403
1450
  /* @__PURE__ */ jsx3("button", { type: "button", role: "tab", "aria-selected": mode === "tracking", onClick: () => {
1404
1451
  setMode("tracking");
@@ -1420,7 +1467,7 @@ function ReadyToGoQueryBlock(props) {
1420
1467
  /* @__PURE__ */ jsx3("input", { id: "ready-to-go-tracking-number", "aria-label": "Tracking number", value: trackingNumber, onChange: (event) => setTrackingNumber(event.target.value), placeholder: "Tracking Number", style: inputStyle })
1421
1468
  ] }),
1422
1469
  localError ? /* @__PURE__ */ jsx3("p", { style: { margin: 0, textAlign: "center", fontSize: 12, color: "#f43f5e" }, children: localError }) : null,
1423
- /* @__PURE__ */ jsx3("button", { type: "submit", disabled: loading, style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", minHeight: 58, marginTop: 8, border: 0, borderRadius: "var(--pb-radius, 8px)", background: loading ? "#475569" : "var(--pb-color-primary, #111)", color: "#fff", font: "inherit", fontSize: 15, fontWeight: 600, cursor: loading ? "wait" : "pointer", opacity: loading ? 0.7 : 1 }, children: loading ? "Tracking..." : submitLabel }),
1470
+ /* @__PURE__ */ jsx3("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: loading ? "Tracking..." : submitLabel }),
1424
1471
  runtime.phase === "error" ? /* @__PURE__ */ jsx3("p", { role: "alert", style: { margin: 0, textAlign: "center", fontSize: 12, color: "#f43f5e" }, children: runtime.error }) : null
1425
1472
  ] }),
1426
1473
  /* @__PURE__ */ jsx3(RuntimeWatermark, { watermark: runtime.watermark })
@@ -1457,7 +1504,7 @@ function ReadyToGoRecommendationsBlock(props) {
1457
1504
  const runtime = useReadyToGoRuntime();
1458
1505
  const heading = text(props, "heading", "You may also like...");
1459
1506
  if (runtime.recommendations.phase !== "success" || runtime.recommendations.items.length === 0) return null;
1460
- return /* @__PURE__ */ jsx3(SectionShell, { title: heading, bordered: false, children: /* @__PURE__ */ jsxs3("div", { style: { ...contentWidth, padding: "48px 24px" }, children: [
1507
+ return /* @__PURE__ */ jsx3(SectionShell, { title: heading, bordered: false, children: /* @__PURE__ */ jsxs3("div", { style: contentWidth, children: [
1461
1508
  /* @__PURE__ */ jsx3("h3", { style: { margin: 0, textAlign: "center", fontSize: 20, lineHeight: "20px", fontWeight: 700 }, children: heading }),
1462
1509
  /* @__PURE__ */ jsx3("div", { style: { marginTop: 24 }, children: /* @__PURE__ */ jsx3(RecommendationCards, { items: runtime.recommendations.items }) })
1463
1510
  ] }) });
@@ -1492,6 +1539,7 @@ var readyToGoBlocks = withTemplatePolicy([
1492
1539
  defaultProps: {
1493
1540
  heading: "Track your order",
1494
1541
  submitLabel: "Track Your Order",
1542
+ submitButtonColor: "#111111",
1495
1543
  defaultTrackingNumber: "BT-2048-DEMO",
1496
1544
  defaultOrderNumber: "",
1497
1545
  defaultQueryMode: "tracking",
@@ -1503,6 +1551,7 @@ var readyToGoBlocks = withTemplatePolicy([
1503
1551
  fields: {
1504
1552
  heading: text2("Heading"),
1505
1553
  submitLabel: text2("Button label"),
1554
+ submitButtonColor: { field: "besttrack.ready-to-go.text", label: "Button color", control: "color", group: "Style" },
1506
1555
  defaultTrackingNumber: text2("Default tracking number"),
1507
1556
  defaultOrderNumber: text2("Default order number"),
1508
1557
  defaultQueryMode: text2("Default query mode"),
@@ -6,6 +6,7 @@ import {
6
6
 
7
7
  // src/validation.ts
8
8
  var textField = { field: "besttrack.validation.text", control: "text" };
9
+ var colorField = { field: "besttrack.validation.color", control: "color" };
9
10
  var productsField = { field: "besttrack.validation.products", control: "products" };
10
11
  var strictUrlField = {
11
12
  field: "besttrack.validation.url",
@@ -13,7 +14,7 @@ var strictUrlField = {
13
14
  validation: { allowRelativeUrl: false, allowedUrlProtocols: ["https:"], allowLocalhost: true }
14
15
  };
15
16
  function fields(keys, urlKeys = [], resourceKeys = [], productsKeys = []) {
16
- return Object.fromEntries(keys.map((key) => [key, productsKeys.includes(key) ? productsField : resourceKeys.includes(key) ? { field: "besttrack.validation.resource" } : urlKeys.includes(key) ? strictUrlField : textField]));
17
+ return Object.fromEntries(keys.map((key) => [key, productsKeys.includes(key) ? productsField : resourceKeys.includes(key) ? { field: "besttrack.validation.resource" } : urlKeys.includes(key) ? strictUrlField : /color$/i.test(key) ? colorField : textField]));
17
18
  }
18
19
  function block(type, version, keys, variants, validate, urlKeys = [], resourceKeys = [], productsKeys = []) {
19
20
  return {
@@ -67,7 +68,7 @@ function validateFeaturedProduct(props) {
67
68
  return issues;
68
69
  }
69
70
  var readyToGoContracts = [
70
- block("besttrack.ready-to-go.query", 1, ["heading", "submitLabel", "defaultTrackingNumber", "defaultOrderNumber", "defaultQueryMode", "trackingTabLabel", "orderTabLabel"], ["default"]),
71
+ block("besttrack.ready-to-go.query", 1, ["heading", "submitLabel", "submitButtonColor", "defaultTrackingNumber", "defaultOrderNumber", "defaultQueryMode", "trackingTabLabel", "orderTabLabel"], ["default"]),
71
72
  block("besttrack.ready-to-go.progress", 1, [], ["default"]),
72
73
  block("besttrack.ready-to-go.delivery", 1, ["heading", "contentsHeading", "carrierHeading"], ["default", "compact"]),
73
74
  block("besttrack.ready-to-go.recommendations", 1, ["heading", "products"], ["default", "grid"], void 0, [], [], ["products"])
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@standhigher/besttrack-page-extension",
3
- "version": "0.5.1",
3
+ "version": "0.5.2",
4
4
  "description": "BestTrack business extension entry point for @standhigher/puck-page-builder.",
5
5
  "type": "module",
6
6
  "files": [
@@ -22,7 +22,7 @@
22
22
  "dependencies": {
23
23
  "embla-carousel-autoplay": "^8.6.0",
24
24
  "embla-carousel-react": "^8.6.0",
25
- "@standhigher/puck-page-builder": "0.12.1"
25
+ "@standhigher/puck-page-builder": "0.12.2"
26
26
  },
27
27
  "devDependencies": {
28
28
  "tsup": "^8.5.1",