@standhigher/besttrack-page-extension 0.1.0

package/README.md

@@ -0,0 +1,9 @@
+# @standhigher/besttrack-page-extension
+
+V0.7.1 adds the besttrack.branded built-in template. Its announcement, order
+query, order items, recommendations, quick links and Blog blocks use the same
+host-injected tracking query contract as Ready-to-go. Logo and content are
+JSON-only block props; brand colour, font and radius use the template Theme
+Tokens and may be overridden through PageDocument.theme.
+
+V0.7.0 provides the Ready-to-go built-in template: order query, shipment progress, delivery information and recommendations. Live tracking is injected by the host Runtime; this package never stores credentials or network endpoints in a `PageDocument`.

package/dist/index.d.ts

@@ -0,0 +1,70 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { PageBuilderExtension, TemplateDefinition } from '@standhigher/puck-page-builder/runtime';
+
+type ReadyToGoTrackingResult = {
+    trackingNumber: string;
+    status: string;
+    carrier?: string;
+    latestEvent?: string;
+    updatedAt?: string;
+    deliveryAddress?: string;
+    orderItems?: Array<{
+        id: string;
+        title: string;
+        quantity: number;
+        imageUrl?: string;
+    }>;
+    recommendations?: Array<{
+        id: string;
+        title: string;
+        description: string;
+    }>;
+};
+type ReadyToGoTrackingQuery = (trackingNumber: string) => Promise<ReadyToGoTrackingResult>;
+type ReadyToGoRuntimeState = {
+    phase: "idle" | "loading" | "success" | "error";
+    result?: ReadyToGoTrackingResult;
+    error?: string;
+};
+type ReadyToGoRuntimeProviderProps = {
+    children: ReactNode;
+    queryTracking?: ReadyToGoTrackingQuery;
+};
+declare function ReadyToGoRuntimeProvider({ children, queryTracking }: ReadyToGoRuntimeProviderProps): react.JSX.Element;
+
+declare function createReadyToGoTemplate(): TemplateDefinition;
+declare const bestTrackPageExtension: PageBuilderExtension;
+
+declare function createBrandedTemplate(): TemplateDefinition;
+declare const bestTrackBrandedExtension: PageBuilderExtension;
+
+type BrandedRuntimeState = {
+    phase: "idle" | "loading" | "success" | "error";
+    result?: ReadyToGoTrackingResult;
+    error?: string;
+};
+type BrandedRuntimeProviderProps = {
+    children: ReactNode;
+    queryTracking: ReadyToGoTrackingQuery;
+};
+/** Keeps one standard tracking result available to every Branded result block. */
+declare function BrandedRuntimeProvider({ children, queryTracking }: BrandedRuntimeProviderProps): react.JSX.Element;
+
+declare function createSalesTemplate(): TemplateDefinition;
+declare const bestTrackSalesExtension: PageBuilderExtension;
+
+type SalesPhase = "idle" | "loading" | "success" | "error";
+type SalesRuntimeState = {
+    phase: SalesPhase;
+    result?: ReadyToGoTrackingResult;
+    error?: string;
+};
+type SalesRuntimeProviderProps = {
+    children: ReactNode;
+    queryTracking: ReadyToGoTrackingQuery;
+};
+/** The host injects a validated query; Sales never calls a DataSource itself. */
+declare function SalesRuntimeProvider({ children, queryTracking }: SalesRuntimeProviderProps): react.JSX.Element;
+
+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 };

package/dist/index.js

@@ -0,0 +1,384 @@
+// src/ready-to-go.tsx
+import { createContext, useCallback, useContext, useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var initialRuntime = { phase: "idle", async query() {
+  return void 0;
+} };
+var ReadyToGoRuntimeContext = createContext(initialRuntime);
+async function queryMockReadyToGoTracking(trackingNumber) {
+  return {
+    trackingNumber,
+    status: "In transit",
+    carrier: "BestTrack demo carrier",
+    latestEvent: "Shipment accepted at the regional hub",
+    updatedAt: "2026-09-17T10:00:00.000Z",
+    deliveryAddress: "Demo recipient \xB7 Shanghai",
+    orderItems: [{ id: "demo-order-item", title: "Demo shipment item", quantity: 1 }],
+    recommendations: [{ id: "shipping-protection", title: "Shipping protection", description: "Extra assurance for your next delivery." }, { id: "delivery-alerts", title: "Delivery alerts", description: "Receive an update at every milestone." }]
+  };
+}
+function ReadyToGoRuntimeProvider({ children, queryTracking = queryMockReadyToGoTracking }) {
+  const [state, setState] = useState({ phase: "idle" });
+  const query = useCallback(async (trackingNumber) => {
+    setState({ phase: "loading" });
+    try {
+      setState({ phase: "success", result: await queryTracking(trackingNumber) });
+    } catch (error) {
+      setState({ phase: "error", error: error instanceof Error ? error.message : "tracking-query-failed" });
+    }
+  }, [queryTracking]);
+  const value = useMemo(() => ({ ...state, query }), [query, state]);
+  return /* @__PURE__ */ jsx(ReadyToGoRuntimeContext.Provider, { value, children });
+}
+function useReadyToGoRuntime() {
+  return useContext(ReadyToGoRuntimeContext);
+}
+var cardStyle = { 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)" };
+function ResultCard({ title, children }) {
+  return /* @__PURE__ */ jsxs("section", { "aria-label": title, style: cardStyle, children: [
+    /* @__PURE__ */ jsx("h2", { style: { marginTop: 0 }, children: title }),
+    children
+  ] });
+}
+function ReadyToGoTextField({ value, onChange }) {
+  return /* @__PURE__ */ jsx("input", { "aria-label": "Ready-to-go text", value: typeof value === "string" ? value : "", onChange: (event) => onChange(event.target.value) });
+}
+function ReadyToGoQueryBlock(props) {
+  const runtime = useReadyToGoRuntime();
+  const [trackingNumber, setTrackingNumber] = useState(typeof props.defaultTrackingNumber === "string" ? props.defaultTrackingNumber : "BT-2048-DEMO");
+  const heading = typeof props.heading === "string" ? props.heading : "Track your order";
+  const submitLabel = typeof props.submitLabel === "string" ? props.submitLabel : "Track package";
+  const submit = (event) => {
+    event.preventDefault();
+    void runtime.query(trackingNumber);
+  };
+  return /* @__PURE__ */ jsxs("section", { "aria-label": "Ready-to-go tracking query", style: { ...cardStyle, maxWidth: 720, margin: "0 auto" }, children: [
+    /* @__PURE__ */ jsx("h1", { style: { marginTop: 0 }, children: heading }),
+    /* @__PURE__ */ jsxs("form", { onSubmit: submit, style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsx("input", { "aria-label": "Tracking number", value: trackingNumber, onChange: (event) => setTrackingNumber(event.target.value), required: true, minLength: 4, maxLength: 64, style: { flex: "1 1 220px", padding: 10, borderRadius: "var(--pb-radius)", border: "1px solid var(--pb-color-border)" } }),
+      /* @__PURE__ */ jsx("button", { type: "submit", disabled: runtime.phase === "loading", style: { padding: "10px 16px", border: 0, borderRadius: "var(--pb-radius)", background: "var(--pb-color-primary)", color: "white" }, children: runtime.phase === "loading" ? "Tracking\u2026" : submitLabel })
+    ] }),
+    runtime.phase === "error" ? /* @__PURE__ */ jsx("p", { role: "alert", children: runtime.error }) : null
+  ] });
+}
+function ReadyToGoProgressBlock(props) {
+  const runtime = useReadyToGoRuntime();
+  const heading = typeof props.heading === "string" ? props.heading : "Shipment progress";
+  return /* @__PURE__ */ jsx(ResultCard, { title: heading, children: runtime.phase === "success" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("strong", { children: runtime.result?.status }),
+    /* @__PURE__ */ jsx("p", { children: runtime.result?.latestEvent }),
+    /* @__PURE__ */ jsx("small", { children: runtime.result?.updatedAt })
+  ] }) : /* @__PURE__ */ jsx("p", { children: runtime.phase === "loading" ? "Loading shipment progress\u2026" : "Enter a tracking number to see shipment progress." }) });
+}
+function ReadyToGoDeliveryBlock(props) {
+  const runtime = useReadyToGoRuntime();
+  const heading = typeof props.heading === "string" ? props.heading : "Delivery information";
+  return /* @__PURE__ */ jsx(ResultCard, { title: heading, children: runtime.phase === "success" ? /* @__PURE__ */ jsxs("dl", { children: [
+    /* @__PURE__ */ jsx("dt", { children: "Carrier" }),
+    /* @__PURE__ */ jsx("dd", { children: runtime.result?.carrier ?? "Not available" }),
+    /* @__PURE__ */ jsx("dt", { children: "Delivery" }),
+    /* @__PURE__ */ jsx("dd", { children: runtime.result?.deliveryAddress ?? "Delivery details are not available." })
+  ] }) : /* @__PURE__ */ jsx("p", { children: "Delivery details will appear after a successful query." }) });
+}
+function ReadyToGoRecommendationsBlock(props) {
+  const runtime = useReadyToGoRuntime();
+  const heading = typeof props.heading === "string" ? props.heading : "You may also like";
+  const recommendations = runtime.result?.recommendations ?? [];
+  return /* @__PURE__ */ jsx(ResultCard, { title: heading, children: runtime.phase === "success" && recommendations.length > 0 ? /* @__PURE__ */ jsx("ul", { children: recommendations.map((item) => /* @__PURE__ */ jsxs("li", { children: [
+    /* @__PURE__ */ jsx("strong", { children: item.title }),
+    /* @__PURE__ */ jsx("br", {}),
+    /* @__PURE__ */ jsx("small", { children: item.description })
+  ] }, item.id)) }) : /* @__PURE__ */ jsx("p", { children: runtime.phase === "success" ? "No recommendations are available for this shipment." : "Recommendations appear with your shipment result." }) });
+}
+
+// src/ready-to-go-definition.ts
+import { createPageDocument } from "@standhigher/puck-page-builder/runtime";
+var readyToGoBlocks = [
+  { 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 } },
+  { 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 } },
+  { 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 } },
+  { 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 } }
+];
+function createReadyToGoTemplate() {
+  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: {} })) }) };
+}
+var bestTrackPageExtension = Object.freeze({ name: "besttrack.ready-to-go", version: "0.7.0", fields: [{ type: "besttrack.ready-to-go.text", component: ReadyToGoTextField }], blocks: readyToGoBlocks, templates: [createReadyToGoTemplate()] });
+
+// src/branded-definition.ts
+import { createPageDocument as createPageDocument2 } from "@standhigher/puck-page-builder/runtime";
+
+// src/branded.tsx
+import { createContext as createContext2, useCallback as useCallback2, useContext as useContext2, useMemo as useMemo2, useState as useState2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+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)" };
+var gridStyle = { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: "var(--pb-spacing)" };
+var initialRuntime2 = { phase: "idle", async query() {
+  return void 0;
+} };
+var BrandedRuntimeContext = createContext2(initialRuntime2);
+function BrandedRuntimeProvider({ children, queryTracking }) {
+  const [state, setState] = useState2({ phase: "idle" });
+  const query = useCallback2(async (trackingNumber) => {
+    setState({ phase: "loading" });
+    try {
+      setState({ phase: "success", result: await queryTracking(trackingNumber) });
+    } catch (error) {
+      setState({ phase: "error", error: error instanceof Error ? error.message : "tracking-query-failed" });
+    }
+  }, [queryTracking]);
+  const value = useMemo2(() => ({ ...state, query }), [query, state]);
+  return /* @__PURE__ */ jsx2(BrandedRuntimeContext.Provider, { value, children });
+}
+function text(props, key, fallback) {
+  return typeof props[key] === "string" ? props[key] : fallback;
+}
+function useBrandedRuntime() {
+  return useContext2(BrandedRuntimeContext);
+}
+function safeHref(value) {
+  if (typeof value !== "string") return "#";
+  if (value.startsWith("/")) return value;
+  try {
+    const url = new URL(value);
+    return url.protocol === "https:" || url.protocol === "http:" ? url.toString() : "#";
+  } catch {
+    return "#";
+  }
+}
+function Section({ title, children }) {
+  return /* @__PURE__ */ jsxs2("section", { "aria-label": title, style: cardStyle2, children: [
+    /* @__PURE__ */ jsx2("h2", { style: { marginTop: 0 }, children: title }),
+    children
+  ] });
+}
+function BrandedTextField({ value, onChange }) {
+  return /* @__PURE__ */ jsx2("input", { "aria-label": "Branded text", value: typeof value === "string" ? value : "", onChange: (event) => onChange(event.target.value) });
+}
+function BrandedAnnouncementBlock(props) {
+  const logoUrl = text(props, "logoUrl", "");
+  return /* @__PURE__ */ jsxs2("section", { "aria-label": "Branded announcement", style: { ...cardStyle2, display: "flex", alignItems: "center", gap: 12, background: "var(--pb-color-primary)", color: "white" }, children: [
+    logoUrl ? /* @__PURE__ */ jsx2("img", { src: logoUrl, alt: text(props, "brandName", "Brand"), style: { width: 36, height: 36, borderRadius: "50%", objectFit: "cover", background: "white" } }) : null,
+    /* @__PURE__ */ jsxs2("div", { children: [
+      /* @__PURE__ */ jsx2("strong", { children: text(props, "brandName", "BestTrack") }),
+      /* @__PURE__ */ jsx2("p", { style: { margin: "4px 0 0" }, children: text(props, "message", "Track every order with confidence.") })
+    ] })
+  ] });
+}
+function BrandedQueryBlock(props) {
+  const runtime = useBrandedRuntime();
+  const [trackingNumber, setTrackingNumber] = useState2(text(props, "defaultTrackingNumber", "BT-2048-DEMO"));
+  const submit = (event) => {
+    event.preventDefault();
+    void runtime.query(trackingNumber);
+  };
+  return /* @__PURE__ */ jsxs2("section", { "aria-label": "Branded tracking query", style: { ...cardStyle2, boxShadow: "0 16px 40px rgb(0 0 0 / 8%)" }, children: [
+    /* @__PURE__ */ jsx2("p", { style: { margin: 0, color: "var(--pb-color-muted)" }, children: text(props, "eyebrow", "ORDER SUPPORT") }),
+    /* @__PURE__ */ jsx2("h1", { style: { margin: "6px 0 16px" }, children: text(props, "heading", "Where is my order?") }),
+    /* @__PURE__ */ jsxs2("form", { onSubmit: submit, style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
+      /* @__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)" } }),
+      /* @__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") })
+    ] }),
+    runtime.phase === "error" ? /* @__PURE__ */ jsx2("p", { role: "alert", children: runtime.error }) : null
+  ] });
+}
+function BrandedOrderItemsBlock(props) {
+  const runtime = useBrandedRuntime();
+  const title = text(props, "heading", "Your order");
+  const items = runtime.result?.orderItems ?? [];
+  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: [
+    /* @__PURE__ */ jsx2("strong", { children: item.title }),
+    " \xB7 Qty ",
+    item.quantity
+  ] }, item.id)) }) : /* @__PURE__ */ jsx2("p", { children: runtime.phase === "loading" ? "Loading order items\u2026" : "Order items will appear after a successful query." }) });
+}
+function BrandedRecommendationsBlock(props) {
+  const runtime = useBrandedRuntime();
+  const title = text(props, "heading", "Selected for you");
+  const recommendations = runtime.result?.recommendations ?? [];
+  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: [
+    /* @__PURE__ */ jsx2("strong", { children: item.title }),
+    /* @__PURE__ */ jsx2("p", { children: item.description })
+  ] }, item.id)) }) : /* @__PURE__ */ jsx2("p", { children: runtime.phase === "success" ? "No recommendations are available for this order." : "Recommendations appear with your order result." }) });
+}
+function BrandedQuickLinksBlock(props) {
+  const title = text(props, "heading", "Need help?");
+  return /* @__PURE__ */ jsx2(Section, { title, children: /* @__PURE__ */ jsxs2("div", { style: gridStyle, children: [
+    /* @__PURE__ */ jsx2("a", { href: safeHref(props.primaryHref), style: { color: "var(--pb-color-primary)" }, children: text(props, "primaryLabel", "Shipping help") }),
+    /* @__PURE__ */ jsx2("a", { href: safeHref(props.secondaryHref), style: { color: "var(--pb-color-primary)" }, children: text(props, "secondaryLabel", "Contact us") })
+  ] }) });
+}
+function BrandedBlogBlock(props) {
+  const title = text(props, "heading", "From our journal");
+  return /* @__PURE__ */ jsx2(Section, { title, children: /* @__PURE__ */ jsxs2("article", { children: [
+    /* @__PURE__ */ jsx2("strong", { children: text(props, "articleTitle", "Delivery tips for every season") }),
+    /* @__PURE__ */ jsx2("p", { children: text(props, "excerpt", "Simple ways to make every delivery feel considered.") }),
+    /* @__PURE__ */ jsx2("a", { href: safeHref(props.articleHref), style: { color: "var(--pb-color-primary)" }, children: text(props, "linkLabel", "Read the story") })
+  ] }) });
+}
+
+// src/branded-definition.ts
+var text2 = (label) => ({ field: "besttrack.branded.text", label });
+var brandedBlocks = [
+  { 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 } },
+  { 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 } },
+  { 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 } },
+  { 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 } },
+  { 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 } },
+  { 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 } }
+];
+function createBrandedTemplate() {
+  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: {} })) }) };
+}
+var bestTrackBrandedExtension = Object.freeze({ name: "besttrack.branded", version: "0.7.1", fields: [{ type: "besttrack.branded.text", component: BrandedTextField }], blocks: brandedBlocks, templates: [createBrandedTemplate()] });
+
+// src/sales-definition.ts
+import { createPageDocument as createPageDocument3 } from "@standhigher/puck-page-builder/runtime";
+
+// src/sales.tsx
+import { createContext as createContext3, useCallback as useCallback3, useContext as useContext3, useMemo as useMemo3, useState as useState3 } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var initialRuntime3 = { phase: "idle", async query() {
+  return void 0;
+} };
+var SalesRuntimeContext = createContext3(initialRuntime3);
+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)" };
+var gridStyle2 = { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))", gap: "var(--pb-spacing)" };
+function SalesRuntimeProvider({ children, queryTracking }) {
+  const [state, setState] = useState3({ phase: "idle" });
+  const query = useCallback3(async (trackingNumber) => {
+    setState({ phase: "loading" });
+    try {
+      setState({ phase: "success", result: await queryTracking(trackingNumber) });
+    } catch (error) {
+      setState({ phase: "error", error: error instanceof Error ? error.message : "tracking-query-failed" });
+    }
+  }, [queryTracking]);
+  const value = useMemo3(() => ({ ...state, query }), [query, state]);
+  return /* @__PURE__ */ jsx3(SalesRuntimeContext.Provider, { value, children });
+}
+function useSalesRuntime() {
+  return useContext3(SalesRuntimeContext);
+}
+function text3(props, key, fallback) {
+  return typeof props[key] === "string" ? props[key] : fallback;
+}
+function safeHref2(value) {
+  if (typeof value !== "string") return "#";
+  if (value.startsWith("/")) return value;
+  try {
+    const url = new URL(value);
+    return url.protocol === "https:" || url.protocol === "http:" ? url.toString() : "#";
+  } catch {
+    return "#";
+  }
+}
+function Section2({ title, children }) {
+  return /* @__PURE__ */ jsxs3("section", { "aria-label": title, style: cardStyle3, children: [
+    /* @__PURE__ */ jsx3("h2", { style: { marginTop: 0 }, children: title }),
+    children
+  ] });
+}
+function resourceState(value) {
+  return typeof value !== "string" ? "invalid" : value.trim() ? "ready" : "empty";
+}
+function SalesTextField({ value, onChange }) {
+  return /* @__PURE__ */ jsx3("input", { "aria-label": "Sales text", value: typeof value === "string" ? value : "", onChange: (event) => onChange(event.target.value) });
+}
+function SalesAnnouncementBlock(props) {
+  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") }) });
+}
+function SalesQueryBlock(props) {
+  const runtime = useSalesRuntime();
+  const [trackingNumber, setTrackingNumber] = useState3(text3(props, "defaultTrackingNumber", "BT-2048-DEMO"));
+  const submit = (event) => {
+    event.preventDefault();
+    void runtime.query(trackingNumber);
+  };
+  return /* @__PURE__ */ jsxs3("section", { "aria-label": "Sales tracking query", style: { ...cardStyle3, boxShadow: "0 12px 32px rgb(0 0 0 / 8%)" }, children: [
+    /* @__PURE__ */ jsx3("h1", { style: { marginTop: 0 }, children: text3(props, "heading", "Track an order") }),
+    /* @__PURE__ */ jsxs3("form", { onSubmit: submit, style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
+      /* @__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)" } }),
+      /* @__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") })
+    ] }),
+    runtime.phase === "error" ? /* @__PURE__ */ jsxs3("p", { role: "alert", children: [
+      "We could not retrieve this order: ",
+      runtime.error
+    ] }) : null
+  ] });
+}
+function SalesOrderItemsBlock(props) {
+  const runtime = useSalesRuntime();
+  const title = text3(props, "heading", "Items in your order");
+  const items = runtime.result?.orderItems ?? [];
+  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: [
+    /* @__PURE__ */ jsx3("strong", { children: item.title }),
+    " \xB7 Qty ",
+    item.quantity
+  ] }, item.id)) }) : /* @__PURE__ */ jsx3("p", { children: runtime.phase === "loading" ? "Loading order items\u2026" : "Order items appear after a successful query." }) });
+}
+function SalesOtherTrackingBlock(props) {
+  const runtime = useSalesRuntime();
+  const title = text3(props, "heading", "Other shipments");
+  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." }) });
+}
+function SalesServiceCardsBlock(props) {
+  const title = text3(props, "heading", "Shop with confidence");
+  return /* @__PURE__ */ jsx3(Section2, { title, children: /* @__PURE__ */ jsxs3("div", { style: gridStyle2, children: [
+    /* @__PURE__ */ jsxs3("article", { children: [
+      /* @__PURE__ */ jsx3("strong", { children: text3(props, "firstTitle", "Easy returns") }),
+      /* @__PURE__ */ jsx3("p", { children: text3(props, "firstDescription", "Simple support when plans change.") })
+    ] }),
+    /* @__PURE__ */ jsxs3("article", { children: [
+      /* @__PURE__ */ jsx3("strong", { children: text3(props, "secondTitle", "Secure delivery") }),
+      /* @__PURE__ */ jsx3("p", { children: text3(props, "secondDescription", "Follow every milestone in one place.") })
+    ] })
+  ] }) });
+}
+function SalesProductCategoriesBlock(props) {
+  const title = text3(props, "heading", "Shop by category");
+  const collectionId = text3(props, "collectionId", "");
+  const state = resourceState(collectionId);
+  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: [
+    /* @__PURE__ */ jsx3("a", { href: safeHref2(props.collectionHref), style: { color: "var(--pb-color-primary)" }, children: text3(props, "collectionLabel", "Featured collection") }),
+    /* @__PURE__ */ jsxs3("small", { children: [
+      "Collection reference: ",
+      collectionId
+    ] })
+  ] }) });
+}
+function SalesRecommendationsBlock(props) {
+  const runtime = useSalesRuntime();
+  const title = text3(props, "heading", "Complete your order");
+  const recommendations = runtime.result?.recommendations ?? [];
+  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: [
+    /* @__PURE__ */ jsx3("strong", { children: item.title }),
+    /* @__PURE__ */ jsx3("p", { children: item.description })
+  ] }, item.id)) }) : /* @__PURE__ */ jsx3("p", { children: runtime.phase === "success" ? "No recommendations are available for this order." : "Recommended products appear with your order result." }) });
+}
+
+// src/sales-definition.ts
+var text4 = (label) => ({ field: "besttrack.sales.text", label });
+var salesBlocks = [
+  { 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 } },
+  { 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 } },
+  { 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 } },
+  { 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 } },
+  { 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 } },
+  { 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 } },
+  { 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 } }
+];
+function createSalesTemplate() {
+  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: {} })) }) };
+}
+var bestTrackSalesExtension = Object.freeze({ name: "besttrack.sales", version: "0.7.2", fields: [{ type: "besttrack.sales.text", component: SalesTextField }], blocks: salesBlocks, templates: [createSalesTemplate()] });
+export {
+  BrandedRuntimeProvider,
+  ReadyToGoRuntimeProvider,
+  SalesRuntimeProvider,
+  bestTrackBrandedExtension,
+  bestTrackPageExtension,
+  bestTrackSalesExtension,
+  createBrandedTemplate,
+  createReadyToGoTemplate,
+  createSalesTemplate
+};

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@standhigher/besttrack-page-extension",
+  "version": "0.1.0",
+  "description": "BestTrack business extension entry point for @standhigher/puck-page-builder.",
+  "type": "module",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "dependencies": {
+    "@standhigher/puck-page-builder": "0.7.2"
+  },
+  "devDependencies": {
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean",
+    "typecheck": "tsc --noEmit"
+  }
+}