@behio/storefront-sdk 1.8.0 → 1.9.0

package/dist/react.mjs

@@ -194,6 +194,21 @@ var BehioStorefront = class {
       body: input
     });
   }
+  /**
+   * Visitor messages from merchant automations (storefront.event action).
+   * Consent-gated visitor id; each message carries a merchant-defined `name`
+   * and free-form `payload` the template reacts to (modal, banner, ...).
+   * Messages stay listed until acknowledged via `ackVisitorMessage`.
+   */
+  async getVisitorMessages(visitorId) {
+    return this.request("GET", "/messages", { query: { visitorId } });
+  }
+  /** Acknowledge a visitor message so it is not delivered again. */
+  async ackVisitorMessage(messageId, visitorId) {
+    return this.request("POST", `/messages/${messageId}/ack`, {
+      query: { visitorId }
+    });
+  }
   /** Get basic shop info */
   async getShopInfo() {
     return this.request("GET", "/shop");
@@ -3133,11 +3148,78 @@ function usePersonalOffers(options) {
   };
 }
 
+// src/react/hooks/use-visitor-messages.ts
+import { useCallback as useCallback9, useEffect as useEffect5, useRef as useRef3, useState as useState6 } from "react";
+import { useQuery as useQuery27, useQueryClient as useQueryClient13 } from "@tanstack/react-query";
+function useVisitorMessages(options) {
+  const { client } = useBehio();
+  const queryClient = useQueryClient13();
+  const [polledVid, setPolledVid] = useState6(null);
+  const seenRef = useRef3(/* @__PURE__ */ new Set());
+  const explicitVid = options?.visitorId;
+  useEffect5(() => {
+    if (explicitVid) return;
+    const read = () => {
+      const vid = client.getAnalyticsVisitorId();
+      if (vid) setPolledVid(vid);
+      return vid;
+    };
+    if (read()) return;
+    const timer = setInterval(() => {
+      if (read()) clearInterval(timer);
+    }, 3e3);
+    return () => clearInterval(timer);
+  }, [client, explicitVid]);
+  const visitorId = explicitVid ?? polledVid;
+  const pollMs = options?.pollMs ?? 3e4;
+  const queryKey = ["behio", "visitor-messages", visitorId ?? ""];
+  const { data, isLoading, error, refetch } = useQuery27({
+    queryKey,
+    queryFn: () => unwrap(client.getVisitorMessages(visitorId)),
+    enabled: options?.enabled !== false && !!visitorId,
+    refetchInterval: pollMs > 0 ? pollMs : false
+  });
+  const ack = useCallback9(
+    async (messageId) => {
+      if (!visitorId) return false;
+      const result = await unwrap(client.ackVisitorMessage(messageId, visitorId));
+      queryClient.setQueryData(
+        queryKey,
+        (prev) => prev ? { items: prev.items.filter((m) => m.id !== messageId) } : prev
+      );
+      return result.ok;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [client, visitorId, queryClient]
+  );
+  const onMessage = options?.onMessage;
+  const dispatchDom = options?.dispatchDomEvents !== false;
+  useEffect5(() => {
+    for (const message of data?.items ?? []) {
+      if (seenRef.current.has(message.id)) continue;
+      seenRef.current.add(message.id);
+      if (dispatchDom && typeof window !== "undefined") {
+        window.dispatchEvent(new CustomEvent("behio:visitor-message", { detail: message }));
+      }
+      onMessage?.(message);
+    }
+  }, [data, onMessage, dispatchDom]);
+  return {
+    messages: data?.items ?? [],
+    isLoading,
+    error,
+    refetch,
+    /** Mark a message as shown; it will not be delivered again. */
+    ack,
+    visitorId
+  };
+}
+
 // src/react/hooks/use-analytics-events.ts
-import { useCallback as useCallback9 } from "react";
+import { useCallback as useCallback10 } from "react";
 function useAnalyticsEvents() {
   const { client } = useBehio();
-  const track = useCallback9(
+  const track = useCallback10(
     (events, opts) => {
       const list = Array.isArray(events) ? events : [events];
       if (list.length === 0) return Promise.resolve();
@@ -3149,7 +3231,7 @@ function useAnalyticsEvents() {
     },
     [client]
   );
-  const trackEvent = useCallback9(
+  const trackEvent = useCallback10(
     (name, props) => track({ type: "custom", name, props }),
     [track]
   );
@@ -3179,12 +3261,12 @@ function useNewsletterUnsubscribe() {
 }
 
 // src/react/hooks/use-orders.ts
-import { useCallback as useCallback10, useMemo as useMemo3, useState as useState6 } from "react";
+import { useCallback as useCallback11, useMemo as useMemo3, useState as useState7 } from "react";
 import { useInfiniteQuery as useInfiniteQuery2 } from "@tanstack/react-query";
 function useOrders(options) {
   const { client } = useBehio();
   const { page: initialPage, limit, enabled } = options ?? {};
-  const [page, setPage] = useState6(initialPage ?? 1);
+  const [page, setPage] = useState7(initialPage ?? 1);
   const infinite = useInfiniteQuery2({
     queryKey: ["behio", "orders", limit, page],
     queryFn: ({ pageParam }) => unwrap(client.orders.list({ limit, page: pageParam })),
@@ -3198,13 +3280,13 @@ function useOrders(options) {
     [infinite.data]
   );
   const lastPage = infinite.data?.pages[infinite.data.pages.length - 1];
-  const loadMore = useCallback10(() => {
+  const loadMore = useCallback11(() => {
     if (infinite.hasNextPage && !infinite.isFetchingNextPage) {
       return infinite.fetchNextPage();
     }
     return Promise.resolve();
   }, [infinite]);
-  const goToPage = useCallback10((newPage) => {
+  const goToPage = useCallback11((newPage) => {
     setPage(newPage);
   }, []);
   return {
@@ -3230,16 +3312,16 @@ function useOrders(options) {
 }
 
 // src/react/hooks/use-order.ts
-import { useCallback as useCallback11 } from "react";
-import { useQuery as useQuery27, useMutation as useMutation12, useQueryClient as useQueryClient13 } from "@tanstack/react-query";
+import { useCallback as useCallback12 } from "react";
+import { useQuery as useQuery28, useMutation as useMutation12, useQueryClient as useQueryClient14 } from "@tanstack/react-query";
 function useOrder(orderNumber, options) {
   const { client } = useBehio();
-  const queryClient = useQueryClient13();
+  const queryClient = useQueryClient14();
   const {
     data,
     isLoading,
     error
-  } = useQuery27({
+  } = useQuery28({
     queryKey: ["behio", "order", orderNumber],
     queryFn: () => unwrap(client.orders.get(orderNumber)),
     enabled: options?.enabled !== false && !!orderNumber && !!client.getAccessToken()
@@ -3251,7 +3333,7 @@ function useOrder(orderNumber, options) {
       queryClient.invalidateQueries({ queryKey: ["behio", "orders"] });
     }
   });
-  const cancel = useCallback11(
+  const cancel = useCallback12(
     () => cancelMutation.mutateAsync(),
     [cancelMutation]
   );
@@ -3265,14 +3347,14 @@ function useOrder(orderNumber, options) {
 }
 
 // src/react/hooks/use-order-access.ts
-import { useCallback as useCallback12, useState as useState7 } from "react";
+import { useCallback as useCallback13, useState as useState8 } from "react";
 import { useMutation as useMutation13 } from "@tanstack/react-query";
 function useOrderAccess() {
   const { client } = useBehio();
-  const [orderNumber, setOrderNumber] = useState7(null);
-  const [email, setEmail] = useState7(null);
-  const [order, setOrder] = useState7(null);
-  const [accessToken, setAccessToken] = useState7(null);
+  const [orderNumber, setOrderNumber] = useState8(null);
+  const [email, setEmail] = useState8(null);
+  const [order, setOrder] = useState8(null);
+  const [accessToken, setAccessToken] = useState8(null);
   const requestMutation = useMutation13({
     mutationFn: (input) => unwrap(client.orders.requestAccessCode(input.orderNumber, input.email)),
     onSuccess: (_data, input) => {
@@ -3292,12 +3374,12 @@ function useOrderAccess() {
       setAccessToken(result.accessToken);
     }
   });
-  const requestCode = useCallback12(
+  const requestCode = useCallback13(
     (on, em) => requestMutation.mutateAsync({ orderNumber: on, email: em }),
     [requestMutation]
   );
-  const verifyCode = useCallback12((code) => verifyMutation.mutateAsync(code), [verifyMutation]);
-  const reset = useCallback12(() => {
+  const verifyCode = useCallback13((code) => verifyMutation.mutateAsync(code), [verifyMutation]);
+  const reset = useCallback13(() => {
     setOrderNumber(null);
     setEmail(null);
     setOrder(null);
@@ -3325,12 +3407,12 @@ function useOrderAccess() {
 }
 
 // src/react/hooks/use-checkout.ts
-import { useState as useState8, useCallback as useCallback13 } from "react";
-import { useMutation as useMutation14, useQueryClient as useQueryClient14 } from "@tanstack/react-query";
+import { useState as useState9, useCallback as useCallback14 } from "react";
+import { useMutation as useMutation14, useQueryClient as useQueryClient15 } from "@tanstack/react-query";
 function useCheckout() {
   const { client, storage } = useBehio();
-  const queryClient = useQueryClient14();
-  const [order, setOrder] = useState8(null);
+  const queryClient = useQueryClient15();
+  const [order, setOrder] = useState9(null);
   const mutation = useMutation14({
     mutationFn: (input) => unwrap(client.checkout.createOrder(input)),
     onSuccess: (result) => {
@@ -3340,11 +3422,11 @@ function useCheckout() {
       queryClient.invalidateQueries({ queryKey: ["behio", "orders"] });
     }
   });
-  const createOrder = useCallback13(
+  const createOrder = useCallback14(
     (input) => mutation.mutateAsync(input),
     [mutation]
   );
-  const reset = useCallback13(() => {
+  const reset = useCallback14(() => {
     setOrder(null);
     mutation.reset();
   }, [mutation]);
@@ -3358,10 +3440,10 @@ function useCheckout() {
 }
 
 // src/react/hooks/use-pages.ts
-import { useQuery as useQuery28 } from "@tanstack/react-query";
+import { useQuery as useQuery29 } from "@tanstack/react-query";
 function usePages(locale, options) {
   const { client } = useBehio();
-  return useQuery28({
+  return useQuery29({
     queryKey: ["behio", "pages", locale],
     queryFn: async () => {
       const result = await unwrap(client.pages.list(locale));
@@ -3372,7 +3454,7 @@ function usePages(locale, options) {
 }
 function usePage(slug, locale, options) {
   const { client } = useBehio();
-  return useQuery28({
+  return useQuery29({
     queryKey: ["behio", "page", slug, locale],
     queryFn: () => unwrap(client.pages.get(slug, locale)),
     enabled: options?.enabled !== false && !!slug
@@ -3380,10 +3462,10 @@ function usePage(slug, locale, options) {
 }
 
 // src/react/hooks/use-shop-info.ts
-import { useQuery as useQuery29 } from "@tanstack/react-query";
+import { useQuery as useQuery30 } from "@tanstack/react-query";
 function useShopInfo(options) {
   const { client } = useBehio();
-  return useQuery29({
+  return useQuery30({
     queryKey: ["behio", "shop-info"],
     queryFn: () => unwrap(client.getShopInfo()),
     enabled: options?.enabled !== false
@@ -3391,10 +3473,10 @@ function useShopInfo(options) {
 }
 
 // src/react/hooks/use-shop-scripts.ts
-import { useQuery as useQuery30 } from "@tanstack/react-query";
+import { useQuery as useQuery31 } from "@tanstack/react-query";
 function useShopScripts(options) {
   const { client } = useBehio();
-  return useQuery30({
+  return useQuery31({
     queryKey: ["behio", "shop-scripts"],
     queryFn: () => unwrap(client.getShopScripts()),
     enabled: options?.enabled !== false
@@ -3402,11 +3484,11 @@ function useShopScripts(options) {
 }
 
 // src/react/hooks/use-shop-seo.ts
-import { useQuery as useQuery31 } from "@tanstack/react-query";
+import { useQuery as useQuery32 } from "@tanstack/react-query";
 function useShopSeo(options) {
   const { client } = useBehio();
   const { locale, initialData, enabled = true } = options ?? {};
-  return useQuery31({
+  return useQuery32({
     queryKey: ["behio", "shop-seo", locale ?? "_default"],
     queryFn: () => unwrap(client.getShopSeo(locale)),
     initialData,
@@ -3466,14 +3548,14 @@ function CurrencySwitcher({
 }
 
 // src/react/components/storefront-scripts.tsx
-import { useEffect as useEffect5, useMemo as useMemo4, useState as useState9 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo4, useState as useState10 } from "react";
 
 // src/react/hooks/use-consent.ts
-import { useQuery as useQuery32, useMutation as useMutation15, useQueryClient as useQueryClient15 } from "@tanstack/react-query";
+import { useQuery as useQuery33, useMutation as useMutation15, useQueryClient as useQueryClient16 } from "@tanstack/react-query";
 function useCookieConsent(visitorId) {
   const { client } = useBehio();
-  const qc = useQueryClient15();
-  const query = useQuery32({
+  const qc = useQueryClient16();
+  const query = useQuery33({
     queryKey: ["behio", "consent", visitorId],
     queryFn: () => unwrap(client.consent.get(visitorId)),
     enabled: Boolean(visitorId)
@@ -3556,8 +3638,8 @@ function injectHtml(target, html) {
 }
 function StorefrontScripts({ visitorId: visitorIdProp } = {}) {
   const { data } = useShopScripts();
-  const [visitorId, setVisitorId] = useState9(visitorIdProp ?? "");
-  useEffect5(() => {
+  const [visitorId, setVisitorId] = useState10(visitorIdProp ?? "");
+  useEffect6(() => {
     if (visitorIdProp) return;
     try {
       const v = localStorage.getItem(VISITOR_KEY);
@@ -3575,7 +3657,7 @@ function StorefrontScripts({ visitorId: visitorIdProp } = {}) {
     () => JSON.stringify(scripts.map((s) => [s.id, s.type, s.placement, s.value])),
     [scripts]
   );
-  useEffect5(() => {
+  useEffect6(() => {
     if (typeof document === "undefined") return;
     const added = [];
     for (const s of scripts) {
@@ -3592,7 +3674,7 @@ function StorefrontScripts({ visitorId: visitorIdProp } = {}) {
 }
 
 // src/react/components/behio-analytics.tsx
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect7 } from "react";
 
 // src/react/hooks/use-behio-client.ts
 function useBehioClient() {
@@ -3602,7 +3684,7 @@ function useBehioClient() {
 // src/react/components/behio-analytics.tsx
 function BehioAnalyticsTracker() {
   const client = useBehioClient();
-  useEffect6(() => {
+  useEffect7(() => {
     if (typeof window === "undefined") return;
     const w = window;
     if (w.__behioAnalytics) return;
@@ -3841,10 +3923,10 @@ function utmFromSearch(search) {
 }
 
 // src/react/hooks/use-bundles.ts
-import { useQuery as useQuery33 } from "@tanstack/react-query";
+import { useQuery as useQuery34 } from "@tanstack/react-query";
 function useBundles(options) {
   const { client } = useBehio();
-  return useQuery33({
+  return useQuery34({
     queryKey: ["behio", "bundles"],
     queryFn: () => unwrap(client.catalog.getBundles()),
     enabled: options?.enabled ?? true,
@@ -3853,7 +3935,7 @@ function useBundles(options) {
 }
 function useBundle(slug, options) {
   const { client } = useBehio();
-  return useQuery33({
+  return useQuery34({
     queryKey: ["behio", "bundle", slug],
     queryFn: () => unwrap(client.catalog.getBundle(slug)),
     enabled: Boolean(slug) && (options?.enabled ?? true),
@@ -3862,10 +3944,10 @@ function useBundle(slug, options) {
 }
 
 // src/react/hooks/use-product-group.ts
-import { useQuery as useQuery34 } from "@tanstack/react-query";
+import { useQuery as useQuery35 } from "@tanstack/react-query";
 function useProductGroup(slug, options) {
   const { client } = useBehio();
-  return useQuery34({
+  return useQuery35({
     queryKey: ["behio", "product-group", slug, options?.locale, options?.currency],
     queryFn: () => unwrap(
       client.catalog.getProductGroup(slug, {
@@ -3879,10 +3961,10 @@ function useProductGroup(slug, options) {
 }
 
 // src/react/hooks/use-cross-sell.ts
-import { useQuery as useQuery35 } from "@tanstack/react-query";
+import { useQuery as useQuery36 } from "@tanstack/react-query";
 function useCrossSell(productSlug, options) {
   const { client } = useBehio();
-  return useQuery35({
+  return useQuery36({
     queryKey: ["behio", "cross-sell", productSlug, options?.locale, options?.currency],
     queryFn: () => unwrap(
       client.catalog.getCrossSell(productSlug, {
@@ -3896,10 +3978,10 @@ function useCrossSell(productSlug, options) {
 }
 
 // src/react/hooks/use-product-promotions.ts
-import { useQuery as useQuery36 } from "@tanstack/react-query";
+import { useQuery as useQuery37 } from "@tanstack/react-query";
 function useProductPromotions(productSlug, options) {
   const { client } = useBehio();
-  return useQuery36({
+  return useQuery37({
     queryKey: ["behio", "product-promotions", productSlug],
     queryFn: () => unwrap(client.catalog.getProductPromotions(productSlug)),
     enabled: Boolean(productSlug) && (options?.enabled ?? true),
@@ -3908,11 +3990,11 @@ function useProductPromotions(productSlug, options) {
 }
 
 // src/react/hooks/use-gift-card.ts
-import { useQuery as useQuery37 } from "@tanstack/react-query";
+import { useQuery as useQuery38 } from "@tanstack/react-query";
 function useGiftCardBalance(code, options) {
   const { client } = useBehio();
   const trimmed = code?.trim();
-  return useQuery37({
+  return useQuery38({
     queryKey: ["behio", "gift-card-balance", trimmed],
     queryFn: () => unwrap(client.catalog.checkGiftCard(trimmed)),
     enabled: Boolean(trimmed && trimmed.length >= 6) && (options?.enabled ?? true)
@@ -3920,11 +4002,11 @@ function useGiftCardBalance(code, options) {
 }
 
 // src/react/hooks/use-wishlist.ts
-import { useQuery as useQuery38, useMutation as useMutation16, useQueryClient as useQueryClient16 } from "@tanstack/react-query";
+import { useQuery as useQuery39, useMutation as useMutation16, useQueryClient as useQueryClient17 } from "@tanstack/react-query";
 function useWishlist(options) {
   const { client } = useBehio();
-  const qc = useQueryClient16();
-  const query = useQuery38({
+  const qc = useQueryClient17();
+  const query = useQuery39({
     queryKey: ["behio", "wishlist"],
     queryFn: () => unwrap(client.wishlist.get()),
     enabled: options?.enabled ?? true
@@ -3947,7 +4029,7 @@ function useWishlist(options) {
 }
 function useIsInWishlist(productId) {
   const { client } = useBehio();
-  return useQuery38({
+  return useQuery39({
     queryKey: ["behio", "wishlist-check", productId],
     queryFn: () => unwrap(client.wishlist.isInWishlist(productId)),
     enabled: Boolean(productId)
@@ -3955,10 +4037,10 @@ function useIsInWishlist(productId) {
 }
 
 // src/react/hooks/use-reviews.ts
-import { useQuery as useQuery39, useMutation as useMutation17, useQueryClient as useQueryClient17 } from "@tanstack/react-query";
+import { useQuery as useQuery40, useMutation as useMutation17, useQueryClient as useQueryClient18 } from "@tanstack/react-query";
 function useProductReviews(productId, options) {
   const { client } = useBehio();
-  return useQuery39({
+  return useQuery40({
     queryKey: ["behio", "reviews", productId, options?.page ?? 1],
     queryFn: () => unwrap(client.reviews.getProductReviews(productId, options?.page, options?.limit)),
     enabled: Boolean(productId) && (options?.enabled ?? true)
@@ -3966,7 +4048,7 @@ function useProductReviews(productId, options) {
 }
 function useSubmitReview() {
   const { client } = useBehio();
-  const qc = useQueryClient17();
+  const qc = useQueryClient18();
   return useMutation17({
     mutationFn: (input) => unwrap(client.reviews.submit(input)),
     onSuccess: (_, input) => qc.invalidateQueries({ queryKey: ["behio", "reviews", input.productId] })
@@ -3974,7 +4056,7 @@ function useSubmitReview() {
 }
 
 // src/react/hooks/use-returns.ts
-import { useQuery as useQuery40, useMutation as useMutation18 } from "@tanstack/react-query";
+import { useQuery as useQuery41, useMutation as useMutation18 } from "@tanstack/react-query";
 function useLookupReturnableOrder() {
   const { client } = useBehio();
   return useMutation18({
@@ -3989,7 +4071,7 @@ function useSubmitReturn() {
 }
 function useReturnStatus(returnId, email) {
   const { client } = useBehio();
-  return useQuery40({
+  return useQuery41({
     queryKey: ["behio", "return-status", returnId],
     queryFn: () => unwrap(client.returns.getStatus(returnId, email)),
     enabled: Boolean(returnId && email)
@@ -3997,7 +4079,7 @@ function useReturnStatus(returnId, email) {
 }
 
 // src/react/hooks/use-quotes.ts
-import { useMutation as useMutation19, useQuery as useQuery41 } from "@tanstack/react-query";
+import { useMutation as useMutation19, useQuery as useQuery42 } from "@tanstack/react-query";
 function useSubmitQuote() {
   const { client } = useBehio();
   return useMutation19({
@@ -4006,7 +4088,7 @@ function useSubmitQuote() {
 }
 function useQuoteStatus(quoteId, email) {
   const { client } = useBehio();
-  return useQuery41({
+  return useQuery42({
     queryKey: ["behio", "quote-status", quoteId],
     queryFn: () => unwrap(client.quotes.getStatus(quoteId, email)),
     enabled: Boolean(quoteId && email)
@@ -4210,5 +4292,6 @@ export {
   useSubmitReturn,
   useSubmitReview,
   useSubscriptions,
+  useVisitorMessages,
   useWishlist
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@behio/storefront-sdk",
-  "version": "1.8.0",
-  "description": "TypeScript SDK for Behio Headless E-Shop — core client + React hooks",
+  "version": "1.9.0",
+  "description": "TypeScript SDK for Behio Headless E-Shop \u2014 core client + React hooks",
   "author": "Behio",
   "license": "MIT",
   "main": "./dist/index.js",