@behio/storefront-sdk 0.10.0 → 0.12.0

package/dist/react.mjs

@@ -1,9 +1,9 @@
 import {
   BehioStorefront
-} from "./chunk-O3IM7PAY.mjs";
+} from "./chunk-XITY2WQN.mjs";
 
 // src/react/provider.tsx
-import { useRef, useEffect, useMemo } from "react";
+import { useRef, useEffect, useMemo, useState, useCallback } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 // src/react/context.ts
@@ -97,7 +97,9 @@ function resolveStorage(option) {
 var STORAGE_KEYS = {
   ACCESS_TOKEN: "behio_access_token",
   REFRESH_TOKEN: "behio_refresh_token",
-  CART_SESSION: "behio_cart_session"
+  CART_SESSION: "behio_cart_session",
+  /** Shopper's chosen currency. Cookie so SSR (getBehio) reads the same value. */
+  CURRENCY: "behio_currency"
 };
 
 // src/react/provider.tsx
@@ -105,20 +107,37 @@ import { jsx } from "react/jsx-runtime";
 function BehioProvider({
   apiKey,
   baseUrl,
+  shopDomain,
   locale,
   currency,
+  defaultCurrency,
+  currencies,
+  onCurrencyChange,
+  persistCurrency = true,
+  currencyCookieName = STORAGE_KEYS.CURRENCY,
   storage: storageOption,
   queryClient: externalQueryClient,
   children
 }) {
   const storageAdapter = useMemo(() => resolveStorage(storageOption), [storageOption]);
+  const resolveInitialCurrency = () => {
+    if (persistCurrency) {
+      const stored = cookieStorage.get(currencyCookieName);
+      if (stored) return stored;
+    }
+    return currency;
+  };
+  const [activeCurrency, setActiveCurrency] = useState(resolveInitialCurrency);
   const clientRef = useRef(null);
   if (!clientRef.current) {
     clientRef.current = new BehioStorefront({
       apiKey,
       baseUrl,
+      ...shopDomain ? { shopDomain } : {},
       locale,
-      currency
+      // Seed with the resolved active currency so the very first request (even
+      // before effects run) carries it.
+      ...activeCurrency ? { currency: activeCurrency } : {}
     });
   }
   const client = clientRef.current;
@@ -133,6 +152,20 @@ function BehioProvider({
       client.setCartSession(cartSession);
     }
   }, [client, storageAdapter]);
+  useEffect(() => {
+    if (!persistCurrency) return;
+    const stored = cookieStorage.get(currencyCookieName);
+    if (stored && stored !== activeCurrency) {
+      setActiveCurrency(stored);
+      client.setCurrency(stored);
+    }
+  }, []);
+  useEffect(() => {
+    if (currency !== void 0 && currency !== activeCurrency) {
+      setActiveCurrency(currency);
+      client.setCurrency(currency);
+    }
+  }, [currency]);
   const queryClientRef = useRef(null);
   const qc = useMemo(() => {
     if (externalQueryClient) return externalQueryClient;
@@ -148,15 +181,35 @@ function BehioProvider({
     }
     return queryClientRef.current;
   }, [externalQueryClient]);
+  const setCurrency = useCallback(
+    (next) => {
+      setActiveCurrency(next);
+      client.setCurrency(next);
+      if (persistCurrency) {
+        if (next) cookieStorage.set(currencyCookieName, next);
+        else cookieStorage.remove(currencyCookieName);
+      }
+      onCurrencyChange?.(next);
+      void qc.invalidateQueries({ queryKey: ["behio"] });
+    },
+    [client, qc, persistCurrency, currencyCookieName, onCurrencyChange]
+  );
   const ctxValue = useMemo(
-    () => ({ client, storage: storageAdapter }),
-    [client, storageAdapter]
+    () => ({
+      client,
+      storage: storageAdapter,
+      currency: activeCurrency,
+      setCurrency,
+      configuredDefaultCurrency: defaultCurrency,
+      configuredCurrencies: currencies
+    }),
+    [client, storageAdapter, activeCurrency, setCurrency, defaultCurrency, currencies]
   );
   return /* @__PURE__ */ jsx(QueryClientProvider, { client: qc, children: /* @__PURE__ */ jsx(BehioContext.Provider, { value: ctxValue, children }) });
 }
 
 // src/react/hooks/use-products.ts
-import { useCallback, useMemo as useMemo2, useState } from "react";
+import { useCallback as useCallback2, useMemo as useMemo2, useState as useState2 } from "react";
 import { useInfiniteQuery } from "@tanstack/react-query";
 
 // src/react/utils/unwrap.ts
@@ -177,7 +230,7 @@ async function unwrap(p) {
 function useProducts(query) {
   const { client } = useBehio();
   const { initialData, enabled, page: initialPage, limit, ...filters } = query ?? {};
-  const [page, setPage] = useState(initialPage ?? 1);
+  const [page, setPage] = useState2(initialPage ?? 1);
   const serializedFilters = useMemo2(() => JSON.stringify({ ...filters, limit }), [filters, limit]);
   const infinite = useInfiniteQuery({
     queryKey: ["behio", "products", serializedFilters, page],
@@ -194,13 +247,13 @@ function useProducts(query) {
   );
   const lastPage = infinite.data?.pages[infinite.data.pages.length - 1];
   const firstPage = infinite.data?.pages[0];
-  const loadMore = useCallback(() => {
+  const loadMore = useCallback2(() => {
     if (infinite.hasNextPage && !infinite.isFetchingNextPage) {
       return infinite.fetchNextPage();
     }
     return Promise.resolve();
   }, [infinite]);
-  const goToPage = useCallback((newPage) => {
+  const goToPage = useCallback2((newPage) => {
     setPage(newPage);
   }, []);
   return {
@@ -243,7 +296,9 @@ import { useQuery } from "@tanstack/react-query";
 function useProduct(slug, options) {
   const { client } = useBehio();
   return useQuery({
-    queryKey: ["behio", "product", slug],
+    // currency + locale belong in the key so switching either refetches the
+    // price/translation instead of serving a stale cache hit.
+    queryKey: ["behio", "product", slug, options?.locale, options?.currency],
     queryFn: () => unwrap(client.catalog.getProduct(slug, {
       locale: options?.locale,
       currency: options?.currency
@@ -319,12 +374,12 @@ function useFilters(options) {
 }
 
 // src/react/hooks/use-search.ts
-import { useState as useState2, useEffect as useEffect2 } from "react";
+import { useState as useState3, useEffect as useEffect2 } from "react";
 import { useQuery as useQuery6 } from "@tanstack/react-query";
 function useSearch(query, options) {
   const { client } = useBehio();
   const debounceMs = options?.debounceMs ?? 300;
-  const [debouncedQuery, setDebouncedQuery] = useState2(query);
+  const [debouncedQuery, setDebouncedQuery] = useState3(query);
   useEffect2(() => {
     if (debounceMs <= 0) {
       setDebouncedQuery(query);
@@ -344,7 +399,7 @@ function useSearch(query, options) {
 }
 
 // src/react/hooks/use-cart.ts
-import { useCallback as useCallback2 } from "react";
+import { useCallback as useCallback3 } from "react";
 import { useQuery as useQuery7, useMutation, useQueryClient } from "@tanstack/react-query";
 var CART_KEY = ["behio", "cart"];
 function useCart(options) {
@@ -453,31 +508,31 @@ function useCart(options) {
       storage.remove(STORAGE_KEYS.CART_SESSION);
     }
   });
-  const addItem = useCallback2(
+  const addItem = useCallback3(
     (productId, quantity) => addMutation.mutateAsync({ productId, quantity }),
     [addMutation]
   );
-  const updateQuantity = useCallback2(
+  const updateQuantity = useCallback3(
     (itemId, quantity) => updateMutation.mutateAsync({ itemId, quantity }),
     [updateMutation]
   );
-  const removeItem = useCallback2(
+  const removeItem = useCallback3(
     (itemId) => removeMutation.mutateAsync(itemId),
     [removeMutation]
   );
-  const clear = useCallback2(
+  const clear = useCallback3(
     () => clearMutation.mutateAsync(),
     [clearMutation]
   );
-  const applyDiscount = useCallback2(
+  const applyDiscount = useCallback3(
     (code) => applyDiscountMutation.mutateAsync(code),
     [applyDiscountMutation]
   );
-  const removeDiscount = useCallback2(
+  const removeDiscount = useCallback3(
     () => removeDiscountMutation.mutateAsync(),
     [removeDiscountMutation]
   );
-  const merge = useCallback2(
+  const merge = useCallback3(
     () => mergeMutation.mutateAsync(),
     [mergeMutation]
   );
@@ -520,7 +575,7 @@ function useCartCount(options) {
 }
 
 // src/react/hooks/use-auth.ts
-import { useCallback as useCallback3 } from "react";
+import { useCallback as useCallback4 } from "react";
 import { useQuery as useQuery9, useMutation as useMutation2, useQueryClient as useQueryClient3 } from "@tanstack/react-query";
 var CUSTOMER_KEY = ["behio", "customer"];
 var CART_KEY3 = ["behio", "cart"];
@@ -536,7 +591,7 @@ function useAuth() {
     queryFn: () => unwrap(client.customer.getProfile()),
     enabled: isLoggedIn
   });
-  const persistTokens = useCallback3(
+  const persistTokens = useCallback4(
     (tokens) => {
       client.setTokens(tokens);
       storage.set(STORAGE_KEYS.ACCESS_TOKEN, tokens.accessToken);
@@ -544,7 +599,7 @@ function useAuth() {
     },
     [client, storage]
   );
-  const clearAuth = useCallback3(() => {
+  const clearAuth = useCallback4(() => {
     client.clearTokens();
     storage.remove(STORAGE_KEYS.ACCESS_TOKEN);
     storage.remove(STORAGE_KEYS.REFRESH_TOKEN);
@@ -552,7 +607,7 @@ function useAuth() {
     queryClient.invalidateQueries({ queryKey: ["behio", "orders"] });
     queryClient.invalidateQueries({ queryKey: ["behio", "addresses"] });
   }, [client, storage, queryClient]);
-  const postAuth = useCallback3(async () => {
+  const postAuth = useCallback4(async () => {
     await queryClient.invalidateQueries({ queryKey: [...CUSTOMER_KEY] });
     if (client.getCartSession()) {
       try {
@@ -597,27 +652,27 @@ function useAuth() {
   const verifyEmailMutation = useMutation2({
     mutationFn: (token) => unwrap(client.auth.verifyEmail(token))
   });
-  const login = useCallback3(
+  const login = useCallback4(
     (email, password) => loginMutation.mutateAsync({ email, password }).then(() => void 0),
     [loginMutation]
   );
-  const register = useCallback3(
+  const register = useCallback4(
     (input) => registerMutation.mutateAsync(input).then(() => void 0),
     [registerMutation]
   );
-  const logout = useCallback3(
+  const logout = useCallback4(
     () => logoutMutation.mutateAsync().then(() => void 0),
     [logoutMutation]
   );
-  const forgotPassword = useCallback3(
+  const forgotPassword = useCallback4(
     (email) => forgotPasswordMutation.mutateAsync(email).then(() => void 0),
     [forgotPasswordMutation]
   );
-  const resetPassword = useCallback3(
+  const resetPassword = useCallback4(
     (token, newPassword) => resetPasswordMutation.mutateAsync({ token, newPassword }).then(() => void 0),
     [resetPasswordMutation]
   );
-  const verifyEmail = useCallback3(
+  const verifyEmail = useCallback4(
     (token) => verifyEmailMutation.mutateAsync(token).then(() => void 0),
     [verifyEmailMutation]
   );
@@ -641,7 +696,7 @@ function useAuth() {
 }
 
 // src/react/hooks/use-customer.ts
-import { useCallback as useCallback4 } from "react";
+import { useCallback as useCallback5 } from "react";
 import { useQuery as useQuery10, useMutation as useMutation3, useQueryClient as useQueryClient4 } from "@tanstack/react-query";
 var CUSTOMER_KEY2 = ["behio", "customer"];
 function useCustomer(options) {
@@ -662,7 +717,7 @@ function useCustomer(options) {
       queryClient.setQueryData([...CUSTOMER_KEY2], updated);
     }
   });
-  const updateProfile = useCallback4(
+  const updateProfile = useCallback5(
     (profileData) => updateMutation.mutateAsync(profileData),
     [updateMutation]
   );
@@ -676,7 +731,7 @@ function useCustomer(options) {
 }
 
 // src/react/hooks/use-addresses.ts
-import { useCallback as useCallback5 } from "react";
+import { useCallback as useCallback6 } from "react";
 import { useQuery as useQuery11, useMutation as useMutation4, useQueryClient as useQueryClient5 } from "@tanstack/react-query";
 var ADDRESSES_KEY = ["behio", "addresses"];
 function useAddresses(options) {
@@ -712,15 +767,15 @@ function useAddresses(options) {
       queryClient.invalidateQueries({ queryKey: [...ADDRESSES_KEY] });
     }
   });
-  const createAddress = useCallback5(
+  const createAddress = useCallback6(
     (address) => createMutation.mutateAsync(address),
     [createMutation]
   );
-  const updateAddress = useCallback5(
+  const updateAddress = useCallback6(
     (addressId, addressData) => updateMutation.mutateAsync({ addressId, data: addressData }),
     [updateMutation]
   );
-  const deleteAddress = useCallback5(
+  const deleteAddress = useCallback6(
     (addressId) => deleteMutation.mutateAsync(addressId),
     [deleteMutation]
   );
@@ -737,16 +792,16 @@ function useAddresses(options) {
 }
 
 // src/react/hooks/use-address-autocomplete.ts
-import { useState as useState3, useEffect as useEffect3, useRef as useRef2, useCallback as useCallback6 } from "react";
+import { useState as useState4, useEffect as useEffect3, useRef as useRef2, useCallback as useCallback7 } from "react";
 import { useQuery as useQuery12 } from "@tanstack/react-query";
 var AC_KEY = ["behio", "address-autocomplete"];
 function useAddressAutocomplete(options) {
   const { country, debounce = 300, minChars = 3, enabled = true } = options;
   const { client } = useBehio();
-  const [query, setQuery] = useState3("");
-  const [debouncedQuery, setDebouncedQuery] = useState3("");
-  const [selected, setSelected] = useState3(null);
-  const [isSelecting, setIsSelecting] = useState3(false);
+  const [query, setQuery] = useState4("");
+  const [debouncedQuery, setDebouncedQuery] = useState4("");
+  const [selected, setSelected] = useState4(null);
+  const [isSelecting, setIsSelecting] = useState4(false);
   const timerRef = useRef2(void 0);
   useEffect3(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
@@ -768,7 +823,7 @@ function useAddressAutocomplete(options) {
     staleTime: 6e4
     // Cache suggestions for 1 min
   });
-  const select = useCallback6(
+  const select = useCallback7(
     async (placeId) => {
       setIsSelecting(true);
       try {
@@ -783,7 +838,7 @@ function useAddressAutocomplete(options) {
     },
     [client]
   );
-  const clear = useCallback6(() => {
+  const clear = useCallback7(() => {
     setQuery("");
     setDebouncedQuery("");
     setSelected(null);
@@ -801,12 +856,12 @@ function useAddressAutocomplete(options) {
 }
 
 // src/react/hooks/use-orders.ts
-import { useCallback as useCallback7, useMemo as useMemo3, useState as useState4 } from "react";
+import { useCallback as useCallback8, useMemo as useMemo3, useState as useState5 } 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] = useState4(initialPage ?? 1);
+  const [page, setPage] = useState5(initialPage ?? 1);
   const infinite = useInfiniteQuery2({
     queryKey: ["behio", "orders", limit, page],
     queryFn: ({ pageParam }) => unwrap(client.orders.list({ limit, page: pageParam })),
@@ -820,13 +875,13 @@ function useOrders(options) {
     [infinite.data]
   );
   const lastPage = infinite.data?.pages[infinite.data.pages.length - 1];
-  const loadMore = useCallback7(() => {
+  const loadMore = useCallback8(() => {
     if (infinite.hasNextPage && !infinite.isFetchingNextPage) {
       return infinite.fetchNextPage();
     }
     return Promise.resolve();
   }, [infinite]);
-  const goToPage = useCallback7((newPage) => {
+  const goToPage = useCallback8((newPage) => {
     setPage(newPage);
   }, []);
   return {
@@ -852,7 +907,7 @@ function useOrders(options) {
 }
 
 // src/react/hooks/use-order.ts
-import { useCallback as useCallback8 } from "react";
+import { useCallback as useCallback9 } from "react";
 import { useQuery as useQuery13, useMutation as useMutation5, useQueryClient as useQueryClient7 } from "@tanstack/react-query";
 function useOrder(orderNumber, options) {
   const { client } = useBehio();
@@ -873,7 +928,7 @@ function useOrder(orderNumber, options) {
       queryClient.invalidateQueries({ queryKey: ["behio", "orders"] });
     }
   });
-  const cancel = useCallback8(
+  const cancel = useCallback9(
     () => cancelMutation.mutateAsync(),
     [cancelMutation]
   );
@@ -887,14 +942,14 @@ function useOrder(orderNumber, options) {
 }
 
 // src/react/hooks/use-order-access.ts
-import { useCallback as useCallback9, useState as useState5 } from "react";
+import { useCallback as useCallback10, useState as useState6 } from "react";
 import { useMutation as useMutation6 } from "@tanstack/react-query";
 function useOrderAccess() {
   const { client } = useBehio();
-  const [orderNumber, setOrderNumber] = useState5(null);
-  const [email, setEmail] = useState5(null);
-  const [order, setOrder] = useState5(null);
-  const [accessToken, setAccessToken] = useState5(null);
+  const [orderNumber, setOrderNumber] = useState6(null);
+  const [email, setEmail] = useState6(null);
+  const [order, setOrder] = useState6(null);
+  const [accessToken, setAccessToken] = useState6(null);
   const requestMutation = useMutation6({
     mutationFn: (input) => unwrap(client.orders.requestAccessCode(input.orderNumber, input.email)),
     onSuccess: (_data, input) => {
@@ -914,12 +969,12 @@ function useOrderAccess() {
       setAccessToken(result.accessToken);
     }
   });
-  const requestCode = useCallback9(
+  const requestCode = useCallback10(
     (on, em) => requestMutation.mutateAsync({ orderNumber: on, email: em }),
     [requestMutation]
   );
-  const verifyCode = useCallback9((code) => verifyMutation.mutateAsync(code), [verifyMutation]);
-  const reset = useCallback9(() => {
+  const verifyCode = useCallback10((code) => verifyMutation.mutateAsync(code), [verifyMutation]);
+  const reset = useCallback10(() => {
     setOrderNumber(null);
     setEmail(null);
     setOrder(null);
@@ -947,12 +1002,12 @@ function useOrderAccess() {
 }
 
 // src/react/hooks/use-checkout.ts
-import { useState as useState6, useCallback as useCallback10 } from "react";
+import { useState as useState7, useCallback as useCallback11 } from "react";
 import { useMutation as useMutation7, useQueryClient as useQueryClient8 } from "@tanstack/react-query";
 function useCheckout() {
   const { client, storage } = useBehio();
   const queryClient = useQueryClient8();
-  const [order, setOrder] = useState6(null);
+  const [order, setOrder] = useState7(null);
   const mutation = useMutation7({
     mutationFn: (input) => unwrap(client.checkout.createOrder(input)),
     onSuccess: (result) => {
@@ -962,11 +1017,11 @@ function useCheckout() {
       queryClient.invalidateQueries({ queryKey: ["behio", "orders"] });
     }
   });
-  const createOrder = useCallback10(
+  const createOrder = useCallback11(
     (input) => mutation.mutateAsync(input),
     [mutation]
   );
-  const reset = useCallback10(() => {
+  const reset = useCallback11(() => {
     setOrder(null);
     mutation.reset();
   }, [mutation]);
@@ -1025,6 +1080,57 @@ function useShopSeo(options) {
   });
 }
 
+// src/react/hooks/use-currency.ts
+function dedupe(values) {
+  const out = [];
+  for (const v of values) {
+    if (v && !out.includes(v)) out.push(v);
+  }
+  return out;
+}
+function useCurrency() {
+  const { currency, setCurrency, configuredDefaultCurrency, configuredCurrencies } = useBehio();
+  const { data: shop, isLoading } = useShopInfo();
+  const defaultCurrency = configuredDefaultCurrency ?? shop?.defaultCurrency;
+  const currencies = configuredCurrencies && configuredCurrencies.length > 0 ? dedupe(configuredCurrencies) : dedupe([defaultCurrency, ...shop?.supportedCurrencies ?? []]);
+  return {
+    currency,
+    effectiveCurrency: currency ?? defaultCurrency,
+    setCurrency,
+    currencies,
+    defaultCurrency,
+    isLoading
+  };
+}
+
+// src/react/components/currency-switcher.tsx
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+function CurrencySwitcher({
+  className,
+  labels,
+  showWhenSingle = false,
+  ariaLabel = "Currency",
+  children
+}) {
+  const { currencies, effectiveCurrency, setCurrency } = useCurrency();
+  if (currencies.length === 0) return null;
+  if (currencies.length <= 1 && !showWhenSingle) return null;
+  const label = (code) => labels?.[code] ?? code;
+  if (children) {
+    return /* @__PURE__ */ jsx2(Fragment, { children: children({ currencies, value: effectiveCurrency, setCurrency, label }) });
+  }
+  return /* @__PURE__ */ jsx2(
+    "select",
+    {
+      className,
+      "aria-label": ariaLabel,
+      value: effectiveCurrency ?? "",
+      onChange: (e) => setCurrency(e.target.value),
+      children: currencies.map((code) => /* @__PURE__ */ jsx2("option", { value: code, children: label(code) }, code))
+    }
+  );
+}
+
 // src/react/hooks/use-bundles.ts
 import { useQuery as useQuery17 } from "@tanstack/react-query";
 function useBundles(options) {
@@ -1231,6 +1337,7 @@ function formatPrice(amount, currency, locale) {
 }
 export {
   BehioProvider,
+  CurrencySwitcher,
   cookieStorage,
   createMemoryStorage,
   detectStorage,
@@ -1251,6 +1358,7 @@ export {
   useCheckout,
   useCookieConsent,
   useCrossSell,
+  useCurrency,
   useCustomer,
   useFeatured,
   useFilters,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@behio/storefront-sdk",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "TypeScript SDK for Behio Headless E-Shop — core client + React hooks",
   "author": "Behio",
   "license": "MIT",