@vue-storefront/next 3.0.1 → 4.0.0

package/dist/{chunk-EX6ADWAR.mjs → chunk-FUJQIYOF.mjs}

@@ -17,8 +17,21 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 
 export {
   __spreadValues,
-  __spreadProps
+  __spreadProps,
+  __objRest
 };

package/dist/client.d.mts

@@ -1,25 +1,27 @@
 import { SDKApi } from '@vue-storefront/sdk';
-import { b as CreateSdkContextReturn } from './types-BcfPWFmc.mjs';
+import { S as SfContract, b as CreateSdkContextReturn } from './types-TuCCvExK.mjs';
+export { M as Maybe, d as SfState, c as SfStateProps, e as createSfStateProvider } from './types-TuCCvExK.mjs';
 import 'react';
 
 /**
- * Creates a new SDK context. This function is dedicated for the client-side usage.
+ * Creates a new Alokai context which is a combination of SDK and state contexts.
+ * This function is dedicated for the client-side usage.
  *
  * @example
- * Create a new SDK context somewhere in your application. It may be the `hooks/sdk.ts` file.
+ * Create a new Alokai context somewhere in your application. It may be the `hooks/sdk.ts` file.
  *
  * ```tsx
- * import { createSdkContext } from "@vue-storefront/next/client";
- * import { getSdk } from "../../sdk.config.ts";
+ * import { createAlokaiContext } from "@vue-storefront/next/client";
+ * import type { Sdk } from './sdk.server';
  *
- * export const [SdkProvider, useSdk] = createSdkContext(getSdk());
+ * export const [AlokaiProvider, useSdk] = createAlokaiContext<Sdk>();
  * ```
- * Then use the `SdkProvider` in the root component of your application.
+ * Then use the `AlokaiProvider` in the root component of your application.
  * For Pages Router it would be the `pages/_app.tsx` file,
  * and for the App Router it would be the `app/layout.tsx` file.
- * Finally you can use the `useSdk` in any client component of your application.
- * @returns [SdkProvider, useSdk] - The SDK provider and the `useSdk` hook.
+ * Finally, you can use the `useSdk` in any client component of your application.
+ * @returns [AlokaiProvider, useSdk] - The SDK provider and the `useSdk` hook.
  */
-declare function createSdkContext<TSdk extends SDKApi<any>>(): CreateSdkContextReturn<TSdk>;
+declare function createAlokaiContext<TSdk extends SDKApi<any>, TSfContract extends SfContract>(): CreateSdkContextReturn<TSdk, TSfContract>;
 
-export { CreateSdkContextReturn, createSdkContext };
+export { CreateSdkContextReturn, SfContract, createAlokaiContext };

package/dist/client.d.ts

@@ -1,25 +1,27 @@
 import { SDKApi } from '@vue-storefront/sdk';
-import { b as CreateSdkContextReturn } from './types-BcfPWFmc.js';
+import { S as SfContract, b as CreateSdkContextReturn } from './types-TuCCvExK.js';
+export { M as Maybe, d as SfState, c as SfStateProps, e as createSfStateProvider } from './types-TuCCvExK.js';
 import 'react';
 
 /**
- * Creates a new SDK context. This function is dedicated for the client-side usage.
+ * Creates a new Alokai context which is a combination of SDK and state contexts.
+ * This function is dedicated for the client-side usage.
  *
  * @example
- * Create a new SDK context somewhere in your application. It may be the `hooks/sdk.ts` file.
+ * Create a new Alokai context somewhere in your application. It may be the `hooks/sdk.ts` file.
  *
  * ```tsx
- * import { createSdkContext } from "@vue-storefront/next/client";
- * import { getSdk } from "../../sdk.config.ts";
+ * import { createAlokaiContext } from "@vue-storefront/next/client";
+ * import type { Sdk } from './sdk.server';
  *
- * export const [SdkProvider, useSdk] = createSdkContext(getSdk());
+ * export const [AlokaiProvider, useSdk] = createAlokaiContext<Sdk>();
  * ```
- * Then use the `SdkProvider` in the root component of your application.
+ * Then use the `AlokaiProvider` in the root component of your application.
  * For Pages Router it would be the `pages/_app.tsx` file,
  * and for the App Router it would be the `app/layout.tsx` file.
- * Finally you can use the `useSdk` in any client component of your application.
- * @returns [SdkProvider, useSdk] - The SDK provider and the `useSdk` hook.
+ * Finally, you can use the `useSdk` in any client component of your application.
+ * @returns [AlokaiProvider, useSdk] - The SDK provider and the `useSdk` hook.
  */
-declare function createSdkContext<TSdk extends SDKApi<any>>(): CreateSdkContextReturn<TSdk>;
+declare function createAlokaiContext<TSdk extends SDKApi<any>, TSfContract extends SfContract>(): CreateSdkContextReturn<TSdk, TSfContract>;
 
-export { CreateSdkContextReturn, createSdkContext };
+export { CreateSdkContextReturn, SfContract, createAlokaiContext };

package/dist/client.js

@@ -1,10 +1,39 @@
 "use client";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -30,33 +59,138 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/client.ts
 var client_exports = {};
 __export(client_exports, {
-  createSdkContext: () => createSdkContext
+  createAlokaiContext: () => createAlokaiContext,
+  createSfStateProvider: () => createSfStateProvider
 });
 module.exports = __toCommonJS(client_exports);
 
-// src/sdk/client.tsx
+// src/alokai-provider.tsx
 var import_script = __toESM(require("next/script"));
+var import_react2 = __toESM(require("react"));
+
+// src/state.tsx
 var import_react = __toESM(require("react"));
-function createSdkContext() {
-  const SdkContext = (0, import_react.createContext)(null);
-  function SdkProvider({ children, sdk }) {
-    return /* @__PURE__ */ import_react.default.createElement(SdkContext.Provider, { value: sdk }, /* @__PURE__ */ import_react.default.createElement(import_script.default, { strategy: "beforeInteractive", id: "vsfMetaTag" }, `
+var import_zustand = require("zustand");
+var createSfState = (initialData) => {
+  return (0, import_zustand.createStore)()((set) => __spreadProps(__spreadValues({
+    cart: null,
+    customer: null
+  }, initialData), {
+    setCart: (cart) => set({ cart }),
+    setCurrencies: (currencies) => set({ currencies }),
+    setCurrency: (currency) => set({ currency }),
+    setCustomer: (customer) => set({ customer }),
+    setLocale: (locale) => set({ locale }),
+    setLocales: (locales) => set({ locales })
+  }));
+};
+function createSfStateProvider() {
+  const SfStateContext = (0, import_react.createContext)(null);
+  function SfStateProvider({
+    children,
+    initialData
+  }) {
+    const stateReference = (0, import_react.useRef)();
+    if (!stateReference.current) {
+      stateReference.current = createSfState(initialData);
+    }
+    return /* @__PURE__ */ import_react.default.createElement(SfStateContext.Provider, { value: stateReference.current }, children);
+  }
+  function getSfStateContext() {
+    const context = (0, import_react.useContext)(SfStateContext);
+    if (!context)
+      throw new Error("Missing SfStateContext.Provider in the tree");
+    return context;
+  }
+  function useSfCurrencyState() {
+    const { currency, setCurrency } = (0, import_zustand.useStore)(
+      getSfStateContext(),
+      (state) => ({
+        currency: state.currency,
+        setCurrency: state.setCurrency
+      })
+    );
+    return [currency, setCurrency];
+  }
+  function useSfCurrenciesState() {
+    const { currencies, setCurrencies } = (0, import_zustand.useStore)(
+      getSfStateContext(),
+      (state) => ({
+        currencies: state.currencies,
+        setCurrencies: state.setCurrencies
+      })
+    );
+    return [currencies, setCurrencies];
+  }
+  function useSfLocaleState() {
+    const { locale, setLocale } = (0, import_zustand.useStore)(getSfStateContext(), (state) => ({
+      locale: state.locale,
+      setLocale: state.setLocale
+    }));
+    return [locale, setLocale];
+  }
+  function useSfLocalesState() {
+    const { locales, setLocales } = (0, import_zustand.useStore)(getSfStateContext(), (state) => ({
+      locales: state.locales,
+      setLocales: state.setLocales
+    }));
+    return [locales, setLocales];
+  }
+  function useSfCartState() {
+    const { cart, setCart } = (0, import_zustand.useStore)(getSfStateContext(), (state) => ({
+      cart: state.cart,
+      setCart: state.setCart
+    }));
+    return [cart, setCart];
+  }
+  function useSfCustomerState() {
+    const { customer, setCustomer } = (0, import_zustand.useStore)(
+      getSfStateContext(),
+      (state) => ({
+        customer: state.customer,
+        setCustomer: state.setCustomer
+      })
+    );
+    return [customer, setCustomer];
+  }
+  return {
+    SfStateProvider,
+    useSfCurrencyState,
+    useSfCurrenciesState,
+    useSfLocaleState,
+    useSfLocalesState,
+    useSfCartState,
+    useSfCustomerState
+  };
+}
+
+// src/alokai-provider.tsx
+function createAlokaiContext() {
+  const SdkContext = (0, import_react2.createContext)(null);
+  const _a = createSfStateProvider(), { SfStateProvider } = _a, rest = __objRest(_a, ["SfStateProvider"]);
+  function AlokaiProvider({
+    children,
+    sdk,
+    initialData
+  }) {
+    return /* @__PURE__ */ import_react2.default.createElement(SdkContext.Provider, { value: sdk }, /* @__PURE__ */ import_react2.default.createElement(import_script.default, { strategy: "beforeInteractive", id: "vsfMetaTag" }, `
           const vsfMetaTag = document.createElement("meta");
           vsfMetaTag.setAttribute("name", "generator");
           vsfMetaTag.setAttribute("content", "Vue Storefront 2");
           document.head.appendChild(vsfMetaTag);
-        `), children);
+        `), /* @__PURE__ */ import_react2.default.createElement(SfStateProvider, { initialData }, children));
   }
   const useSdk = () => {
-    const contextSdk = (0, import_react.useContext)(SdkContext);
+    const contextSdk = (0, import_react2.useContext)(SdkContext);
     if (!contextSdk) {
-      throw new Error("useSdk must be used within a SdkProvider");
+      throw new Error("useSdk must be used within a AlokaiProvider");
     }
     return contextSdk;
   };
-  return [SdkProvider, useSdk];
+  return __spreadValues({ AlokaiProvider, useSdk }, rest);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  createSdkContext
+  createAlokaiContext,
+  createSfStateProvider
 });

package/dist/client.mjs

@@ -1,28 +1,140 @@
 "use client";
-import "./chunk-EX6ADWAR.mjs";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-FUJQIYOF.mjs";
 
-// src/sdk/client.tsx
+// src/alokai-provider.tsx
 import Script from "next/script";
-import React, { createContext, useContext } from "react";
-function createSdkContext() {
-  const SdkContext = createContext(null);
-  function SdkProvider({ children, sdk }) {
-    return /* @__PURE__ */ React.createElement(SdkContext.Provider, { value: sdk }, /* @__PURE__ */ React.createElement(Script, { strategy: "beforeInteractive", id: "vsfMetaTag" }, `
+import React2, { createContext as createContext2, useContext as useContext2 } from "react";
+
+// src/state.tsx
+import React, {
+  createContext,
+  useContext,
+  useRef
+} from "react";
+import { createStore, useStore } from "zustand";
+var createSfState = (initialData) => {
+  return createStore()((set) => __spreadProps(__spreadValues({
+    cart: null,
+    customer: null
+  }, initialData), {
+    setCart: (cart) => set({ cart }),
+    setCurrencies: (currencies) => set({ currencies }),
+    setCurrency: (currency) => set({ currency }),
+    setCustomer: (customer) => set({ customer }),
+    setLocale: (locale) => set({ locale }),
+    setLocales: (locales) => set({ locales })
+  }));
+};
+function createSfStateProvider() {
+  const SfStateContext = createContext(null);
+  function SfStateProvider({
+    children,
+    initialData
+  }) {
+    const stateReference = useRef();
+    if (!stateReference.current) {
+      stateReference.current = createSfState(initialData);
+    }
+    return /* @__PURE__ */ React.createElement(SfStateContext.Provider, { value: stateReference.current }, children);
+  }
+  function getSfStateContext() {
+    const context = useContext(SfStateContext);
+    if (!context)
+      throw new Error("Missing SfStateContext.Provider in the tree");
+    return context;
+  }
+  function useSfCurrencyState() {
+    const { currency, setCurrency } = useStore(
+      getSfStateContext(),
+      (state) => ({
+        currency: state.currency,
+        setCurrency: state.setCurrency
+      })
+    );
+    return [currency, setCurrency];
+  }
+  function useSfCurrenciesState() {
+    const { currencies, setCurrencies } = useStore(
+      getSfStateContext(),
+      (state) => ({
+        currencies: state.currencies,
+        setCurrencies: state.setCurrencies
+      })
+    );
+    return [currencies, setCurrencies];
+  }
+  function useSfLocaleState() {
+    const { locale, setLocale } = useStore(getSfStateContext(), (state) => ({
+      locale: state.locale,
+      setLocale: state.setLocale
+    }));
+    return [locale, setLocale];
+  }
+  function useSfLocalesState() {
+    const { locales, setLocales } = useStore(getSfStateContext(), (state) => ({
+      locales: state.locales,
+      setLocales: state.setLocales
+    }));
+    return [locales, setLocales];
+  }
+  function useSfCartState() {
+    const { cart, setCart } = useStore(getSfStateContext(), (state) => ({
+      cart: state.cart,
+      setCart: state.setCart
+    }));
+    return [cart, setCart];
+  }
+  function useSfCustomerState() {
+    const { customer, setCustomer } = useStore(
+      getSfStateContext(),
+      (state) => ({
+        customer: state.customer,
+        setCustomer: state.setCustomer
+      })
+    );
+    return [customer, setCustomer];
+  }
+  return {
+    SfStateProvider,
+    useSfCurrencyState,
+    useSfCurrenciesState,
+    useSfLocaleState,
+    useSfLocalesState,
+    useSfCartState,
+    useSfCustomerState
+  };
+}
+
+// src/alokai-provider.tsx
+function createAlokaiContext() {
+  const SdkContext = createContext2(null);
+  const _a = createSfStateProvider(), { SfStateProvider } = _a, rest = __objRest(_a, ["SfStateProvider"]);
+  function AlokaiProvider({
+    children,
+    sdk,
+    initialData
+  }) {
+    return /* @__PURE__ */ React2.createElement(SdkContext.Provider, { value: sdk }, /* @__PURE__ */ React2.createElement(Script, { strategy: "beforeInteractive", id: "vsfMetaTag" }, `
           const vsfMetaTag = document.createElement("meta");
           vsfMetaTag.setAttribute("name", "generator");
           vsfMetaTag.setAttribute("content", "Vue Storefront 2");
           document.head.appendChild(vsfMetaTag);
-        `), children);
+        `), /* @__PURE__ */ React2.createElement(SfStateProvider, { initialData }, children));
   }
   const useSdk = () => {
-    const contextSdk = useContext(SdkContext);
+    const contextSdk = useContext2(SdkContext);
     if (!contextSdk) {
-      throw new Error("useSdk must be used within a SdkProvider");
+      throw new Error("useSdk must be used within a AlokaiProvider");
     }
     return contextSdk;
   };
-  return [SdkProvider, useSdk];
+  return __spreadValues({ AlokaiProvider, useSdk }, rest);
 }
 export {
-  createSdkContext
+  createAlokaiContext,
+  createSfStateProvider
 };

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { C as Config, a as CreateSdkReturn } from './types-BcfPWFmc.mjs';
+import { C as Config, a as CreateSdkReturn } from './types-TuCCvExK.mjs';
 import '@vue-storefront/sdk';
 import 'react';
 

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { C as Config, a as CreateSdkReturn } from './types-BcfPWFmc.js';
+import { C as Config, a as CreateSdkReturn } from './types-TuCCvExK.js';
 import '@vue-storefront/sdk';
 import 'react';
 

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import {
   __spreadProps,
   __spreadValues
-} from "./chunk-EX6ADWAR.mjs";
+} from "./chunk-FUJQIYOF.mjs";
 
 // ../shared/src/helpers/composeMiddlewareUrl.ts
 function calculateMiddlewareUrl({

package/dist/{types-BcfPWFmc.d.mts → types-TuCCvExK.d.mts}

@@ -1,5 +1,5 @@
 import { SDKApi, buildModule, middlewareModule } from '@vue-storefront/sdk';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 declare const defaultMethodsRequestConfig: {
     readonly unifiedCommerce: {
@@ -33,6 +33,44 @@ declare const defaultMethodsRequestConfig: {
     };
 };
 
+type Maybe<TType> = TType | null;
+
+type SfContract = {
+    SfCart: unknown;
+    SfCustomer: unknown;
+    SfCurrency: unknown;
+    SfLocale: unknown;
+};
+interface SfStateProps<TSfContract extends SfContract> {
+    currencies: TSfContract["SfCurrency"][];
+    currency: TSfContract["SfCurrency"];
+    locale: TSfContract["SfLocale"];
+    locales: TSfContract["SfLocale"][];
+}
+interface SfState<TSfContract extends SfContract> extends SfStateProps<TSfContract> {
+    cart: TSfContract["SfCart"] | null | undefined;
+    customer: TSfContract["SfCustomer"] | null | undefined;
+    setCart: (cart?: TSfContract["SfCart"] | null) => void;
+    setCurrencies: (currencies: TSfContract["SfCurrency"][]) => void;
+    setCurrency: (currency: TSfContract["SfCurrency"]) => void;
+    setCustomer: (customer?: TSfContract["SfCustomer"] | null) => void;
+    setLocale: (locale: TSfContract["SfLocale"]) => void;
+    setLocales: (locales: TSfContract["SfLocale"][]) => void;
+}
+declare function createSfStateProvider<TSfContract extends SfContract>(): {
+    SfStateProvider: ({ children, initialData, }: {
+        initialData: SfStateProps<TSfContract>;
+    } & {
+        children?: React.ReactNode;
+    }) => React.JSX.Element;
+    useSfCurrencyState: () => [TSfContract["SfCurrency"], (currency: TSfContract["SfCurrency"]) => void];
+    useSfCurrenciesState: () => [TSfContract["SfCurrency"][], (currencies: TSfContract["SfCurrency"][]) => void];
+    useSfLocaleState: () => [TSfContract["SfLocale"], (locale: TSfContract["SfLocale"]) => void];
+    useSfLocalesState: () => [TSfContract["SfLocale"][], (locales: TSfContract["SfLocale"][]) => void];
+    useSfCartState: () => [TSfContract["SfCart"], (cart?: TSfContract["SfCart"] | null) => void];
+    useSfCustomerState: () => [TSfContract["SfCustomer"], (customer?: TSfContract["SfCustomer"] | null) => void];
+};
+
 type GetSdkContext = {
     /**
      * A function that returns the request headers.
@@ -61,9 +99,10 @@ type StaticContext = {
 };
 type InjectedContext = DynamicContext & StaticContext;
 type Config<TConfig> = (context: InjectedContext) => TConfig;
-type SdkProviderProps<TSdk> = {
+type AlokaiProviderProps<TSdk, TSfContract extends SfContract> = {
     children: ReactNode;
     sdk: TSdk;
+    initialData: SfStateProps<TSfContract>;
 };
 interface CreateSdkReturn<TConfig extends Record<string, any>> {
     /**
@@ -111,9 +150,15 @@ interface CreateSdkReturn<TConfig extends Record<string, any>> {
      */
     getSdk: (dynamicContext?: GetSdkContext) => SDKApi<TConfig>;
 }
-type CreateSdkContextReturn<TSdk extends SDKApi<any>> = readonly [
-    ({ children }: SdkProviderProps<TSdk>) => JSX.Element,
-    () => TSdk
-];
+type CreateSdkContextReturn<TSdk extends SDKApi<any>, TSfContract extends SfContract> = Readonly<{
+    AlokaiProvider: ({ children, }: AlokaiProviderProps<TSdk, TSfContract>) => JSX.Element;
+    useSdk: () => TSdk;
+    useSfCurrencyState: ReturnType<typeof createSfStateProvider<TSfContract>>["useSfCurrencyState"];
+    useSfCurrenciesState: ReturnType<typeof createSfStateProvider<TSfContract>>["useSfCurrenciesState"];
+    useSfLocaleState: ReturnType<typeof createSfStateProvider<TSfContract>>["useSfLocaleState"];
+    useSfLocalesState: ReturnType<typeof createSfStateProvider<TSfContract>>["useSfLocalesState"];
+    useSfCartState: ReturnType<typeof createSfStateProvider<TSfContract>>["useSfCartState"];
+    useSfCustomerState: ReturnType<typeof createSfStateProvider<TSfContract>>["useSfCustomerState"];
+}>;
 
-export type { Config as C, CreateSdkReturn as a, CreateSdkContextReturn as b };
+export { type Config as C, type Maybe as M, type SfContract as S, type CreateSdkReturn as a, type CreateSdkContextReturn as b, type SfStateProps as c, type SfState as d, createSfStateProvider as e };

package/dist/{types-BcfPWFmc.d.ts → types-TuCCvExK.d.ts}

@@ -1,5 +1,5 @@
 import { SDKApi, buildModule, middlewareModule } from '@vue-storefront/sdk';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 declare const defaultMethodsRequestConfig: {
     readonly unifiedCommerce: {
@@ -33,6 +33,44 @@ declare const defaultMethodsRequestConfig: {
     };
 };
 
+type Maybe<TType> = TType | null;
+
+type SfContract = {
+    SfCart: unknown;
+    SfCustomer: unknown;
+    SfCurrency: unknown;
+    SfLocale: unknown;
+};
+interface SfStateProps<TSfContract extends SfContract> {
+    currencies: TSfContract["SfCurrency"][];
+    currency: TSfContract["SfCurrency"];
+    locale: TSfContract["SfLocale"];
+    locales: TSfContract["SfLocale"][];
+}
+interface SfState<TSfContract extends SfContract> extends SfStateProps<TSfContract> {
+    cart: TSfContract["SfCart"] | null | undefined;
+    customer: TSfContract["SfCustomer"] | null | undefined;
+    setCart: (cart?: TSfContract["SfCart"] | null) => void;
+    setCurrencies: (currencies: TSfContract["SfCurrency"][]) => void;
+    setCurrency: (currency: TSfContract["SfCurrency"]) => void;
+    setCustomer: (customer?: TSfContract["SfCustomer"] | null) => void;
+    setLocale: (locale: TSfContract["SfLocale"]) => void;
+    setLocales: (locales: TSfContract["SfLocale"][]) => void;
+}
+declare function createSfStateProvider<TSfContract extends SfContract>(): {
+    SfStateProvider: ({ children, initialData, }: {
+        initialData: SfStateProps<TSfContract>;
+    } & {
+        children?: React.ReactNode;
+    }) => React.JSX.Element;
+    useSfCurrencyState: () => [TSfContract["SfCurrency"], (currency: TSfContract["SfCurrency"]) => void];
+    useSfCurrenciesState: () => [TSfContract["SfCurrency"][], (currencies: TSfContract["SfCurrency"][]) => void];
+    useSfLocaleState: () => [TSfContract["SfLocale"], (locale: TSfContract["SfLocale"]) => void];
+    useSfLocalesState: () => [TSfContract["SfLocale"][], (locales: TSfContract["SfLocale"][]) => void];
+    useSfCartState: () => [TSfContract["SfCart"], (cart?: TSfContract["SfCart"] | null) => void];
+    useSfCustomerState: () => [TSfContract["SfCustomer"], (customer?: TSfContract["SfCustomer"] | null) => void];
+};
+
 type GetSdkContext = {
     /**
      * A function that returns the request headers.
@@ -61,9 +99,10 @@ type StaticContext = {
 };
 type InjectedContext = DynamicContext & StaticContext;
 type Config<TConfig> = (context: InjectedContext) => TConfig;
-type SdkProviderProps<TSdk> = {
+type AlokaiProviderProps<TSdk, TSfContract extends SfContract> = {
     children: ReactNode;
     sdk: TSdk;
+    initialData: SfStateProps<TSfContract>;
 };
 interface CreateSdkReturn<TConfig extends Record<string, any>> {
     /**
@@ -111,9 +150,15 @@ interface CreateSdkReturn<TConfig extends Record<string, any>> {
      */
     getSdk: (dynamicContext?: GetSdkContext) => SDKApi<TConfig>;
 }
-type CreateSdkContextReturn<TSdk extends SDKApi<any>> = readonly [
-    ({ children }: SdkProviderProps<TSdk>) => JSX.Element,
-    () => TSdk
-];
+type CreateSdkContextReturn<TSdk extends SDKApi<any>, TSfContract extends SfContract> = Readonly<{
+    AlokaiProvider: ({ children, }: AlokaiProviderProps<TSdk, TSfContract>) => JSX.Element;
+    useSdk: () => TSdk;
+    useSfCurrencyState: ReturnType<typeof createSfStateProvider<TSfContract>>["useSfCurrencyState"];
+    useSfCurrenciesState: ReturnType<typeof createSfStateProvider<TSfContract>>["useSfCurrenciesState"];
+    useSfLocaleState: ReturnType<typeof createSfStateProvider<TSfContract>>["useSfLocaleState"];
+    useSfLocalesState: ReturnType<typeof createSfStateProvider<TSfContract>>["useSfLocalesState"];
+    useSfCartState: ReturnType<typeof createSfStateProvider<TSfContract>>["useSfCartState"];
+    useSfCustomerState: ReturnType<typeof createSfStateProvider<TSfContract>>["useSfCustomerState"];
+}>;
 
-export type { Config as C, CreateSdkReturn as a, CreateSdkContextReturn as b };
+export { type Config as C, type Maybe as M, type SfContract as S, type CreateSdkReturn as a, type CreateSdkContextReturn as b, type SfStateProps as c, type SfState as d, createSfStateProvider as e };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@vue-storefront/next",
   "description": "Vue Storefront dedicated features for Next.js",
   "license": "MIT",
-  "version": "3.0.1",
+  "version": "4.0.0",
   "exports": {
     ".": {
       "import": "./dist/index.mjs",
@@ -29,7 +29,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsup && yarn build:app-router && yarn build:pages-router",
+    "build": "tsup",
     "build:app-router": "cd __tests__/apps/app-router && yarn install && yarn build",
     "build:pages-router": "cd __tests__/apps/pages-router && yarn install && yarn build",
     "dev:app-router": "cd __tests__/apps/app-router && yarn dev",
@@ -43,7 +43,8 @@
     "test:unit": "vitest run"
   },
   "dependencies": {
-    "@vue-storefront/sdk": "^3.1.0"
+    "@vue-storefront/sdk": "^3.2.0",
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
     "@types/react": "^18.2.31",