@standhigher/besttrack-page-extension 0.1.0 → 0.2.0

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.
Files changed (3) hide show
  1. package/dist/index.d.ts +47 -13
  2. package/dist/index.js +335 -102
  3. package/package.json +2 -2
package/dist/index.d.ts CHANGED
@@ -2,6 +2,47 @@ import * as react from 'react';
2
2
  import { ReactNode } from 'react';
3
3
  import { PageBuilderExtension, TemplateDefinition } from '@standhigher/puck-page-builder/runtime';
4
4
 
5
+ type ReadyToGoOrderItem = {
6
+ id: string;
7
+ title: string;
8
+ quantity: number;
9
+ imageUrl?: string;
10
+ description?: string;
11
+ };
12
+ type ReadyToGoRecommendation = {
13
+ id: string;
14
+ title: string;
15
+ description: string;
16
+ imageUrl?: string;
17
+ href?: string;
18
+ price?: string;
19
+ };
20
+ type ReadyToGoTrackingStep = {
21
+ id: string;
22
+ label: string;
23
+ state: "complete" | "current" | "upcoming";
24
+ };
25
+ type ReadyToGoTrackingEvent = {
26
+ id: string;
27
+ title: string;
28
+ at?: string;
29
+ detail?: string;
30
+ state?: "complete" | "current" | "upcoming";
31
+ };
32
+ type ReadyToGoShipment = {
33
+ id: string;
34
+ label: string;
35
+ trackingNumber?: string;
36
+ status?: string;
37
+ carrier?: string;
38
+ latestEvent?: string;
39
+ updatedAt?: string;
40
+ deliveryAddress?: string;
41
+ progress?: ReadyToGoTrackingStep[];
42
+ events?: ReadyToGoTrackingEvent[];
43
+ orderItems?: ReadyToGoOrderItem[];
44
+ recommendations?: ReadyToGoRecommendation[];
45
+ };
5
46
  type ReadyToGoTrackingResult = {
6
47
  trackingNumber: string;
7
48
  status: string;
@@ -9,17 +50,11 @@ type ReadyToGoTrackingResult = {
9
50
  latestEvent?: string;
10
51
  updatedAt?: string;
11
52
  deliveryAddress?: string;
12
- orderItems?: Array<{
13
- id: string;
14
- title: string;
15
- quantity: number;
16
- imageUrl?: string;
17
- }>;
18
- recommendations?: Array<{
19
- id: string;
20
- title: string;
21
- description: string;
22
- }>;
53
+ progress?: ReadyToGoTrackingStep[];
54
+ events?: ReadyToGoTrackingEvent[];
55
+ orderItems?: ReadyToGoOrderItem[];
56
+ recommendations?: ReadyToGoRecommendation[];
57
+ shipments?: ReadyToGoShipment[];
23
58
  };
24
59
  type ReadyToGoTrackingQuery = (trackingNumber: string) => Promise<ReadyToGoTrackingResult>;
25
60
  type ReadyToGoRuntimeState = {
@@ -48,7 +83,6 @@ type BrandedRuntimeProviderProps = {
48
83
  children: ReactNode;
49
84
  queryTracking: ReadyToGoTrackingQuery;
50
85
  };
51
- /** Keeps one standard tracking result available to every Branded result block. */
52
86
  declare function BrandedRuntimeProvider({ children, queryTracking }: BrandedRuntimeProviderProps): react.JSX.Element;
53
87
 
54
88
  declare function createSalesTemplate(): TemplateDefinition;
@@ -67,4 +101,4 @@ type SalesRuntimeProviderProps = {
67
101
  /** The host injects a validated query; Sales never calls a DataSource itself. */
68
102
  declare function SalesRuntimeProvider({ children, queryTracking }: SalesRuntimeProviderProps): react.JSX.Element;
69
103
 
70
- export { BrandedRuntimeProvider, type BrandedRuntimeProviderProps, type BrandedRuntimeState, ReadyToGoRuntimeProvider, type ReadyToGoRuntimeProviderProps, type ReadyToGoRuntimeState, type ReadyToGoTrackingQuery, type ReadyToGoTrackingResult, SalesRuntimeProvider, type SalesRuntimeProviderProps, type SalesRuntimeState, bestTrackBrandedExtension, bestTrackPageExtension, bestTrackSalesExtension, createBrandedTemplate, createReadyToGoTemplate, createSalesTemplate };
104
+ export { BrandedRuntimeProvider, type BrandedRuntimeProviderProps, type BrandedRuntimeState, ReadyToGoRuntimeProvider, type ReadyToGoRuntimeProviderProps, type ReadyToGoRuntimeState, type ReadyToGoShipment, type ReadyToGoTrackingEvent, type ReadyToGoTrackingQuery, type ReadyToGoTrackingResult, type ReadyToGoTrackingStep, SalesRuntimeProvider, type SalesRuntimeProviderProps, type SalesRuntimeState, bestTrackBrandedExtension, bestTrackPageExtension, bestTrackSalesExtension, createBrandedTemplate, createReadyToGoTemplate, createSalesTemplate };
package/dist/index.js CHANGED
@@ -93,11 +93,12 @@ function ReadyToGoRecommendationsBlock(props) {
93
93
 
94
94
  // src/ready-to-go-definition.ts
95
95
  import { createPageDocument } from "@standhigher/puck-page-builder/runtime";
96
+ var text = (label, options = {}) => ({ field: "besttrack.ready-to-go.text", label, control: "text", ...options });
96
97
  var readyToGoBlocks = [
97
- { type: "besttrack.ready-to-go.query", version: 1, label: "Order query", category: "BestTrack Ready-to-go", targets: ["web"], defaultProps: { heading: "Track your order", submitLabel: "Track package", defaultTrackingNumber: "BT-2048-DEMO" }, defaultVariant: "default", variants: [{ id: "default", label: "Default" }], fields: { heading: { field: "besttrack.ready-to-go.text", label: "Heading" }, submitLabel: { field: "besttrack.ready-to-go.text", label: "Button label" }, defaultTrackingNumber: { field: "besttrack.ready-to-go.text", label: "Default tracking number" } }, render: { web: ReadyToGoQueryBlock } },
98
- { type: "besttrack.ready-to-go.progress", version: 1, label: "Shipment progress", category: "BestTrack Ready-to-go", targets: ["web"], defaultProps: { heading: "Shipment progress" }, defaultVariant: "default", variants: [{ id: "default", label: "Default" }], fields: { heading: { field: "besttrack.ready-to-go.text", label: "Heading" } }, render: { web: ReadyToGoProgressBlock } },
99
- { type: "besttrack.ready-to-go.delivery", version: 1, label: "Delivery information", category: "BestTrack Ready-to-go", targets: ["web"], defaultProps: { heading: "Delivery information" }, defaultVariant: "default", variants: [{ id: "default", label: "Default" }], fields: { heading: { field: "besttrack.ready-to-go.text", label: "Heading" } }, render: { web: ReadyToGoDeliveryBlock } },
100
- { type: "besttrack.ready-to-go.recommendations", version: 1, label: "Recommended products", category: "BestTrack Ready-to-go", targets: ["web"], defaultProps: { heading: "You may also like" }, defaultVariant: "default", variants: [{ id: "default", label: "Default" }], fields: { heading: { field: "besttrack.ready-to-go.text", label: "Heading" } }, render: { web: ReadyToGoRecommendationsBlock } }
98
+ { type: "besttrack.ready-to-go.query", version: 1, label: "Order query", category: "BestTrack Ready-to-go", targets: ["web"], defaultProps: { heading: "Track your order", submitLabel: "Track package", defaultTrackingNumber: "BT-2048-DEMO" }, defaultVariant: "default", variants: [{ id: "default", label: "Default" }], fields: { heading: text("Heading"), submitLabel: text("Button label"), defaultTrackingNumber: text("Default tracking number") }, render: { web: ReadyToGoQueryBlock } },
99
+ { type: "besttrack.ready-to-go.progress", version: 1, label: "Shipment progress", category: "BestTrack Ready-to-go", targets: ["web"], defaultProps: { heading: "Shipment progress" }, defaultVariant: "default", variants: [{ id: "default", label: "Default" }], fields: { heading: text("Heading") }, render: { web: ReadyToGoProgressBlock } },
100
+ { type: "besttrack.ready-to-go.delivery", version: 1, label: "Delivery information", category: "BestTrack Ready-to-go", targets: ["web"], defaultProps: { heading: "Delivery information" }, defaultVariant: "default", variants: [{ id: "default", label: "Default" }], fields: { heading: text("Heading") }, render: { web: ReadyToGoDeliveryBlock } },
101
+ { type: "besttrack.ready-to-go.recommendations", version: 1, label: "Recommended products", category: "BestTrack Ready-to-go", targets: ["web"], defaultProps: { heading: "You may also like" }, defaultVariant: "default", variants: [{ id: "default", label: "Default" }], fields: { heading: text("Heading") }, render: { web: ReadyToGoRecommendationsBlock } }
101
102
  ];
102
103
  function createReadyToGoTemplate() {
103
104
  return { id: "besttrack.ready-to-go", version: 1, name: "Ready-to-go", target: "web", source: "built-in", requiredBlocks: readyToGoBlocks.map((block) => block.type), theme: { "color.primary": "#005bd3", "color.background": "#f6f6f7", radius: "12px", spacing: "20px" }, create: () => createPageDocument({ pageId: "besttrack-ready-to-go", target: "web", templateId: "besttrack.ready-to-go", templateVersion: 1, settings: { locale: "en", seoTitle: "Track your order" }, blocks: readyToGoBlocks.map((block, index) => ({ id: `ready-to-go-${index + 1}`, type: block.type, version: block.version, props: block.defaultProps, variant: block.defaultVariant, style: {} })) }) };
@@ -110,31 +111,57 @@ import { createPageDocument as createPageDocument2 } from "@standhigher/puck-pag
110
111
  // src/branded.tsx
111
112
  import { createContext as createContext2, useCallback as useCallback2, useContext as useContext2, useMemo as useMemo2, useState as useState2 } from "react";
112
113
  import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
113
- var cardStyle2 = { border: "1px solid var(--pb-color-border)", borderRadius: "var(--pb-radius)", padding: "var(--pb-spacing)", background: "var(--pb-color-surface)", color: "var(--pb-color-text)", fontFamily: "var(--pb-font-family)" };
114
- var gridStyle = { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: "var(--pb-spacing)" };
115
- var initialRuntime2 = { phase: "idle", async query() {
116
- return void 0;
117
- } };
114
+ var initialRuntime2 = {
115
+ phase: "idle",
116
+ selectedShipmentId: null,
117
+ async query() {
118
+ return void 0;
119
+ },
120
+ reset() {
121
+ return void 0;
122
+ },
123
+ selectShipment() {
124
+ return void 0;
125
+ }
126
+ };
118
127
  var BrandedRuntimeContext = createContext2(initialRuntime2);
128
+ var contentWidth = { width: "min(1200px, 100%)", margin: "0 auto", padding: "0 clamp(16px, 4vw, 48px)", boxSizing: "border-box" };
129
+ var cardStyle2 = { background: "#fff", color: "#0a0a0a", border: "1px solid #e7e7e7", borderRadius: 10, fontFamily: "var(--pb-font-family)" };
119
130
  function BrandedRuntimeProvider({ children, queryTracking }) {
120
131
  const [state, setState] = useState2({ phase: "idle" });
132
+ const [selectedShipmentId, setSelectedShipmentId] = useState2(null);
121
133
  const query = useCallback2(async (trackingNumber) => {
122
134
  setState({ phase: "loading" });
123
135
  try {
124
- setState({ phase: "success", result: await queryTracking(trackingNumber) });
136
+ const result = await queryTracking(trackingNumber);
137
+ setSelectedShipmentId(result.shipments?.[0]?.id ?? null);
138
+ setState({ phase: "success", result });
125
139
  } catch (error) {
126
140
  setState({ phase: "error", error: error instanceof Error ? error.message : "tracking-query-failed" });
127
141
  }
128
142
  }, [queryTracking]);
129
- const value = useMemo2(() => ({ ...state, query }), [query, state]);
143
+ const reset = useCallback2(() => {
144
+ setSelectedShipmentId(null);
145
+ setState({ phase: "idle" });
146
+ }, []);
147
+ const displayedResult = useMemo2(() => {
148
+ if (!state.result) return void 0;
149
+ const shipment = state.result.shipments?.find((item) => item.id === selectedShipmentId);
150
+ return shipment ? { ...state.result, ...shipment } : state.result;
151
+ }, [selectedShipmentId, state.result]);
152
+ const selectShipment = useCallback2((id) => setSelectedShipmentId(id), []);
153
+ const value = useMemo2(
154
+ () => ({ ...state, displayedResult, selectedShipmentId, query, reset, selectShipment }),
155
+ [displayedResult, query, reset, selectedShipmentId, selectShipment, state]
156
+ );
130
157
  return /* @__PURE__ */ jsx2(BrandedRuntimeContext.Provider, { value, children });
131
158
  }
132
- function text(props, key, fallback) {
133
- return typeof props[key] === "string" ? props[key] : fallback;
134
- }
135
159
  function useBrandedRuntime() {
136
160
  return useContext2(BrandedRuntimeContext);
137
161
  }
162
+ function text2(props, key, fallback) {
163
+ return typeof props[key] === "string" ? props[key] : fallback;
164
+ }
138
165
  function safeHref(value) {
139
166
  if (typeof value !== "string") return "#";
140
167
  if (value.startsWith("/")) return value;
@@ -145,89 +172,295 @@ function safeHref(value) {
145
172
  return "#";
146
173
  }
147
174
  }
148
- function Section({ title, children }) {
149
- return /* @__PURE__ */ jsxs2("section", { "aria-label": title, style: cardStyle2, children: [
150
- /* @__PURE__ */ jsx2("h2", { style: { marginTop: 0 }, children: title }),
151
- children
152
- ] });
175
+ function safeImageUrl(value) {
176
+ if (typeof value !== "string") return "";
177
+ try {
178
+ const url = new URL(value);
179
+ return url.protocol === "https:" || url.protocol === "http:" ? url.toString() : "";
180
+ } catch {
181
+ return "";
182
+ }
153
183
  }
154
- function BrandedTextField({ value, onChange }) {
155
- return /* @__PURE__ */ jsx2("input", { "aria-label": "Branded text", value: typeof value === "string" ? value : "", onChange: (event) => onChange(event.target.value) });
184
+ function shipmentLabels(value) {
185
+ return typeof value === "string" ? value.split("|").map((label, index) => ({ id: "configured-" + index, label: label.trim() })).filter((item) => item.label) : [];
156
186
  }
157
- function BrandedAnnouncementBlock(props) {
158
- const logoUrl = text(props, "logoUrl", "");
159
- return /* @__PURE__ */ jsxs2("section", { "aria-label": "Branded announcement", style: { ...cardStyle2, display: "flex", alignItems: "center", gap: 12, background: "var(--pb-color-primary)", color: "white" }, children: [
160
- logoUrl ? /* @__PURE__ */ jsx2("img", { src: logoUrl, alt: text(props, "brandName", "Brand"), style: { width: 36, height: 36, borderRadius: "50%", objectFit: "cover", background: "white" } }) : null,
161
- /* @__PURE__ */ jsxs2("div", { children: [
162
- /* @__PURE__ */ jsx2("strong", { children: text(props, "brandName", "BestTrack") }),
163
- /* @__PURE__ */ jsx2("p", { style: { margin: "4px 0 0" }, children: text(props, "message", "Track every order with confidence.") })
164
- ] })
165
- ] });
187
+ function ProductImage({ src, alt }) {
188
+ const [failed, setFailed] = useState2(false);
189
+ const safeSrc = safeImageUrl(src);
190
+ if (!safeSrc || failed) {
191
+ return /* @__PURE__ */ jsx2("span", { "aria-label": alt + " image unavailable", style: { display: "grid", placeItems: "center", width: 72, height: 72, flex: "0 0 auto", borderRadius: 6, background: "#f2f2f2", color: "#6b6b6b", fontSize: 14 }, children: alt.slice(0, 1).toUpperCase() });
192
+ }
193
+ return /* @__PURE__ */ jsx2("img", { src: safeSrc, alt, onError: () => setFailed(true), style: { width: 72, height: 72, flex: "0 0 auto", borderRadius: 6, objectFit: "cover", background: "#f2f2f2" } });
166
194
  }
167
- function BrandedQueryBlock(props) {
195
+ function ShipmentSwitcher({ shipmentLabels: configuredLabels }) {
196
+ const runtime = useBrandedRuntime();
197
+ const configuredShipments = shipmentLabels(configuredLabels);
198
+ const shipments = runtime.result?.shipments?.length ? runtime.result.shipments : configuredShipments;
199
+ if (!shipments.length) return null;
200
+ return /* @__PURE__ */ jsx2("div", { "aria-label": "Shipment switcher", style: { ...contentWidth, minHeight: 56, display: "flex", alignItems: "center", gap: 8, overflowX: "auto", whiteSpace: "nowrap" }, children: shipments.map((shipment, index) => {
201
+ const selected = (runtime.selectedShipmentId ?? shipments[0]?.id) === shipment.id;
202
+ return /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => runtime.selectShipment(shipment.id), "aria-pressed": selected, style: { minWidth: 92, minHeight: 36, padding: "0 12px", border: selected ? "1px solid #1a1a1a" : "1px solid #e7e7e7", borderRadius: 4, background: "#fff", color: "#0a0a0a", fontSize: 11, fontWeight: selected ? 700 : 400, cursor: "pointer" }, children: shipment.label || "Shipment #" + (index + 1) }, shipment.id);
203
+ }) });
204
+ }
205
+ function QueryHero(props) {
168
206
  const runtime = useBrandedRuntime();
169
- const [trackingNumber, setTrackingNumber] = useState2(text(props, "defaultTrackingNumber", "BT-2048-DEMO"));
207
+ const [trackingNumber, setTrackingNumber] = useState2(text2(props, "defaultTrackingNumber", "DEMO-YQTRACK9999"));
208
+ const [mode, setMode] = useState2(text2(props, "defaultQueryMode", "tracking") === "order" ? "order" : "tracking");
209
+ const [heroImageFailed, setHeroImageFailed] = useState2(false);
170
210
  const submit = (event) => {
171
211
  event.preventDefault();
172
212
  void runtime.query(trackingNumber);
173
213
  };
174
- return /* @__PURE__ */ jsxs2("section", { "aria-label": "Branded tracking query", style: { ...cardStyle2, boxShadow: "0 16px 40px rgb(0 0 0 / 8%)" }, children: [
175
- /* @__PURE__ */ jsx2("p", { style: { margin: 0, color: "var(--pb-color-muted)" }, children: text(props, "eyebrow", "ORDER SUPPORT") }),
176
- /* @__PURE__ */ jsx2("h1", { style: { margin: "6px 0 16px" }, children: text(props, "heading", "Where is my order?") }),
177
- /* @__PURE__ */ jsxs2("form", { onSubmit: submit, style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
178
- /* @__PURE__ */ jsx2("input", { "aria-label": "Branded tracking number", value: trackingNumber, onChange: (event) => setTrackingNumber(event.target.value), required: true, minLength: 4, maxLength: 64, style: { flex: "1 1 220px", padding: 12, borderRadius: "var(--pb-radius)", border: "1px solid var(--pb-color-border)" } }),
179
- /* @__PURE__ */ jsx2("button", { type: "submit", disabled: runtime.phase === "loading", style: { padding: "12px 18px", border: 0, borderRadius: "var(--pb-radius)", background: "var(--pb-color-primary)", color: "white" }, children: runtime.phase === "loading" ? "Looking up\u2026" : text(props, "submitLabel", "Find my order") })
214
+ return /* @__PURE__ */ jsxs2("div", { style: { position: "relative", minHeight: "clamp(520px, 44vw, 560px)", display: "grid", placeItems: "center", overflow: "hidden", background: "linear-gradient(135deg, #dedbd4, #b9b3aa)" }, children: [
215
+ !heroImageFailed && safeImageUrl(props.heroImageUrl) ? /* @__PURE__ */ jsx2("img", { src: safeImageUrl(props.heroImageUrl), alt: "", onError: () => setHeroImageFailed(true), style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" } }) : null,
216
+ /* @__PURE__ */ jsx2("div", { "aria-hidden": "true", style: { position: "absolute", inset: 0, background: "rgba(255,255,255,0.12)" } }),
217
+ /* @__PURE__ */ jsxs2("div", { style: { ...cardStyle2, position: "relative", zIndex: 1, width: "min(560px, calc(100% - 32px))", padding: "clamp(24px, 5vw, 48px)", boxSizing: "border-box", boxShadow: "0 16px 40px rgb(0 0 0 / 8%)" }, children: [
218
+ /* @__PURE__ */ jsx2("h1", { style: { margin: "0 0 36px", textAlign: "center", fontSize: "clamp(28px, 3vw, 32px)", lineHeight: 1.15 }, children: text2(props, "heading", "Track your order") }),
219
+ /* @__PURE__ */ jsxs2("div", { role: "tablist", "aria-label": "Tracking method", style: { display: "grid", gridTemplateColumns: "1fr 1fr", borderBottom: "1px solid #e7e7e7", marginBottom: 24 }, children: [
220
+ /* @__PURE__ */ jsx2("button", { type: "button", role: "tab", "aria-selected": mode === "order", onClick: () => setMode("order"), style: { minHeight: 40, border: 0, borderBottom: mode === "order" ? "2px solid #0a0a0a" : "2px solid transparent", background: "transparent", fontWeight: mode === "order" ? 700 : 400, cursor: "pointer" }, children: "Order Number" }),
221
+ /* @__PURE__ */ jsx2("button", { type: "button", role: "tab", "aria-selected": mode === "tracking", onClick: () => setMode("tracking"), style: { minHeight: 40, border: 0, borderBottom: mode === "tracking" ? "2px solid #0a0a0a" : "2px solid transparent", background: "transparent", fontWeight: mode === "tracking" ? 700 : 400, cursor: "pointer" }, children: "Tracking Number" })
222
+ ] }),
223
+ /* @__PURE__ */ jsxs2("form", { onSubmit: submit, children: [
224
+ /* @__PURE__ */ jsx2("label", { htmlFor: "branded-tracking-number", style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clipPath: "inset(50%)" }, children: mode === "order" ? "Order number" : "Tracking number" }),
225
+ /* @__PURE__ */ jsx2("input", { id: "branded-tracking-number", "aria-label": mode === "order" ? "Order number" : "Tracking number", value: trackingNumber, onChange: (event) => setTrackingNumber(event.target.value), required: true, minLength: 4, maxLength: 64, placeholder: mode === "order" ? "Enter your order number" : "Enter your tracking number", style: { width: "100%", height: 48, padding: "0 16px", boxSizing: "border-box", border: "1px solid #e2e2e2", borderRadius: 10, font: "inherit" } }),
226
+ /* @__PURE__ */ jsx2("button", { type: "submit", disabled: runtime.phase === "loading", style: { width: "100%", minHeight: 48, marginTop: 24, border: 0, borderRadius: 10, background: runtime.phase === "loading" ? "#6b6b6b" : "#000", color: "#fff", font: "inherit", cursor: runtime.phase === "loading" ? "wait" : "pointer" }, children: runtime.phase === "loading" ? "Tracking\u2026" : text2(props, "submitLabel", "Track") })
227
+ ] }),
228
+ runtime.phase === "error" ? /* @__PURE__ */ jsx2("p", { role: "alert", style: { marginBottom: 0, color: "#b42318" }, children: runtime.error }) : null,
229
+ /* @__PURE__ */ jsx2("small", { style: { display: "block", marginTop: 10, color: "#8a8a8a", fontSize: 8, textAlign: "right" }, children: "Powered by BestTrack" })
230
+ ] })
231
+ ] });
232
+ }
233
+ function defaultProgress(status) {
234
+ const steps = ["Ordered", "Order Ready", "In Transit", "Out for Delivery", "Delivered"];
235
+ const normalized = status.toLowerCase();
236
+ const current = normalized.includes("deliver") ? normalized.includes("out for") ? 3 : 4 : normalized.includes("transit") ? 2 : normalized.includes("ready") ? 1 : 0;
237
+ return steps.map((label, index) => ({ id: label.toLowerCase().replaceAll(" ", "-"), label, state: index < current ? "complete" : index === current ? "current" : "upcoming" }));
238
+ }
239
+ function TrackingProgress({ steps }) {
240
+ return /* @__PURE__ */ jsx2("div", { "aria-label": "Delivery progress", style: { overflowX: "auto", padding: "28px 0 8px" }, children: /* @__PURE__ */ jsx2("ol", { style: { display: "grid", gridTemplateColumns: "repeat(" + steps.length + ", minmax(112px, 1fr))", minWidth: Math.max(560, steps.length * 138), padding: 0, margin: 0, listStyle: "none" }, children: steps.map((step, index) => /* @__PURE__ */ jsxs2("li", { style: { position: "relative", display: "grid", justifyItems: "center", gap: 12, color: step.state === "upcoming" ? "#718096" : "#0f1d3a", textAlign: "center" }, children: [
241
+ index > 0 ? /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", style: { position: "absolute", top: 19, right: "50%", width: "100%", height: 8, transform: "translateX(-50%)", background: step.state === "upcoming" ? "#d1d5db" : "#0f1d3a" } }) : null,
242
+ /* @__PURE__ */ jsx2("span", { "aria-label": step.label + " " + step.state, style: { position: "relative", zIndex: 1, display: "grid", placeItems: "center", width: 40, height: 40, border: step.state === "current" ? "1px solid #0f1d3a" : "1px solid #8190a4", borderRadius: "50%", background: step.state === "complete" ? "#0f1d3a" : "#fff", color: step.state === "complete" ? "#fff" : "#0f1d3a", fontWeight: 700 }, children: step.state === "complete" ? "\u2713" : index + 1 }),
243
+ /* @__PURE__ */ jsx2("strong", { style: { fontSize: 14 }, children: step.label })
244
+ ] }, step.id)) }) });
245
+ }
246
+ function ShippingTimeline({ events }) {
247
+ if (!events.length) return /* @__PURE__ */ jsx2("p", { style: { margin: 0, color: "#6b6b6b" }, children: "Shipping events will appear when the carrier publishes them." });
248
+ return /* @__PURE__ */ jsx2("ol", { "aria-label": "Shipping events", style: { display: "grid", gap: 22, margin: 0, padding: 0, listStyle: "none" }, children: events.map((event, index) => /* @__PURE__ */ jsxs2("li", { style: { display: "grid", gridTemplateColumns: "22px 1fr", columnGap: 14, position: "relative" }, children: [
249
+ /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", style: { position: "relative", zIndex: 1, width: 14, height: 14, marginTop: 4, borderRadius: "50%", background: event.state === "current" || index === 0 ? "#42b765" : "#d5dfed" } }),
250
+ index < events.length - 1 ? /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", style: { position: "absolute", left: 6, top: 18, bottom: -26, width: 2, background: "#e0e7f0" } }) : null,
251
+ /* @__PURE__ */ jsxs2("div", { children: [
252
+ /* @__PURE__ */ jsx2("strong", { style: { color: index === 0 ? "#cb4d34" : "#51657f" }, children: event.title }),
253
+ event.detail ? /* @__PURE__ */ jsx2("p", { style: { margin: "4px 0", color: "#6b6b6b" }, children: event.detail }) : null,
254
+ event.at ? /* @__PURE__ */ jsx2("small", { style: { color: "#8a9ab0" }, children: event.at }) : null
255
+ ] })
256
+ ] }, event.id)) });
257
+ }
258
+ function PackageContents({ items }) {
259
+ if (!items?.length) return /* @__PURE__ */ jsx2("p", { style: { margin: 0, color: "#6b6b6b" }, children: "Package contents are not available for this shipment." });
260
+ return /* @__PURE__ */ jsx2("div", { style: { display: "grid", gap: 16 }, children: items.map((item) => /* @__PURE__ */ jsxs2("article", { style: { display: "flex", alignItems: "flex-start", gap: 14 }, children: [
261
+ /* @__PURE__ */ jsx2(ProductImage, { src: item.imageUrl, alt: item.title }),
262
+ /* @__PURE__ */ jsxs2("div", { children: [
263
+ /* @__PURE__ */ jsx2("strong", { children: item.title }),
264
+ /* @__PURE__ */ jsx2("p", { style: { margin: "5px 0", color: "#6b6b6b", fontSize: 14 }, children: item.description ?? "Product details are available in your order." }),
265
+ /* @__PURE__ */ jsxs2("small", { style: { color: "#6b6b6b" }, children: [
266
+ "Qty ",
267
+ item.quantity
268
+ ] })
269
+ ] })
270
+ ] }, item.id)) });
271
+ }
272
+ function TrackingResult({ props }) {
273
+ const runtime = useBrandedRuntime();
274
+ const result = runtime.displayedResult;
275
+ if (!result) return null;
276
+ const progress = result.progress?.length ? result.progress : defaultProgress(result.status);
277
+ const events = result.events?.length ? result.events : result.latestEvent ? [{ id: "latest", title: result.latestEvent, at: result.updatedAt, state: "current" }] : [];
278
+ return /* @__PURE__ */ jsxs2("section", { "aria-label": "Tracking result", style: { background: "#fff", borderTop: "1px solid #edf0f4", color: "#101828", fontFamily: "var(--pb-font-family)", padding: "clamp(36px, 6vw, 64px) 0" }, children: [
279
+ /* @__PURE__ */ jsxs2("div", { style: contentWidth, children: [
280
+ /* @__PURE__ */ jsxs2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 16, flexWrap: "wrap", textAlign: "center" }, children: [
281
+ /* @__PURE__ */ jsxs2("p", { style: { flex: "1 1 360px", margin: 0, fontSize: "clamp(18px, 2vw, 28px)" }, children: [
282
+ "Tracking: ",
283
+ result.trackingNumber
284
+ ] }),
285
+ /* @__PURE__ */ jsx2("button", { type: "button", onClick: runtime.reset, style: { padding: "8px 12px", border: "1px solid #cbd5e1", borderRadius: 6, background: "#fff", color: "#101828", font: "inherit", cursor: "pointer" }, children: text2(props, "trackAnotherLabel", "Track another order") })
286
+ ] }),
287
+ /* @__PURE__ */ jsx2("h1", { style: { margin: "54px 0 0", fontSize: "clamp(36px, 5vw, 56px)", lineHeight: 1.1, textAlign: "center" }, children: result.status }),
288
+ /* @__PURE__ */ jsx2(TrackingProgress, { steps: progress })
180
289
  ] }),
181
- runtime.phase === "error" ? /* @__PURE__ */ jsx2("p", { role: "alert", children: runtime.error }) : null
290
+ /* @__PURE__ */ jsx2("div", { style: { borderTop: "1px solid #edf0f4", marginTop: "clamp(28px, 5vw, 54px)", paddingTop: "clamp(36px, 5vw, 60px)" }, children: /* @__PURE__ */ jsxs2("div", { style: { ...contentWidth, display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 340px), 1fr))", gap: "clamp(36px, 8vw, 120px)" }, children: [
291
+ /* @__PURE__ */ jsxs2("section", { "aria-label": "Shipping details", children: [
292
+ /* @__PURE__ */ jsx2("h2", { style: { margin: "0 0 28px", fontSize: 28 }, children: "Shipping Details" }),
293
+ /* @__PURE__ */ jsx2(ShippingTimeline, { events })
294
+ ] }),
295
+ /* @__PURE__ */ jsxs2("section", { "aria-label": "Package contents", children: [
296
+ /* @__PURE__ */ jsx2("h2", { style: { margin: "0 0 28px", fontSize: 28 }, children: "Package Contents" }),
297
+ /* @__PURE__ */ jsx2(PackageContents, { items: result.orderItems })
298
+ ] })
299
+ ] }) })
300
+ ] });
301
+ }
302
+ function BrandedTextField({ value, onChange }) {
303
+ return /* @__PURE__ */ jsx2("input", { "aria-label": "Branded text", value: typeof value === "string" ? value : "", onChange: (event) => onChange(event.target.value) });
304
+ }
305
+ function InlineText({ block, name, fallback }) {
306
+ const value = text2(block, name, fallback);
307
+ if (!block.selected) return /* @__PURE__ */ jsx2("span", { "data-branded-editor-field": name, children: value });
308
+ return /* @__PURE__ */ jsx2(
309
+ "input",
310
+ {
311
+ "aria-label": "Canvas " + name,
312
+ "data-branded-editor-field": name,
313
+ value,
314
+ onMouseDown: (event) => event.stopPropagation(),
315
+ onClick: (event) => event.stopPropagation(),
316
+ onChange: (event) => block.onPropsChange({ [name]: event.currentTarget.value }),
317
+ style: { display: "inline-block", width: "100%", minWidth: "5ch", boxSizing: "border-box", border: "1px dashed currentColor", borderRadius: 3, padding: "2px 5px", background: "transparent", color: "inherit", font: "inherit", fontWeight: "inherit", lineHeight: "inherit", letterSpacing: "inherit", textAlign: "inherit" }
318
+ }
319
+ );
320
+ }
321
+ function EditorSurface({ block, children }) {
322
+ return /* @__PURE__ */ jsx2("section", { "aria-label": "Branded editor preview", style: { ...cardStyle2, outline: block.selected ? "2px solid #2563eb" : "1px dashed #cbd5e1", outlineOffset: -2, padding: 24 }, children });
323
+ }
324
+ function BrandedAnnouncementEditor(block) {
325
+ return /* @__PURE__ */ jsx2("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__ */ jsx2(InlineText, { block, name: "message", fallback: "Check out our summer sale" }) });
326
+ }
327
+ function BrandedTrackingExperienceEditor(block) {
328
+ const labels = shipmentLabels(block.shipmentLabels);
329
+ return /* @__PURE__ */ jsxs2("section", { "aria-label": "Branded tracking experience editor", style: { background: "#fffdf0", fontFamily: "var(--pb-font-family)" }, children: [
330
+ /* @__PURE__ */ jsx2("div", { style: { ...contentWidth, minHeight: 56, display: "flex", alignItems: "center", gap: 8, overflowX: "auto" }, children: labels.map((shipment, index) => /* @__PURE__ */ jsx2("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)) }),
331
+ /* @__PURE__ */ jsx2("div", { style: { minHeight: 360, display: "grid", placeItems: "center", padding: 16, background: "linear-gradient(135deg, #dedbd4, #b9b3aa)" }, children: /* @__PURE__ */ jsxs2(EditorSurface, { block, children: [
332
+ /* @__PURE__ */ jsx2("h1", { style: { margin: "0 0 28px", textAlign: "center", fontSize: 32 }, children: /* @__PURE__ */ jsx2(InlineText, { block, name: "heading", fallback: "Track your order" }) }),
333
+ /* @__PURE__ */ jsxs2("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", borderBottom: "1px solid #e7e7e7", marginBottom: 20, textAlign: "center" }, children: [
334
+ /* @__PURE__ */ jsx2("span", { style: { padding: 10 }, children: "Order Number" }),
335
+ /* @__PURE__ */ jsx2("strong", { style: { padding: 10, borderBottom: "2px solid #0a0a0a" }, children: "Tracking Number" })
336
+ ] }),
337
+ /* @__PURE__ */ jsx2("input", { "aria-label": "Canvas default tracking number", readOnly: !block.selected, value: text2(block, "defaultTrackingNumber", "DEMO-YQTRACK9999"), onMouseDown: (event) => block.selected && event.stopPropagation(), onClick: (event) => block.selected && event.stopPropagation(), onChange: (event) => block.onPropsChange({ defaultTrackingNumber: event.currentTarget.value }), style: { width: "100%", height: 44, boxSizing: "border-box", padding: "0 12px", border: block.selected ? "1px dashed #0a0a0a" : "1px solid #e2e2e2", borderRadius: 10, background: "#fff", font: "inherit" } }),
338
+ /* @__PURE__ */ jsx2("div", { style: { display: "grid", placeItems: "center", minHeight: 46, marginTop: 16, borderRadius: 10, background: "#000", color: "#fff", fontWeight: 700 }, children: /* @__PURE__ */ jsx2(InlineText, { block, name: "submitLabel", fallback: "Track" }) }),
339
+ /* @__PURE__ */ jsx2("small", { style: { display: "block", marginTop: 10, color: "#8a8a8a", fontSize: 9, textAlign: "right" }, children: "Powered by BestTrack" })
340
+ ] }) })
341
+ ] });
342
+ }
343
+ function BrandedQueryEditor(block) {
344
+ return /* @__PURE__ */ jsx2(BrandedTrackingExperienceEditor, { ...block });
345
+ }
346
+ function BrandedOrderItemsEditor(block) {
347
+ return /* @__PURE__ */ jsxs2(EditorSurface, { block, children: [
348
+ /* @__PURE__ */ jsx2("h2", { style: { margin: 0 }, children: /* @__PURE__ */ jsx2(InlineText, { block, name: "heading", fallback: "What's Inside" }) }),
349
+ /* @__PURE__ */ jsx2("p", { style: { color: "#6b6b6b" }, children: "Package contents appear after a consumer tracking query." })
350
+ ] });
351
+ }
352
+ function BrandedRecommendationsEditor(block) {
353
+ return /* @__PURE__ */ jsxs2(EditorSurface, { block, children: [
354
+ /* @__PURE__ */ jsx2("h2", { style: { margin: 0, textAlign: "center" }, children: /* @__PURE__ */ jsx2(InlineText, { block, name: "heading", fallback: "You might also like" }) }),
355
+ /* @__PURE__ */ jsx2("p", { style: { color: "#6b6b6b", textAlign: "center" }, children: "Recommendations appear with the active shipment." })
356
+ ] });
357
+ }
358
+ function BrandedQuickLinksEditor(block) {
359
+ return /* @__PURE__ */ jsxs2(EditorSurface, { block, children: [
360
+ /* @__PURE__ */ jsx2("h2", { children: /* @__PURE__ */ jsx2(InlineText, { block, name: "heading", fallback: "Need help?" }) }),
361
+ /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 20 }, children: [
362
+ /* @__PURE__ */ jsx2(InlineText, { block, name: "primaryLabel", fallback: "Shipping help" }),
363
+ /* @__PURE__ */ jsx2(InlineText, { block, name: "secondaryLabel", fallback: "Contact us" })
364
+ ] })
365
+ ] });
366
+ }
367
+ function BrandedBlogEditor(block) {
368
+ return /* @__PURE__ */ jsxs2(EditorSurface, { block, children: [
369
+ /* @__PURE__ */ jsx2("h2", { children: /* @__PURE__ */ jsx2(InlineText, { block, name: "heading", fallback: "From our journal" }) }),
370
+ /* @__PURE__ */ jsxs2("article", { children: [
371
+ /* @__PURE__ */ jsx2("strong", { children: /* @__PURE__ */ jsx2(InlineText, { block, name: "articleTitle", fallback: "Delivery tips for every season" }) }),
372
+ /* @__PURE__ */ jsx2("p", { children: /* @__PURE__ */ jsx2(InlineText, { block, name: "excerpt", fallback: "Simple ways to make every delivery feel considered." }) }),
373
+ /* @__PURE__ */ jsx2(InlineText, { block, name: "linkLabel", fallback: "Read the story" })
374
+ ] })
375
+ ] });
376
+ }
377
+ function BrandedAnnouncementBlock(props) {
378
+ const message = text2(props, "message", "");
379
+ if (!message) return null;
380
+ return /* @__PURE__ */ jsx2("section", { "aria-label": "Branded announcement", style: { minHeight: 36, display: "grid", placeItems: "center", padding: "0 16px", background: "#252525", color: "#fff", fontFamily: "var(--pb-font-family)", fontSize: 12, textAlign: "center" }, children: /* @__PURE__ */ jsx2("a", { href: safeHref(props.href), style: { color: "inherit", textDecoration: "none" }, children: message }) });
381
+ }
382
+ function BrandedTrackingExperienceBlock(props) {
383
+ const runtime = useBrandedRuntime();
384
+ return /* @__PURE__ */ jsxs2("section", { "aria-label": "Branded tracking experience", style: { background: "#fffdf0", fontFamily: "var(--pb-font-family)" }, children: [
385
+ /* @__PURE__ */ jsx2(ShipmentSwitcher, { shipmentLabels: props.shipmentLabels }),
386
+ runtime.phase === "success" ? /* @__PURE__ */ jsx2(TrackingResult, { props }) : /* @__PURE__ */ jsx2(QueryHero, { ...props })
387
+ ] });
388
+ }
389
+ function BrandedQueryBlock(props) {
390
+ return /* @__PURE__ */ jsxs2("section", { "aria-label": "Branded tracking query", style: { background: "#fffdf0", fontFamily: "var(--pb-font-family)" }, children: [
391
+ /* @__PURE__ */ jsx2(ShipmentSwitcher, { shipmentLabels: props.shipmentLabels }),
392
+ /* @__PURE__ */ jsx2(QueryHero, { ...props })
182
393
  ] });
183
394
  }
184
395
  function BrandedOrderItemsBlock(props) {
185
396
  const runtime = useBrandedRuntime();
186
- const title = text(props, "heading", "Your order");
187
- const items = runtime.result?.orderItems ?? [];
188
- return /* @__PURE__ */ jsx2(Section, { title, children: runtime.phase === "success" && items.length ? /* @__PURE__ */ jsx2("ul", { style: { paddingLeft: 20, marginBottom: 0 }, children: items.map((item) => /* @__PURE__ */ jsxs2("li", { children: [
189
- /* @__PURE__ */ jsx2("strong", { children: item.title }),
190
- " \xB7 Qty ",
191
- item.quantity
192
- ] }, item.id)) }) : /* @__PURE__ */ jsx2("p", { children: runtime.phase === "loading" ? "Loading order items\u2026" : "Order items will appear after a successful query." }) });
397
+ const items = runtime.displayedResult?.orderItems ?? [];
398
+ const title = text2(props, "heading", "What's Inside");
399
+ return /* @__PURE__ */ jsx2("section", { "aria-label": title, style: { background: "#fffdf0", color: "#0a0a0a", fontFamily: "var(--pb-font-family)", padding: "clamp(28px, 4vw, 48px) 0" }, children: /* @__PURE__ */ jsxs2("div", { style: contentWidth, children: [
400
+ /* @__PURE__ */ jsxs2("h2", { style: { margin: "0 0 20px", fontSize: 20 }, children: [
401
+ title,
402
+ runtime.phase === "success" ? " (" + items.length + ")" : ""
403
+ ] }),
404
+ runtime.phase === "success" ? /* @__PURE__ */ jsx2(PackageContents, { items }) : /* @__PURE__ */ jsx2("p", { style: { margin: 0, color: runtime.phase === "error" ? "#b42318" : "#6b6b6b" }, children: runtime.phase === "error" ? "Order items are temporarily unavailable." : "Track an order to see what is inside." })
405
+ ] }) });
406
+ }
407
+ function RecommendationCard({ item }) {
408
+ return /* @__PURE__ */ jsxs2("article", { style: { overflow: "hidden", borderRadius: 6, background: "#fff", boxShadow: "0 1px 2px rgb(0 0 0 / 8%)" }, children: [
409
+ /* @__PURE__ */ jsx2(ProductImage, { src: item.imageUrl, alt: item.title }),
410
+ /* @__PURE__ */ jsxs2("div", { style: { padding: 14 }, children: [
411
+ /* @__PURE__ */ jsx2("strong", { children: item.title }),
412
+ item.price ? /* @__PURE__ */ jsx2("p", { style: { margin: "6px 0", fontWeight: 700 }, children: item.price }) : null,
413
+ /* @__PURE__ */ jsx2("p", { style: { margin: "6px 0", color: "#6b6b6b", fontSize: 13 }, children: item.description }),
414
+ /* @__PURE__ */ jsx2("a", { href: safeHref(item.href), style: { color: "#0a0a0a", fontSize: 13, fontWeight: 700 }, children: "View product" })
415
+ ] })
416
+ ] });
193
417
  }
194
418
  function BrandedRecommendationsBlock(props) {
195
419
  const runtime = useBrandedRuntime();
196
- const title = text(props, "heading", "Selected for you");
197
- const recommendations = runtime.result?.recommendations ?? [];
198
- return /* @__PURE__ */ jsx2(Section, { title, children: runtime.phase === "success" && recommendations.length ? /* @__PURE__ */ jsx2("div", { style: gridStyle, children: recommendations.map((item) => /* @__PURE__ */ jsxs2("article", { style: { borderTop: "3px solid var(--pb-color-primary)", paddingTop: 8 }, children: [
199
- /* @__PURE__ */ jsx2("strong", { children: item.title }),
200
- /* @__PURE__ */ jsx2("p", { children: item.description })
201
- ] }, item.id)) }) : /* @__PURE__ */ jsx2("p", { children: runtime.phase === "success" ? "No recommendations are available for this order." : "Recommendations appear with your order result." }) });
420
+ const recommendations = runtime.displayedResult?.recommendations ?? [];
421
+ const title = text2(props, "heading", "You might also like");
422
+ if (runtime.phase === "success" && !recommendations.length && text2(props, "hideWhenEmpty", "false") === "true") return null;
423
+ return /* @__PURE__ */ jsx2("section", { "aria-label": title, style: { background: "#fffdf0", color: "#0a0a0a", fontFamily: "var(--pb-font-family)", padding: "clamp(28px, 4vw, 48px) 0" }, children: /* @__PURE__ */ jsxs2("div", { style: contentWidth, children: [
424
+ /* @__PURE__ */ jsx2("h2", { style: { margin: "0 0 24px", textAlign: "center", fontSize: 20 }, children: title }),
425
+ runtime.phase === "loading" ? /* @__PURE__ */ jsx2("div", { "aria-label": "Loading recommendations", style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 16 }, children: [0, 1, 2].map((item) => /* @__PURE__ */ jsx2("span", { style: { display: "block", height: 220, borderRadius: 6, background: "#e7e7e7" } }, item)) }) : runtime.phase === "success" && recommendations.length ? /* @__PURE__ */ jsx2("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 16 }, children: recommendations.map((item) => /* @__PURE__ */ jsx2(RecommendationCard, { item }, item.id)) }) : /* @__PURE__ */ jsx2("p", { style: { margin: 0, textAlign: "center", color: runtime.phase === "error" ? "#b42318" : "#6b6b6b" }, children: runtime.phase === "error" ? "Recommendations are temporarily unavailable." : "Recommendations will appear with your order." })
426
+ ] }) });
202
427
  }
203
428
  function BrandedQuickLinksBlock(props) {
204
- const title = text(props, "heading", "Need help?");
205
- return /* @__PURE__ */ jsx2(Section, { title, children: /* @__PURE__ */ jsxs2("div", { style: gridStyle, children: [
206
- /* @__PURE__ */ jsx2("a", { href: safeHref(props.primaryHref), style: { color: "var(--pb-color-primary)" }, children: text(props, "primaryLabel", "Shipping help") }),
207
- /* @__PURE__ */ jsx2("a", { href: safeHref(props.secondaryHref), style: { color: "var(--pb-color-primary)" }, children: text(props, "secondaryLabel", "Contact us") })
208
- ] }) });
429
+ const title = text2(props, "heading", "Need help?");
430
+ return /* @__PURE__ */ jsxs2("section", { "aria-label": title, style: { ...cardStyle2, margin: "24px auto", maxWidth: 1200, padding: 24 }, children: [
431
+ /* @__PURE__ */ jsx2("h2", { children: title }),
432
+ /* @__PURE__ */ jsxs2("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: 16 }, children: [
433
+ /* @__PURE__ */ jsx2("a", { href: safeHref(props.primaryHref), style: { color: "#0a0a0a" }, children: text2(props, "primaryLabel", "Shipping help") }),
434
+ /* @__PURE__ */ jsx2("a", { href: safeHref(props.secondaryHref), style: { color: "#0a0a0a" }, children: text2(props, "secondaryLabel", "Contact us") })
435
+ ] })
436
+ ] });
209
437
  }
210
438
  function BrandedBlogBlock(props) {
211
- const title = text(props, "heading", "From our journal");
212
- return /* @__PURE__ */ jsx2(Section, { title, children: /* @__PURE__ */ jsxs2("article", { children: [
213
- /* @__PURE__ */ jsx2("strong", { children: text(props, "articleTitle", "Delivery tips for every season") }),
214
- /* @__PURE__ */ jsx2("p", { children: text(props, "excerpt", "Simple ways to make every delivery feel considered.") }),
215
- /* @__PURE__ */ jsx2("a", { href: safeHref(props.articleHref), style: { color: "var(--pb-color-primary)" }, children: text(props, "linkLabel", "Read the story") })
216
- ] }) });
439
+ const title = text2(props, "heading", "From our journal");
440
+ return /* @__PURE__ */ jsxs2("section", { "aria-label": title, style: { ...cardStyle2, margin: "24px auto", maxWidth: 1200, padding: 24 }, children: [
441
+ /* @__PURE__ */ jsx2("h2", { children: title }),
442
+ /* @__PURE__ */ jsxs2("article", { children: [
443
+ /* @__PURE__ */ jsx2("strong", { children: text2(props, "articleTitle", "Delivery tips for every season") }),
444
+ /* @__PURE__ */ jsx2("p", { children: text2(props, "excerpt", "Simple ways to make every delivery feel considered.") }),
445
+ /* @__PURE__ */ jsx2("a", { href: safeHref(props.articleHref), style: { color: "#0a0a0a" }, children: text2(props, "linkLabel", "Read the story") })
446
+ ] })
447
+ ] });
217
448
  }
218
449
 
219
450
  // src/branded-definition.ts
220
- var text2 = (label) => ({ field: "besttrack.branded.text", label });
451
+ var text3 = (label, options = {}) => ({ field: "besttrack.branded.text", label, control: "text", ...options });
221
452
  var brandedBlocks = [
222
- { type: "besttrack.branded.announcement", version: 1, label: "Announcement", category: "BestTrack Branded", targets: ["web"], defaultProps: { brandName: "BestTrack Studio", logoUrl: "", message: "Track every order with confidence." }, defaultVariant: "brand", variants: [{ id: "brand", label: "Brand" }, { id: "minimal", label: "Minimal", theme: { "color.primary": "#202223" } }], fields: { brandName: text2("Brand name"), logoUrl: text2("Logo URL"), message: text2("Announcement") }, render: { web: BrandedAnnouncementBlock } },
223
- { type: "besttrack.branded.query", version: 1, label: "Order query", category: "BestTrack Branded", targets: ["web"], defaultProps: { eyebrow: "ORDER SUPPORT", heading: "Where is my order?", submitLabel: "Find my order", defaultTrackingNumber: "BT-2048-DEMO" }, defaultVariant: "brand", variants: [{ id: "brand", label: "Brand" }, { id: "compact", label: "Compact", theme: { spacing: "12px" } }], fields: { eyebrow: text2("Eyebrow"), heading: text2("Heading"), submitLabel: text2("Button label"), defaultTrackingNumber: text2("Default tracking number") }, render: { web: BrandedQueryBlock } },
224
- { type: "besttrack.branded.order-items", version: 1, label: "Order items", category: "BestTrack Branded", targets: ["web"], defaultProps: { heading: "Your order" }, defaultVariant: "brand", variants: [{ id: "brand", label: "Brand" }, { id: "minimal", label: "Minimal" }], fields: { heading: text2("Heading") }, render: { web: BrandedOrderItemsBlock } },
225
- { type: "besttrack.branded.recommendations", version: 1, label: "Recommended products", category: "BestTrack Branded", targets: ["web"], defaultProps: { heading: "Selected for you" }, defaultVariant: "brand", variants: [{ id: "brand", label: "Brand" }, { id: "editorial", label: "Editorial", theme: { "color.surface": "#fff7ed" } }], fields: { heading: text2("Heading") }, render: { web: BrandedRecommendationsBlock } },
226
- { type: "besttrack.branded.quick-links", version: 1, label: "Quick links", category: "BestTrack Branded", targets: ["web"], defaultProps: { heading: "Need help?", primaryLabel: "Shipping help", primaryHref: "/pages/shipping", secondaryLabel: "Contact us", secondaryHref: "/pages/contact" }, defaultVariant: "brand", variants: [{ id: "brand", label: "Brand" }], fields: { heading: text2("Heading"), primaryLabel: text2("Primary link label"), primaryHref: text2("Primary link URL"), secondaryLabel: text2("Secondary link label"), secondaryHref: text2("Secondary link URL") }, render: { web: BrandedQuickLinksBlock } },
227
- { type: "besttrack.branded.blog", version: 1, label: "Blog", category: "BestTrack Branded", targets: ["web"], defaultProps: { heading: "From our journal", articleTitle: "Delivery tips for every season", excerpt: "Simple ways to make every delivery feel considered.", articleHref: "/blogs/news", linkLabel: "Read the story" }, defaultVariant: "brand", variants: [{ id: "brand", label: "Brand" }], fields: { heading: text2("Heading"), articleTitle: text2("Article title"), excerpt: text2("Excerpt"), articleHref: text2("Article URL"), linkLabel: text2("Link label") }, render: { web: BrandedBlogBlock } }
453
+ { type: "besttrack.branded.announcement", version: 1, label: "Announcement", category: "BestTrack Branded", targets: ["web"], defaultProps: { message: "Check out our summer sale", href: "/collections/sale" }, defaultVariant: "brand", variants: [{ id: "brand", label: "Brand" }, { id: "minimal", label: "Minimal", theme: { "color.primary": "#202223" } }], fields: { message: text3("Announcement", { control: "textarea" }), href: text3("Announcement URL", { control: "url" }) }, render: { web: BrandedAnnouncementBlock, editor: BrandedAnnouncementEditor } },
454
+ { type: "besttrack.branded.tracking-experience", version: 1, label: "Tracking experience", category: "BestTrack Branded", targets: ["web"], defaultProps: { heading: "Track your order", submitLabel: "Track", trackAnotherLabel: "Track another order", defaultTrackingNumber: "DEMO-YQTRACK9999", defaultQueryMode: "tracking", shipmentLabels: "Shipment #1|Shipment #2|Shipment #3", heroImageUrl: "https://images.unsplash.com/photo-1596462502278-27bfdc403348?auto=format&fit=crop&w=1600&q=85" }, defaultVariant: "brand", variants: [{ id: "brand", label: "Brand" }, { id: "compact", label: "Compact", theme: { spacing: "12px" } }], fields: { heading: text3("Heading"), submitLabel: text3("Button label"), trackAnotherLabel: text3("Track another label"), defaultTrackingNumber: text3("Default tracking number"), defaultQueryMode: text3("Default query mode"), shipmentLabels: text3("Shipment labels (separate with |)"), heroImageUrl: text3("Hero image URL", { control: "url" }) }, render: { web: BrandedTrackingExperienceBlock, editor: BrandedTrackingExperienceEditor } },
455
+ { type: "besttrack.branded.query", version: 1, label: "Order query", category: "BestTrack Branded", targets: ["web"], defaultProps: { heading: "Track your order", submitLabel: "Track", defaultTrackingNumber: "DEMO-YQTRACK9999", defaultQueryMode: "tracking", shipmentLabels: "Shipment #1|Shipment #2|Shipment #3", heroImageUrl: "https://images.unsplash.com/photo-1596462502278-27bfdc403348?auto=format&fit=crop&w=1600&q=85" }, defaultVariant: "brand", variants: [{ id: "brand", label: "Brand" }, { id: "compact", label: "Compact", theme: { spacing: "12px" } }], fields: { heading: text3("Heading"), submitLabel: text3("Button label"), defaultTrackingNumber: text3("Default tracking number"), defaultQueryMode: text3("Default query mode"), shipmentLabels: text3("Shipment labels (separate with |)"), heroImageUrl: text3("Hero image URL", { control: "url" }) }, render: { web: BrandedQueryBlock, editor: BrandedQueryEditor } },
456
+ { type: "besttrack.branded.order-items", version: 1, label: "Order items", category: "BestTrack Branded", targets: ["web"], defaultProps: { heading: "What's Inside" }, defaultVariant: "brand", variants: [{ id: "brand", label: "Brand" }, { id: "minimal", label: "Minimal" }], fields: { heading: text3("Heading") }, render: { web: BrandedOrderItemsBlock, editor: BrandedOrderItemsEditor } },
457
+ { type: "besttrack.branded.recommendations", version: 1, label: "Recommended products", category: "BestTrack Branded", targets: ["web"], defaultProps: { heading: "You might also like", hideWhenEmpty: "false" }, defaultVariant: "brand", variants: [{ id: "brand", label: "Brand" }, { id: "editorial", label: "Editorial", theme: { "color.surface": "#fffdf0" } }], fields: { heading: text3("Heading"), hideWhenEmpty: text3("Hide when empty (true/false)") }, render: { web: BrandedRecommendationsBlock, editor: BrandedRecommendationsEditor } },
458
+ { type: "besttrack.branded.quick-links", version: 1, label: "Quick links", category: "BestTrack Branded", targets: ["web"], defaultProps: { heading: "Need help?", primaryLabel: "Shipping help", primaryHref: "/pages/shipping", secondaryLabel: "Contact us", secondaryHref: "/pages/contact" }, defaultVariant: "brand", variants: [{ id: "brand", label: "Brand" }], fields: { heading: text3("Heading"), primaryLabel: text3("Primary link label"), primaryHref: text3("Primary link URL", { control: "url" }), secondaryLabel: text3("Secondary link label"), secondaryHref: text3("Secondary link URL", { control: "url" }) }, render: { web: BrandedQuickLinksBlock, editor: BrandedQuickLinksEditor } },
459
+ { type: "besttrack.branded.blog", version: 1, label: "Blog", category: "BestTrack Branded", targets: ["web"], defaultProps: { heading: "From our journal", articleTitle: "Delivery tips for every season", excerpt: "Simple ways to make every delivery feel considered.", articleHref: "/blogs/news", linkLabel: "Read the story" }, defaultVariant: "brand", variants: [{ id: "brand", label: "Brand" }], fields: { heading: text3("Heading"), articleTitle: text3("Article title"), excerpt: text3("Excerpt", { control: "textarea" }), articleHref: text3("Article URL", { control: "url" }), linkLabel: text3("Link label") }, render: { web: BrandedBlogBlock, editor: BrandedBlogEditor } }
228
460
  ];
229
461
  function createBrandedTemplate() {
230
- return { id: "besttrack.branded", version: 1, name: "Branded", target: "web", source: "built-in", requiredBlocks: brandedBlocks.map((block) => block.type), theme: { "color.primary": "#7c3aed", "color.background": "#f8f7ff", "color.surface": "#ffffff", "color.text": "#231942", "color.border": "#ddd6fe", "font.family": "Georgia, serif", radius: "18px", spacing: "24px" }, create: () => createPageDocument2({ pageId: "besttrack-branded", target: "web", templateId: "besttrack.branded", templateVersion: 1, settings: { locale: "en", seoTitle: "Track your order with BestTrack Studio" }, blocks: brandedBlocks.map((block, index) => ({ id: `branded-${index + 1}`, type: block.type, version: block.version, props: block.defaultProps, variant: block.defaultVariant, style: {} })) }) };
462
+ const templateBlocks = brandedBlocks.filter((block) => !["besttrack.branded.query", "besttrack.branded.order-items"].includes(block.type));
463
+ return { id: "besttrack.branded", version: 1, name: "Branded", target: "web", source: "built-in", requiredBlocks: templateBlocks.map((block) => block.type), theme: { "color.primary": "#000000", "color.background": "#fffdf0", "color.surface": "#ffffff", "color.text": "#0a0a0a", "color.muted": "#6b6b6b", "color.border": "#e7e7e7", "font.family": "Arial, Helvetica, sans-serif", radius: "10px", spacing: "24px" }, create: () => createPageDocument2({ pageId: "besttrack-branded", target: "web", templateId: "besttrack.branded", templateVersion: 1, settings: { locale: "en", seoTitle: "Track your order" }, blocks: templateBlocks.map((block, index) => ({ id: "branded-" + (index + 1), type: block.type, version: block.version, props: block.defaultProps, variant: block.defaultVariant, style: {} })) }) };
231
464
  }
232
465
  var bestTrackBrandedExtension = Object.freeze({ name: "besttrack.branded", version: "0.7.1", fields: [{ type: "besttrack.branded.text", component: BrandedTextField }], blocks: brandedBlocks, templates: [createBrandedTemplate()] });
233
466
 
@@ -242,7 +475,7 @@ var initialRuntime3 = { phase: "idle", async query() {
242
475
  } };
243
476
  var SalesRuntimeContext = createContext3(initialRuntime3);
244
477
  var cardStyle3 = { border: "1px solid var(--pb-color-border)", borderRadius: "var(--pb-radius)", padding: "var(--pb-spacing)", background: "var(--pb-color-surface)", color: "var(--pb-color-text)", fontFamily: "var(--pb-font-family)" };
245
- var gridStyle2 = { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))", gap: "var(--pb-spacing)" };
478
+ var gridStyle = { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))", gap: "var(--pb-spacing)" };
246
479
  function SalesRuntimeProvider({ children, queryTracking }) {
247
480
  const [state, setState] = useState3({ phase: "idle" });
248
481
  const query = useCallback3(async (trackingNumber) => {
@@ -259,7 +492,7 @@ function SalesRuntimeProvider({ children, queryTracking }) {
259
492
  function useSalesRuntime() {
260
493
  return useContext3(SalesRuntimeContext);
261
494
  }
262
- function text3(props, key, fallback) {
495
+ function text4(props, key, fallback) {
263
496
  return typeof props[key] === "string" ? props[key] : fallback;
264
497
  }
265
498
  function safeHref2(value) {
@@ -272,7 +505,7 @@ function safeHref2(value) {
272
505
  return "#";
273
506
  }
274
507
  }
275
- function Section2({ title, children }) {
508
+ function Section({ title, children }) {
276
509
  return /* @__PURE__ */ jsxs3("section", { "aria-label": title, style: cardStyle3, children: [
277
510
  /* @__PURE__ */ jsx3("h2", { style: { marginTop: 0 }, children: title }),
278
511
  children
@@ -285,20 +518,20 @@ function SalesTextField({ value, onChange }) {
285
518
  return /* @__PURE__ */ jsx3("input", { "aria-label": "Sales text", value: typeof value === "string" ? value : "", onChange: (event) => onChange(event.target.value) });
286
519
  }
287
520
  function SalesAnnouncementBlock(props) {
288
- return /* @__PURE__ */ jsx3("section", { "aria-label": "Sales announcement", style: { ...cardStyle3, background: "var(--pb-color-primary)", color: "white", textAlign: "center" }, children: /* @__PURE__ */ jsx3("strong", { children: text3(props, "message", "Free delivery on orders over $50") }) });
521
+ return /* @__PURE__ */ jsx3("section", { "aria-label": "Sales announcement", style: { ...cardStyle3, background: "var(--pb-color-primary)", color: "white", textAlign: "center" }, children: /* @__PURE__ */ jsx3("strong", { children: text4(props, "message", "Free delivery on orders over $50") }) });
289
522
  }
290
523
  function SalesQueryBlock(props) {
291
524
  const runtime = useSalesRuntime();
292
- const [trackingNumber, setTrackingNumber] = useState3(text3(props, "defaultTrackingNumber", "BT-2048-DEMO"));
525
+ const [trackingNumber, setTrackingNumber] = useState3(text4(props, "defaultTrackingNumber", "BT-2048-DEMO"));
293
526
  const submit = (event) => {
294
527
  event.preventDefault();
295
528
  void runtime.query(trackingNumber);
296
529
  };
297
530
  return /* @__PURE__ */ jsxs3("section", { "aria-label": "Sales tracking query", style: { ...cardStyle3, boxShadow: "0 12px 32px rgb(0 0 0 / 8%)" }, children: [
298
- /* @__PURE__ */ jsx3("h1", { style: { marginTop: 0 }, children: text3(props, "heading", "Track an order") }),
531
+ /* @__PURE__ */ jsx3("h1", { style: { marginTop: 0 }, children: text4(props, "heading", "Track an order") }),
299
532
  /* @__PURE__ */ jsxs3("form", { onSubmit: submit, style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
300
533
  /* @__PURE__ */ jsx3("input", { "aria-label": "Sales tracking number", value: trackingNumber, onChange: (event) => setTrackingNumber(event.target.value), minLength: 4, maxLength: 64, required: true, style: { flex: "1 1 220px", padding: 12, borderRadius: "var(--pb-radius)", border: "1px solid var(--pb-color-border)" } }),
301
- /* @__PURE__ */ jsx3("button", { type: "submit", disabled: runtime.phase === "loading", style: { padding: "12px 18px", border: 0, borderRadius: "var(--pb-radius)", color: "white", background: "var(--pb-color-primary)" }, children: runtime.phase === "loading" ? "Checking\u2026" : text3(props, "submitLabel", "Track order") })
534
+ /* @__PURE__ */ jsx3("button", { type: "submit", disabled: runtime.phase === "loading", style: { padding: "12px 18px", border: 0, borderRadius: "var(--pb-radius)", color: "white", background: "var(--pb-color-primary)" }, children: runtime.phase === "loading" ? "Checking\u2026" : text4(props, "submitLabel", "Track order") })
302
535
  ] }),
303
536
  runtime.phase === "error" ? /* @__PURE__ */ jsxs3("p", { role: "alert", children: [
304
537
  "We could not retrieve this order: ",
@@ -308,9 +541,9 @@ function SalesQueryBlock(props) {
308
541
  }
309
542
  function SalesOrderItemsBlock(props) {
310
543
  const runtime = useSalesRuntime();
311
- const title = text3(props, "heading", "Items in your order");
544
+ const title = text4(props, "heading", "Items in your order");
312
545
  const items = runtime.result?.orderItems ?? [];
313
- return /* @__PURE__ */ jsx3(Section2, { title, children: runtime.phase === "error" ? /* @__PURE__ */ jsx3("p", { role: "alert", children: "Order items are temporarily unavailable." }) : runtime.phase === "success" && items.length ? /* @__PURE__ */ jsx3("ul", { style: { marginBottom: 0, paddingLeft: 20 }, children: items.map((item) => /* @__PURE__ */ jsxs3("li", { children: [
546
+ return /* @__PURE__ */ jsx3(Section, { title, children: runtime.phase === "error" ? /* @__PURE__ */ jsx3("p", { role: "alert", children: "Order items are temporarily unavailable." }) : runtime.phase === "success" && items.length ? /* @__PURE__ */ jsx3("ul", { style: { marginBottom: 0, paddingLeft: 20 }, children: items.map((item) => /* @__PURE__ */ jsxs3("li", { children: [
314
547
  /* @__PURE__ */ jsx3("strong", { children: item.title }),
315
548
  " \xB7 Qty ",
316
549
  item.quantity
@@ -318,28 +551,28 @@ function SalesOrderItemsBlock(props) {
318
551
  }
319
552
  function SalesOtherTrackingBlock(props) {
320
553
  const runtime = useSalesRuntime();
321
- const title = text3(props, "heading", "Other shipments");
322
- return /* @__PURE__ */ jsx3(Section2, { title, children: runtime.phase === "error" ? /* @__PURE__ */ jsx3("p", { role: "alert", children: "Additional shipments are unavailable." }) : runtime.phase === "success" ? /* @__PURE__ */ jsx3("p", { children: text3(props, "emptyMessage", "No other shipments are linked to this order.") }) : /* @__PURE__ */ jsx3("p", { children: "Other tracking numbers appear with your order result." }) });
554
+ const title = text4(props, "heading", "Other shipments");
555
+ return /* @__PURE__ */ jsx3(Section, { title, children: runtime.phase === "error" ? /* @__PURE__ */ jsx3("p", { role: "alert", children: "Additional shipments are unavailable." }) : runtime.phase === "success" ? /* @__PURE__ */ jsx3("p", { children: text4(props, "emptyMessage", "No other shipments are linked to this order.") }) : /* @__PURE__ */ jsx3("p", { children: "Other tracking numbers appear with your order result." }) });
323
556
  }
324
557
  function SalesServiceCardsBlock(props) {
325
- const title = text3(props, "heading", "Shop with confidence");
326
- return /* @__PURE__ */ jsx3(Section2, { title, children: /* @__PURE__ */ jsxs3("div", { style: gridStyle2, children: [
558
+ const title = text4(props, "heading", "Shop with confidence");
559
+ return /* @__PURE__ */ jsx3(Section, { title, children: /* @__PURE__ */ jsxs3("div", { style: gridStyle, children: [
327
560
  /* @__PURE__ */ jsxs3("article", { children: [
328
- /* @__PURE__ */ jsx3("strong", { children: text3(props, "firstTitle", "Easy returns") }),
329
- /* @__PURE__ */ jsx3("p", { children: text3(props, "firstDescription", "Simple support when plans change.") })
561
+ /* @__PURE__ */ jsx3("strong", { children: text4(props, "firstTitle", "Easy returns") }),
562
+ /* @__PURE__ */ jsx3("p", { children: text4(props, "firstDescription", "Simple support when plans change.") })
330
563
  ] }),
331
564
  /* @__PURE__ */ jsxs3("article", { children: [
332
- /* @__PURE__ */ jsx3("strong", { children: text3(props, "secondTitle", "Secure delivery") }),
333
- /* @__PURE__ */ jsx3("p", { children: text3(props, "secondDescription", "Follow every milestone in one place.") })
565
+ /* @__PURE__ */ jsx3("strong", { children: text4(props, "secondTitle", "Secure delivery") }),
566
+ /* @__PURE__ */ jsx3("p", { children: text4(props, "secondDescription", "Follow every milestone in one place.") })
334
567
  ] })
335
568
  ] }) });
336
569
  }
337
570
  function SalesProductCategoriesBlock(props) {
338
- const title = text3(props, "heading", "Shop by category");
339
- const collectionId = text3(props, "collectionId", "");
571
+ const title = text4(props, "heading", "Shop by category");
572
+ const collectionId = text4(props, "collectionId", "");
340
573
  const state = resourceState(collectionId);
341
- return /* @__PURE__ */ jsx3(Section2, { title, children: state === "invalid" ? /* @__PURE__ */ jsx3("p", { role: "alert", children: "Collection reference is invalid." }) : state === "empty" ? /* @__PURE__ */ jsx3("p", { children: "No collection selected. Choose a collection through the authorized resource BFF." }) : /* @__PURE__ */ jsxs3("div", { style: gridStyle2, children: [
342
- /* @__PURE__ */ jsx3("a", { href: safeHref2(props.collectionHref), style: { color: "var(--pb-color-primary)" }, children: text3(props, "collectionLabel", "Featured collection") }),
574
+ return /* @__PURE__ */ jsx3(Section, { title, children: state === "invalid" ? /* @__PURE__ */ jsx3("p", { role: "alert", children: "Collection reference is invalid." }) : state === "empty" ? /* @__PURE__ */ jsx3("p", { children: "No collection selected. Choose a collection through the authorized resource BFF." }) : /* @__PURE__ */ jsxs3("div", { style: gridStyle, children: [
575
+ /* @__PURE__ */ jsx3("a", { href: safeHref2(props.collectionHref), style: { color: "var(--pb-color-primary)" }, children: text4(props, "collectionLabel", "Featured collection") }),
343
576
  /* @__PURE__ */ jsxs3("small", { children: [
344
577
  "Collection reference: ",
345
578
  collectionId
@@ -348,24 +581,24 @@ function SalesProductCategoriesBlock(props) {
348
581
  }
349
582
  function SalesRecommendationsBlock(props) {
350
583
  const runtime = useSalesRuntime();
351
- const title = text3(props, "heading", "Complete your order");
584
+ const title = text4(props, "heading", "Complete your order");
352
585
  const recommendations = runtime.result?.recommendations ?? [];
353
- return /* @__PURE__ */ jsx3(Section2, { title, children: runtime.phase === "error" ? /* @__PURE__ */ jsx3("p", { role: "alert", children: "Recommendations are temporarily unavailable." }) : runtime.phase === "success" && recommendations.length ? /* @__PURE__ */ jsx3("div", { style: gridStyle2, children: recommendations.map((item) => /* @__PURE__ */ jsxs3("article", { style: { borderTop: "3px solid var(--pb-color-primary)", paddingTop: 8 }, children: [
586
+ return /* @__PURE__ */ jsx3(Section, { title, children: runtime.phase === "error" ? /* @__PURE__ */ jsx3("p", { role: "alert", children: "Recommendations are temporarily unavailable." }) : runtime.phase === "success" && recommendations.length ? /* @__PURE__ */ jsx3("div", { style: gridStyle, children: recommendations.map((item) => /* @__PURE__ */ jsxs3("article", { style: { borderTop: "3px solid var(--pb-color-primary)", paddingTop: 8 }, children: [
354
587
  /* @__PURE__ */ jsx3("strong", { children: item.title }),
355
588
  /* @__PURE__ */ jsx3("p", { children: item.description })
356
589
  ] }, item.id)) }) : /* @__PURE__ */ jsx3("p", { children: runtime.phase === "success" ? "No recommendations are available for this order." : "Recommended products appear with your order result." }) });
357
590
  }
358
591
 
359
592
  // src/sales-definition.ts
360
- var text4 = (label) => ({ field: "besttrack.sales.text", label });
593
+ var text5 = (label, options = {}) => ({ field: "besttrack.sales.text", label, control: "text", ...options });
361
594
  var salesBlocks = [
362
- { type: "besttrack.sales.announcement", version: 1, label: "Announcement", category: "BestTrack Sales", targets: ["web"], defaultProps: { message: "Free delivery on orders over $50" }, defaultVariant: "commerce", variants: [{ id: "commerce", label: "Commerce" }, { id: "minimal", label: "Minimal", theme: { "color.primary": "#202223" } }], fields: { message: text4("Announcement") }, render: { web: SalesAnnouncementBlock } },
363
- { type: "besttrack.sales.query", version: 1, label: "Order query", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Track an order", submitLabel: "Track order", defaultTrackingNumber: "BT-2048-DEMO" }, defaultVariant: "commerce", variants: [{ id: "commerce", label: "Commerce" }, { id: "compact", label: "Compact", theme: { spacing: "12px" } }], fields: { heading: text4("Heading"), submitLabel: text4("Button label"), defaultTrackingNumber: text4("Default tracking number") }, render: { web: SalesQueryBlock } },
364
- { type: "besttrack.sales.order-items", version: 1, label: "Order items", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Items in your order" }, defaultVariant: "commerce", variants: [{ id: "commerce", label: "Commerce" }], fields: { heading: text4("Heading") }, render: { web: SalesOrderItemsBlock } },
365
- { type: "besttrack.sales.other-tracking", version: 1, label: "Other tracking", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Other shipments", emptyMessage: "No other shipments are linked to this order." }, defaultVariant: "commerce", variants: [{ id: "commerce", label: "Commerce" }], fields: { heading: text4("Heading"), emptyMessage: text4("Empty message") }, render: { web: SalesOtherTrackingBlock } },
366
- { type: "besttrack.sales.service-cards", version: 1, label: "Service cards", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Shop with confidence", firstTitle: "Easy returns", firstDescription: "Simple support when plans change.", secondTitle: "Secure delivery", secondDescription: "Follow every milestone in one place." }, defaultVariant: "commerce", variants: [{ id: "commerce", label: "Commerce" }], fields: { heading: text4("Heading"), firstTitle: text4("First card title"), firstDescription: text4("First card description"), secondTitle: text4("Second card title"), secondDescription: text4("Second card description") }, render: { web: SalesServiceCardsBlock } },
367
- { type: "besttrack.sales.product-categories", version: 1, label: "Product categories", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Shop by category", collectionId: "gid://shopify/Collection/featured", collectionLabel: "Featured collection", collectionHref: "/collections/featured" }, defaultVariant: "commerce", variants: [{ id: "commerce", label: "Commerce" }, { id: "grid", label: "Grid", theme: { "color.surface": "#f8fafc" } }], fields: { heading: text4("Heading"), collectionId: text4("Collection ID"), collectionLabel: text4("Collection label"), collectionHref: text4("Collection URL") }, render: { web: SalesProductCategoriesBlock } },
368
- { type: "besttrack.sales.recommendations", version: 1, label: "Recommended products", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Complete your order" }, defaultVariant: "commerce", variants: [{ id: "commerce", label: "Commerce" }, { id: "grid", label: "Product grid", theme: { "color.surface": "#f8fafc" } }], fields: { heading: text4("Heading") }, render: { web: SalesRecommendationsBlock } }
595
+ { type: "besttrack.sales.announcement", version: 1, label: "Announcement", category: "BestTrack Sales", targets: ["web"], defaultProps: { message: "Free delivery on orders over $50" }, defaultVariant: "commerce", variants: [{ id: "commerce", label: "Commerce" }, { id: "minimal", label: "Minimal", theme: { "color.primary": "#202223" } }], fields: { message: text5("Announcement", { control: "textarea" }) }, render: { web: SalesAnnouncementBlock } },
596
+ { type: "besttrack.sales.query", version: 1, label: "Order query", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Track an order", submitLabel: "Track order", defaultTrackingNumber: "BT-2048-DEMO" }, defaultVariant: "commerce", variants: [{ id: "commerce", label: "Commerce" }, { id: "compact", label: "Compact", theme: { spacing: "12px" } }], fields: { heading: text5("Heading"), submitLabel: text5("Button label"), defaultTrackingNumber: text5("Default tracking number") }, render: { web: SalesQueryBlock } },
597
+ { type: "besttrack.sales.order-items", version: 1, label: "Order items", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Items in your order" }, defaultVariant: "commerce", variants: [{ id: "commerce", label: "Commerce" }], fields: { heading: text5("Heading") }, render: { web: SalesOrderItemsBlock } },
598
+ { type: "besttrack.sales.other-tracking", version: 1, label: "Other tracking", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Other shipments", emptyMessage: "No other shipments are linked to this order." }, defaultVariant: "commerce", variants: [{ id: "commerce", label: "Commerce" }], fields: { heading: text5("Heading"), emptyMessage: text5("Empty message", { control: "textarea" }) }, render: { web: SalesOtherTrackingBlock } },
599
+ { type: "besttrack.sales.service-cards", version: 1, label: "Service cards", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Shop with confidence", firstTitle: "Easy returns", firstDescription: "Simple support when plans change.", secondTitle: "Secure delivery", secondDescription: "Follow every milestone in one place." }, defaultVariant: "commerce", variants: [{ id: "commerce", label: "Commerce" }], fields: { heading: text5("Heading"), firstTitle: text5("First card title"), firstDescription: text5("First card description", { control: "textarea" }), secondTitle: text5("Second card title"), secondDescription: text5("Second card description", { control: "textarea" }) }, render: { web: SalesServiceCardsBlock } },
600
+ { type: "besttrack.sales.product-categories", version: 1, label: "Product categories", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Shop by category", collectionId: "gid://shopify/Collection/featured", collectionLabel: "Featured collection", collectionHref: "/collections/featured" }, defaultVariant: "commerce", variants: [{ id: "commerce", label: "Commerce" }, { id: "grid", label: "Grid", theme: { "color.surface": "#f8fafc" } }], fields: { heading: text5("Heading"), collectionId: text5("Collection ID"), collectionLabel: text5("Collection label"), collectionHref: text5("Collection URL", { control: "url" }) }, render: { web: SalesProductCategoriesBlock } },
601
+ { type: "besttrack.sales.recommendations", version: 1, label: "Recommended products", category: "BestTrack Sales", targets: ["web"], defaultProps: { heading: "Complete your order" }, defaultVariant: "commerce", variants: [{ id: "commerce", label: "Commerce" }, { id: "grid", label: "Product grid", theme: { "color.surface": "#f8fafc" } }], fields: { heading: text5("Heading") }, render: { web: SalesRecommendationsBlock } }
369
602
  ];
370
603
  function createSalesTemplate() {
371
604
  return { id: "besttrack.sales", version: 1, name: "Sales", target: "web", source: "built-in", requiredBlocks: salesBlocks.map((block) => block.type), theme: { "color.primary": "#dc2626", "color.background": "#fffaf5", "color.surface": "#ffffff", "color.text": "#1c1917", "color.border": "#fed7aa", "font.family": "system-ui, sans-serif", radius: "10px", spacing: "20px" }, create: () => createPageDocument3({ pageId: "besttrack-sales", target: "web", templateId: "besttrack.sales", templateVersion: 1, settings: { locale: "en", seoTitle: "Shop and track your order" }, blocks: salesBlocks.map((block, index) => ({ id: "sales-" + (index + 1), type: block.type, version: block.version, props: block.defaultProps, variant: block.defaultVariant, style: {} })) }) };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@standhigher/besttrack-page-extension",
3
- "version": "0.1.0",
3
+ "version": "0.2.0",
4
4
  "description": "BestTrack business extension entry point for @standhigher/puck-page-builder.",
5
5
  "type": "module",
6
6
  "files": [
@@ -16,7 +16,7 @@
16
16
  }
17
17
  },
18
18
  "dependencies": {
19
- "@standhigher/puck-page-builder": "0.7.2"
19
+ "@standhigher/puck-page-builder": "0.8.0"
20
20
  },
21
21
  "devDependencies": {
22
22
  "tsup": "^8.5.1",