@commercengine/checkout 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +402 -0
- package/dist/index.cjs +7 -0
- package/dist/index.d.cts +3 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.js +3 -0
- package/dist/react.cjs +105 -0
- package/dist/react.cjs.map +1 -0
- package/dist/react.d.cts +69 -0
- package/dist/react.d.cts.map +1 -0
- package/dist/react.d.ts +69 -0
- package/dist/react.d.ts.map +1 -0
- package/dist/react.js +100 -0
- package/dist/react.js.map +1 -0
- package/dist/solid.cjs +162 -0
- package/dist/solid.cjs.map +1 -0
- package/dist/solid.d.cts +92 -0
- package/dist/solid.d.cts.map +1 -0
- package/dist/solid.d.ts +92 -0
- package/dist/solid.d.ts.map +1 -0
- package/dist/solid.js +155 -0
- package/dist/solid.js.map +1 -0
- package/dist/store.cjs +250 -0
- package/dist/store.cjs.map +1 -0
- package/dist/store.d.cts +176 -0
- package/dist/store.d.cts.map +1 -0
- package/dist/store.d.ts +176 -0
- package/dist/store.d.ts.map +1 -0
- package/dist/store.js +221 -0
- package/dist/store.js.map +1 -0
- package/dist/svelte.cjs +124 -0
- package/dist/svelte.cjs.map +1 -0
- package/dist/svelte.d.cts +77 -0
- package/dist/svelte.d.cts.map +1 -0
- package/dist/svelte.d.ts +77 -0
- package/dist/svelte.d.ts.map +1 -0
- package/dist/svelte.js +115 -0
- package/dist/svelte.js.map +1 -0
- package/dist/vue.cjs +98 -0
- package/dist/vue.cjs.map +1 -0
- package/dist/vue.d.cts +59 -0
- package/dist/vue.d.cts.map +1 -0
- package/dist/vue.d.ts +59 -0
- package/dist/vue.d.ts.map +1 -0
- package/dist/vue.js +93 -0
- package/dist/vue.js.map +1 -0
- package/package.json +116 -0
package/dist/store.js
ADDED
|
@@ -0,0 +1,221 @@
|
|
|
1
|
+
import { Checkout } from "@commercengine/js";
|
|
2
|
+
import { subscribeWithSelector } from "zustand/middleware";
|
|
3
|
+
import { createStore } from "zustand/vanilla";
|
|
4
|
+
|
|
5
|
+
//#region src/store.ts
|
|
6
|
+
/**
|
|
7
|
+
* Commerce Engine Checkout - Universal Store
|
|
8
|
+
*
|
|
9
|
+
* Framework-agnostic state management using Zustand vanilla.
|
|
10
|
+
* This is the core store that all framework bindings use.
|
|
11
|
+
*
|
|
12
|
+
* ## Architecture
|
|
13
|
+
*
|
|
14
|
+
* - **Singleton**: One store instance shared across all components/routes
|
|
15
|
+
* - **Non-blocking**: Checkout iframe loads asynchronously in the background
|
|
16
|
+
* - **SSR-safe**: Initialization is skipped on server, only runs on client
|
|
17
|
+
* - **Zero CWV impact**: Hidden iframe, no layout shifts, no main thread blocking
|
|
18
|
+
*
|
|
19
|
+
* ## Lifecycle
|
|
20
|
+
*
|
|
21
|
+
* 1. `initCheckout()` creates a hidden iframe and returns immediately
|
|
22
|
+
* 2. Iframe loads in background (non-blocking)
|
|
23
|
+
* 3. `onReady` callback fires when checkout is ready
|
|
24
|
+
* 4. `useCheckout()` can be called from any component to access state
|
|
25
|
+
* 5. Same instance persists across route changes (SPA navigation)
|
|
26
|
+
*
|
|
27
|
+
* @commercengine/checkout
|
|
28
|
+
*/
|
|
29
|
+
const DEFAULT_STATE = {
|
|
30
|
+
checkout: null,
|
|
31
|
+
isReady: false,
|
|
32
|
+
isOpen: false,
|
|
33
|
+
cartCount: 0,
|
|
34
|
+
cartTotal: 0,
|
|
35
|
+
cartCurrency: "INR"
|
|
36
|
+
};
|
|
37
|
+
/**
|
|
38
|
+
* Vanilla Zustand store for checkout state
|
|
39
|
+
*
|
|
40
|
+
* This is framework-agnostic and can be used directly or via framework bindings.
|
|
41
|
+
*
|
|
42
|
+
* @example Direct usage (vanilla JS)
|
|
43
|
+
* ```ts
|
|
44
|
+
* import { checkoutStore } from "@commercengine/checkout";
|
|
45
|
+
*
|
|
46
|
+
* // Initialize
|
|
47
|
+
* checkoutStore.getState().init({ storeId: "...", apiKey: "..." });
|
|
48
|
+
*
|
|
49
|
+
* // Get current state
|
|
50
|
+
* const { cartCount, isReady } = checkoutStore.getState();
|
|
51
|
+
*
|
|
52
|
+
* // Subscribe to changes
|
|
53
|
+
* checkoutStore.subscribe((state) => {
|
|
54
|
+
* console.log("Cart count:", state.cartCount);
|
|
55
|
+
* });
|
|
56
|
+
*
|
|
57
|
+
* // Call actions
|
|
58
|
+
* checkoutStore.getState().openCart();
|
|
59
|
+
* ```
|
|
60
|
+
*/
|
|
61
|
+
const checkoutStore = createStore()(subscribeWithSelector((set, get) => ({
|
|
62
|
+
...DEFAULT_STATE,
|
|
63
|
+
init: (config) => {
|
|
64
|
+
if (typeof window === "undefined") return;
|
|
65
|
+
const existing = get().checkout;
|
|
66
|
+
if (existing) existing.destroy();
|
|
67
|
+
set({ checkout: new Checkout({
|
|
68
|
+
...config,
|
|
69
|
+
onReady: () => {
|
|
70
|
+
set({ isReady: true });
|
|
71
|
+
config.onReady?.();
|
|
72
|
+
},
|
|
73
|
+
onOpen: () => {
|
|
74
|
+
set({ isOpen: true });
|
|
75
|
+
config.onOpen?.();
|
|
76
|
+
},
|
|
77
|
+
onClose: () => {
|
|
78
|
+
set({ isOpen: false });
|
|
79
|
+
config.onClose?.();
|
|
80
|
+
},
|
|
81
|
+
onCartUpdate: (cart) => {
|
|
82
|
+
set({
|
|
83
|
+
cartCount: cart.count,
|
|
84
|
+
cartTotal: cart.total,
|
|
85
|
+
cartCurrency: cart.currency
|
|
86
|
+
});
|
|
87
|
+
config.onCartUpdate?.(cart);
|
|
88
|
+
},
|
|
89
|
+
onComplete: (order) => {
|
|
90
|
+
config.onComplete?.(order);
|
|
91
|
+
},
|
|
92
|
+
onLogin: (data) => {
|
|
93
|
+
config.onLogin?.(data);
|
|
94
|
+
},
|
|
95
|
+
onLogout: (data) => {
|
|
96
|
+
config.onLogout?.(data);
|
|
97
|
+
},
|
|
98
|
+
onTokenRefresh: (data) => {
|
|
99
|
+
config.onTokenRefresh?.(data);
|
|
100
|
+
},
|
|
101
|
+
onSessionError: () => {
|
|
102
|
+
config.onSessionError?.();
|
|
103
|
+
},
|
|
104
|
+
onError: (error) => {
|
|
105
|
+
set({ isReady: true });
|
|
106
|
+
config.onError?.(error);
|
|
107
|
+
}
|
|
108
|
+
}) });
|
|
109
|
+
},
|
|
110
|
+
destroy: () => {
|
|
111
|
+
const { checkout } = get();
|
|
112
|
+
if (checkout) checkout.destroy();
|
|
113
|
+
set(DEFAULT_STATE);
|
|
114
|
+
},
|
|
115
|
+
openCart: () => {
|
|
116
|
+
get().checkout?.openCart();
|
|
117
|
+
},
|
|
118
|
+
openCheckout: () => {
|
|
119
|
+
get().checkout?.openCheckout();
|
|
120
|
+
},
|
|
121
|
+
close: () => {
|
|
122
|
+
get().checkout?.close();
|
|
123
|
+
},
|
|
124
|
+
addToCart: (productId, variantId, quantity) => {
|
|
125
|
+
get().checkout?.addToCart(productId, variantId, quantity);
|
|
126
|
+
},
|
|
127
|
+
updateTokens: (accessToken, refreshToken) => {
|
|
128
|
+
get().checkout?.updateTokens(accessToken, refreshToken);
|
|
129
|
+
}
|
|
130
|
+
})));
|
|
131
|
+
/**
|
|
132
|
+
* Initialize checkout
|
|
133
|
+
*
|
|
134
|
+
* @example
|
|
135
|
+
* ```ts
|
|
136
|
+
* import { initCheckout } from "@commercengine/checkout";
|
|
137
|
+
*
|
|
138
|
+
* initCheckout({
|
|
139
|
+
* storeId: "store_xxx",
|
|
140
|
+
* apiKey: "ak_xxx",
|
|
141
|
+
* onComplete: (order) => console.log("Order placed:", order.orderNumber),
|
|
142
|
+
* });
|
|
143
|
+
* ```
|
|
144
|
+
*/
|
|
145
|
+
function initCheckout(config) {
|
|
146
|
+
checkoutStore.getState().init(config);
|
|
147
|
+
}
|
|
148
|
+
/**
|
|
149
|
+
* Destroy checkout instance
|
|
150
|
+
*
|
|
151
|
+
* @example
|
|
152
|
+
* ```ts
|
|
153
|
+
* import { destroyCheckout } from "@commercengine/checkout";
|
|
154
|
+
*
|
|
155
|
+
* destroyCheckout();
|
|
156
|
+
* ```
|
|
157
|
+
*/
|
|
158
|
+
function destroyCheckout() {
|
|
159
|
+
checkoutStore.getState().destroy();
|
|
160
|
+
}
|
|
161
|
+
/**
|
|
162
|
+
* Get checkout state and methods (non-reactive)
|
|
163
|
+
*
|
|
164
|
+
* Use this outside of reactive frameworks or when you don't need reactivity.
|
|
165
|
+
*
|
|
166
|
+
* @example
|
|
167
|
+
* ```ts
|
|
168
|
+
* import { getCheckout } from "@commercengine/checkout";
|
|
169
|
+
*
|
|
170
|
+
* document.getElementById("cart-btn").onclick = () => {
|
|
171
|
+
* getCheckout().openCart();
|
|
172
|
+
* };
|
|
173
|
+
*
|
|
174
|
+
* // Check state
|
|
175
|
+
* if (getCheckout().isReady) {
|
|
176
|
+
* console.log("Cart has", getCheckout().cartCount, "items");
|
|
177
|
+
* }
|
|
178
|
+
* ```
|
|
179
|
+
*/
|
|
180
|
+
function getCheckout() {
|
|
181
|
+
const state = checkoutStore.getState();
|
|
182
|
+
return {
|
|
183
|
+
isReady: state.isReady,
|
|
184
|
+
isOpen: state.isOpen,
|
|
185
|
+
cartCount: state.cartCount,
|
|
186
|
+
cartTotal: state.cartTotal,
|
|
187
|
+
cartCurrency: state.cartCurrency,
|
|
188
|
+
openCart: state.openCart,
|
|
189
|
+
openCheckout: state.openCheckout,
|
|
190
|
+
close: state.close,
|
|
191
|
+
addToCart: state.addToCart,
|
|
192
|
+
updateTokens: state.updateTokens
|
|
193
|
+
};
|
|
194
|
+
}
|
|
195
|
+
/**
|
|
196
|
+
* Subscribe to checkout state changes
|
|
197
|
+
*
|
|
198
|
+
* @example
|
|
199
|
+
* ```ts
|
|
200
|
+
* import { subscribeToCheckout } from "@commercengine/checkout";
|
|
201
|
+
*
|
|
202
|
+
* // Subscribe to all changes
|
|
203
|
+
* const unsubscribe = subscribeToCheckout((state) => {
|
|
204
|
+
* console.log("State changed:", state);
|
|
205
|
+
* });
|
|
206
|
+
*
|
|
207
|
+
* // Subscribe to specific state with selector
|
|
208
|
+
* const unsubscribe = subscribeToCheckout(
|
|
209
|
+
* (state) => state.cartCount,
|
|
210
|
+
* (cartCount) => console.log("Cart count:", cartCount)
|
|
211
|
+
* );
|
|
212
|
+
*
|
|
213
|
+
* // Cleanup
|
|
214
|
+
* unsubscribe();
|
|
215
|
+
* ```
|
|
216
|
+
*/
|
|
217
|
+
const subscribeToCheckout = checkoutStore.subscribe;
|
|
218
|
+
|
|
219
|
+
//#endregion
|
|
220
|
+
export { subscribeToCheckout as a, initCheckout as i, destroyCheckout as n, getCheckout as r, checkoutStore as t };
|
|
221
|
+
//# sourceMappingURL=store.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"store.js","names":[],"sources":["../src/store.ts"],"sourcesContent":["/**\n * Commerce Engine Checkout - Universal Store\n *\n * Framework-agnostic state management using Zustand vanilla.\n * This is the core store that all framework bindings use.\n *\n * ## Architecture\n *\n * - **Singleton**: One store instance shared across all components/routes\n * - **Non-blocking**: Checkout iframe loads asynchronously in the background\n * - **SSR-safe**: Initialization is skipped on server, only runs on client\n * - **Zero CWV impact**: Hidden iframe, no layout shifts, no main thread blocking\n *\n * ## Lifecycle\n *\n * 1. `initCheckout()` creates a hidden iframe and returns immediately\n * 2. Iframe loads in background (non-blocking)\n * 3. `onReady` callback fires when checkout is ready\n * 4. `useCheckout()` can be called from any component to access state\n * 5. Same instance persists across route changes (SPA navigation)\n *\n * @commercengine/checkout\n */\n\nimport {\n type AuthLoginData,\n type AuthLogoutData,\n type AuthRefreshData,\n type CartData,\n Checkout,\n type CheckoutConfig,\n type ErrorData,\n type OrderData,\n} from \"@commercengine/js\";\nimport { subscribeWithSelector } from \"zustand/middleware\";\nimport { createStore } from \"zustand/vanilla\";\n\n// =============================================================================\n// TYPES\n// =============================================================================\n\n/**\n * Checkout state\n */\nexport interface CheckoutState {\n /** Internal checkout instance */\n checkout: Checkout | null;\n /** Whether checkout is ready to use */\n isReady: boolean;\n /** Whether checkout overlay is currently open */\n isOpen: boolean;\n /** Number of items in cart */\n cartCount: number;\n /** Cart subtotal amount */\n cartTotal: number;\n /** Cart currency code */\n cartCurrency: string;\n}\n\n/**\n * Checkout actions\n */\nexport interface CheckoutActions {\n /**\n * Initialize checkout with configuration\n * Call this once at app startup\n */\n init: (config: CheckoutConfig) => void;\n\n /**\n * Destroy checkout instance and reset state\n */\n destroy: () => void;\n\n /**\n * Open the cart drawer\n */\n openCart: () => void;\n\n /**\n * Open the checkout drawer directly (for Buy Now flow)\n */\n openCheckout: () => void;\n\n /**\n * Close the checkout overlay\n */\n close: () => void;\n\n /**\n * Add item to cart\n * @param productId - Product ID (required)\n * @param variantId - Variant ID (required, null for non-variant products)\n * @param quantity - Quantity to add (default: 1)\n */\n addToCart: (productId: string, variantId: string | null, quantity?: number) => void;\n\n /**\n * Update authentication tokens\n * Use this when user logs in/out on the parent site\n */\n updateTokens: (accessToken: string, refreshToken?: string) => void;\n}\n\n/**\n * Complete checkout store type\n */\nexport type CheckoutStore = CheckoutState & CheckoutActions;\n\n// =============================================================================\n// DEFAULT STATE\n// =============================================================================\n\nconst DEFAULT_STATE: CheckoutState = {\n checkout: null,\n isReady: false,\n isOpen: false,\n cartCount: 0,\n cartTotal: 0,\n cartCurrency: \"INR\",\n};\n\n// =============================================================================\n// STORE\n// =============================================================================\n\n/**\n * Vanilla Zustand store for checkout state\n *\n * This is framework-agnostic and can be used directly or via framework bindings.\n *\n * @example Direct usage (vanilla JS)\n * ```ts\n * import { checkoutStore } from \"@commercengine/checkout\";\n *\n * // Initialize\n * checkoutStore.getState().init({ storeId: \"...\", apiKey: \"...\" });\n *\n * // Get current state\n * const { cartCount, isReady } = checkoutStore.getState();\n *\n * // Subscribe to changes\n * checkoutStore.subscribe((state) => {\n * console.log(\"Cart count:\", state.cartCount);\n * });\n *\n * // Call actions\n * checkoutStore.getState().openCart();\n * ```\n */\nexport const checkoutStore = createStore<CheckoutStore>()(\n subscribeWithSelector((set, get) => ({\n // State\n ...DEFAULT_STATE,\n\n // Actions\n init: (config) => {\n // Skip on server\n if (typeof window === \"undefined\") return;\n\n // Destroy existing instance if reinitializing\n const existing = get().checkout;\n if (existing) {\n existing.destroy();\n }\n\n // Create new checkout instance with callbacks that update store\n const checkout = new Checkout({\n ...config,\n onReady: () => {\n set({ isReady: true });\n config.onReady?.();\n },\n onOpen: () => {\n set({ isOpen: true });\n config.onOpen?.();\n },\n onClose: () => {\n set({ isOpen: false });\n config.onClose?.();\n },\n onCartUpdate: (cart: CartData) => {\n set({\n cartCount: cart.count,\n cartTotal: cart.total,\n cartCurrency: cart.currency,\n });\n config.onCartUpdate?.(cart);\n },\n onComplete: (order: OrderData) => {\n config.onComplete?.(order);\n },\n onLogin: (data: AuthLoginData) => {\n config.onLogin?.(data);\n },\n onLogout: (data: AuthLogoutData) => {\n config.onLogout?.(data);\n },\n onTokenRefresh: (data: AuthRefreshData) => {\n config.onTokenRefresh?.(data);\n },\n onSessionError: () => {\n config.onSessionError?.();\n },\n onError: (error: ErrorData) => {\n // Still set ready so buttons are enabled (error drawer will show)\n set({ isReady: true });\n config.onError?.(error);\n },\n });\n\n set({ checkout });\n },\n\n destroy: () => {\n const { checkout } = get();\n if (checkout) {\n checkout.destroy();\n }\n set(DEFAULT_STATE);\n },\n\n openCart: () => {\n get().checkout?.openCart();\n },\n\n openCheckout: () => {\n get().checkout?.openCheckout();\n },\n\n close: () => {\n get().checkout?.close();\n },\n\n addToCart: (productId, variantId, quantity) => {\n get().checkout?.addToCart(productId, variantId, quantity);\n },\n\n updateTokens: (accessToken, refreshToken) => {\n get().checkout?.updateTokens(accessToken, refreshToken);\n },\n }))\n);\n\n// =============================================================================\n// CONVENIENCE EXPORTS\n// =============================================================================\n\n/**\n * Initialize checkout\n *\n * @example\n * ```ts\n * import { initCheckout } from \"@commercengine/checkout\";\n *\n * initCheckout({\n * storeId: \"store_xxx\",\n * apiKey: \"ak_xxx\",\n * onComplete: (order) => console.log(\"Order placed:\", order.orderNumber),\n * });\n * ```\n */\nexport function initCheckout(config: CheckoutConfig): void {\n checkoutStore.getState().init(config);\n}\n\n/**\n * Destroy checkout instance\n *\n * @example\n * ```ts\n * import { destroyCheckout } from \"@commercengine/checkout\";\n *\n * destroyCheckout();\n * ```\n */\nexport function destroyCheckout(): void {\n checkoutStore.getState().destroy();\n}\n\n/**\n * Get checkout state and methods (non-reactive)\n *\n * Use this outside of reactive frameworks or when you don't need reactivity.\n *\n * @example\n * ```ts\n * import { getCheckout } from \"@commercengine/checkout\";\n *\n * document.getElementById(\"cart-btn\").onclick = () => {\n * getCheckout().openCart();\n * };\n *\n * // Check state\n * if (getCheckout().isReady) {\n * console.log(\"Cart has\", getCheckout().cartCount, \"items\");\n * }\n * ```\n */\nexport function getCheckout(): Omit<CheckoutStore, \"checkout\" | \"init\" | \"destroy\"> {\n const state = checkoutStore.getState();\n return {\n isReady: state.isReady,\n isOpen: state.isOpen,\n cartCount: state.cartCount,\n cartTotal: state.cartTotal,\n cartCurrency: state.cartCurrency,\n openCart: state.openCart,\n openCheckout: state.openCheckout,\n close: state.close,\n addToCart: state.addToCart,\n updateTokens: state.updateTokens,\n };\n}\n\n/**\n * Subscribe to checkout state changes\n *\n * @example\n * ```ts\n * import { subscribeToCheckout } from \"@commercengine/checkout\";\n *\n * // Subscribe to all changes\n * const unsubscribe = subscribeToCheckout((state) => {\n * console.log(\"State changed:\", state);\n * });\n *\n * // Subscribe to specific state with selector\n * const unsubscribe = subscribeToCheckout(\n * (state) => state.cartCount,\n * (cartCount) => console.log(\"Cart count:\", cartCount)\n * );\n *\n * // Cleanup\n * unsubscribe();\n * ```\n */\nexport const subscribeToCheckout = checkoutStore.subscribe;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiHA,MAAM,gBAA+B;CACnC,UAAU;CACV,SAAS;CACT,QAAQ;CACR,WAAW;CACX,WAAW;CACX,cAAc;CACf;;;;;;;;;;;;;;;;;;;;;;;;;AA8BD,MAAa,gBAAgB,aAA4B,CACvD,uBAAuB,KAAK,SAAS;CAEnC,GAAG;CAGH,OAAO,WAAW;AAEhB,MAAI,OAAO,WAAW,YAAa;EAGnC,MAAM,WAAW,KAAK,CAAC;AACvB,MAAI,SACF,UAAS,SAAS;AAgDpB,MAAI,EAAE,UA5CW,IAAI,SAAS;GAC5B,GAAG;GACH,eAAe;AACb,QAAI,EAAE,SAAS,MAAM,CAAC;AACtB,WAAO,WAAW;;GAEpB,cAAc;AACZ,QAAI,EAAE,QAAQ,MAAM,CAAC;AACrB,WAAO,UAAU;;GAEnB,eAAe;AACb,QAAI,EAAE,QAAQ,OAAO,CAAC;AACtB,WAAO,WAAW;;GAEpB,eAAe,SAAmB;AAChC,QAAI;KACF,WAAW,KAAK;KAChB,WAAW,KAAK;KAChB,cAAc,KAAK;KACpB,CAAC;AACF,WAAO,eAAe,KAAK;;GAE7B,aAAa,UAAqB;AAChC,WAAO,aAAa,MAAM;;GAE5B,UAAU,SAAwB;AAChC,WAAO,UAAU,KAAK;;GAExB,WAAW,SAAyB;AAClC,WAAO,WAAW,KAAK;;GAEzB,iBAAiB,SAA0B;AACzC,WAAO,iBAAiB,KAAK;;GAE/B,sBAAsB;AACpB,WAAO,kBAAkB;;GAE3B,UAAU,UAAqB;AAE7B,QAAI,EAAE,SAAS,MAAM,CAAC;AACtB,WAAO,UAAU,MAAM;;GAE1B,CAAC,EAEc,CAAC;;CAGnB,eAAe;EACb,MAAM,EAAE,aAAa,KAAK;AAC1B,MAAI,SACF,UAAS,SAAS;AAEpB,MAAI,cAAc;;CAGpB,gBAAgB;AACd,OAAK,CAAC,UAAU,UAAU;;CAG5B,oBAAoB;AAClB,OAAK,CAAC,UAAU,cAAc;;CAGhC,aAAa;AACX,OAAK,CAAC,UAAU,OAAO;;CAGzB,YAAY,WAAW,WAAW,aAAa;AAC7C,OAAK,CAAC,UAAU,UAAU,WAAW,WAAW,SAAS;;CAG3D,eAAe,aAAa,iBAAiB;AAC3C,OAAK,CAAC,UAAU,aAAa,aAAa,aAAa;;CAE1D,EAAE,CACJ;;;;;;;;;;;;;;;AAoBD,SAAgB,aAAa,QAA8B;AACzD,eAAc,UAAU,CAAC,KAAK,OAAO;;;;;;;;;;;;AAavC,SAAgB,kBAAwB;AACtC,eAAc,UAAU,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;AAsBpC,SAAgB,cAAoE;CAClF,MAAM,QAAQ,cAAc,UAAU;AACtC,QAAO;EACL,SAAS,MAAM;EACf,QAAQ,MAAM;EACd,WAAW,MAAM;EACjB,WAAW,MAAM;EACjB,cAAc,MAAM;EACpB,UAAU,MAAM;EAChB,cAAc,MAAM;EACpB,OAAO,MAAM;EACb,WAAW,MAAM;EACjB,cAAc,MAAM;EACrB;;;;;;;;;;;;;;;;;;;;;;;;AAyBH,MAAa,sBAAsB,cAAc"}
|
package/dist/svelte.cjs
ADDED
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
const require_store = require('./store.cjs');
|
|
2
|
+
let svelte_store = require("svelte/store");
|
|
3
|
+
|
|
4
|
+
//#region src/svelte.ts
|
|
5
|
+
/**
|
|
6
|
+
* Commerce Engine Checkout - Svelte Binding
|
|
7
|
+
*
|
|
8
|
+
* Svelte stores for checkout integration with automatic reactivity.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```svelte
|
|
12
|
+
* <script>
|
|
13
|
+
* import { checkout, initCheckout } from "@commercengine/checkout/svelte";
|
|
14
|
+
* import { onMount } from "svelte";
|
|
15
|
+
*
|
|
16
|
+
* // Initialize once at app root (+layout.svelte)
|
|
17
|
+
* onMount(() => {
|
|
18
|
+
* initCheckout({
|
|
19
|
+
* storeId: "store_xxx",
|
|
20
|
+
* apiKey: "ak_xxx",
|
|
21
|
+
* });
|
|
22
|
+
* });
|
|
23
|
+
* <\/script>
|
|
24
|
+
*
|
|
25
|
+
* <button on:click={() => $checkout.openCart()} disabled={!$checkout.isReady}>
|
|
26
|
+
* Cart ({$checkout.cartCount})
|
|
27
|
+
* </button>
|
|
28
|
+
* ```
|
|
29
|
+
*
|
|
30
|
+
* @packageDocumentation
|
|
31
|
+
*/
|
|
32
|
+
/**
|
|
33
|
+
* Get current checkout value from Zustand store
|
|
34
|
+
*/
|
|
35
|
+
function getCheckoutValue() {
|
|
36
|
+
const state = require_store.checkoutStore.getState();
|
|
37
|
+
return {
|
|
38
|
+
isReady: state.isReady,
|
|
39
|
+
isOpen: state.isOpen,
|
|
40
|
+
cartCount: state.cartCount,
|
|
41
|
+
cartTotal: state.cartTotal,
|
|
42
|
+
cartCurrency: state.cartCurrency,
|
|
43
|
+
openCart: state.openCart,
|
|
44
|
+
openCheckout: state.openCheckout,
|
|
45
|
+
close: state.close,
|
|
46
|
+
addToCart: state.addToCart,
|
|
47
|
+
updateTokens: state.updateTokens
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
/**
|
|
51
|
+
* Svelte readable store for checkout state and actions
|
|
52
|
+
*
|
|
53
|
+
* Syncs with the Zustand store automatically.
|
|
54
|
+
*
|
|
55
|
+
* @example
|
|
56
|
+
* ```svelte
|
|
57
|
+
* <script>
|
|
58
|
+
* import { checkout } from "@commercengine/checkout/svelte";
|
|
59
|
+
* <\/script>
|
|
60
|
+
*
|
|
61
|
+
* <button on:click={() => $checkout.openCart()} disabled={!$checkout.isReady}>
|
|
62
|
+
* Cart ({$checkout.cartCount})
|
|
63
|
+
* </button>
|
|
64
|
+
* ```
|
|
65
|
+
*/
|
|
66
|
+
const checkout = (0, svelte_store.readable)(getCheckoutValue(), (set) => {
|
|
67
|
+
return require_store.checkoutStore.subscribe(() => {
|
|
68
|
+
set(getCheckoutValue());
|
|
69
|
+
});
|
|
70
|
+
});
|
|
71
|
+
/**
|
|
72
|
+
* Individual store for cart count (for fine-grained reactivity)
|
|
73
|
+
*
|
|
74
|
+
* @example
|
|
75
|
+
* ```svelte
|
|
76
|
+
* <script>
|
|
77
|
+
* import { cartCount } from "@commercengine/checkout/svelte";
|
|
78
|
+
* <\/script>
|
|
79
|
+
*
|
|
80
|
+
* <span class="badge">{$cartCount}</span>
|
|
81
|
+
* ```
|
|
82
|
+
*/
|
|
83
|
+
const cartCount = (0, svelte_store.readable)(require_store.checkoutStore.getState().cartCount, (set) => {
|
|
84
|
+
return require_store.checkoutStore.subscribe((state, prevState) => {
|
|
85
|
+
if (state.cartCount !== prevState.cartCount) set(state.cartCount);
|
|
86
|
+
});
|
|
87
|
+
});
|
|
88
|
+
/**
|
|
89
|
+
* Individual store for cart total
|
|
90
|
+
*/
|
|
91
|
+
const cartTotal = (0, svelte_store.readable)(require_store.checkoutStore.getState().cartTotal, (set) => {
|
|
92
|
+
return require_store.checkoutStore.subscribe((state, prevState) => {
|
|
93
|
+
if (state.cartTotal !== prevState.cartTotal) set(state.cartTotal);
|
|
94
|
+
});
|
|
95
|
+
});
|
|
96
|
+
/**
|
|
97
|
+
* Individual store for ready state
|
|
98
|
+
*/
|
|
99
|
+
const isReady = (0, svelte_store.readable)(require_store.checkoutStore.getState().isReady, (set) => {
|
|
100
|
+
return require_store.checkoutStore.subscribe((state, prevState) => {
|
|
101
|
+
if (state.isReady !== prevState.isReady) set(state.isReady);
|
|
102
|
+
});
|
|
103
|
+
});
|
|
104
|
+
/**
|
|
105
|
+
* Individual store for open state
|
|
106
|
+
*/
|
|
107
|
+
const isOpen = (0, svelte_store.readable)(require_store.checkoutStore.getState().isOpen, (set) => {
|
|
108
|
+
return require_store.checkoutStore.subscribe((state, prevState) => {
|
|
109
|
+
if (state.isOpen !== prevState.isOpen) set(state.isOpen);
|
|
110
|
+
});
|
|
111
|
+
});
|
|
112
|
+
|
|
113
|
+
//#endregion
|
|
114
|
+
exports.cartCount = cartCount;
|
|
115
|
+
exports.cartTotal = cartTotal;
|
|
116
|
+
exports.checkout = checkout;
|
|
117
|
+
exports.checkoutStore = require_store.checkoutStore;
|
|
118
|
+
exports.destroyCheckout = require_store.destroyCheckout;
|
|
119
|
+
exports.getCheckout = require_store.getCheckout;
|
|
120
|
+
exports.initCheckout = require_store.initCheckout;
|
|
121
|
+
exports.isOpen = isOpen;
|
|
122
|
+
exports.isReady = isReady;
|
|
123
|
+
exports.subscribeToCheckout = require_store.subscribeToCheckout;
|
|
124
|
+
//# sourceMappingURL=svelte.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"svelte.cjs","names":["checkoutStore"],"sources":["../src/svelte.ts"],"sourcesContent":["/**\n * Commerce Engine Checkout - Svelte Binding\n *\n * Svelte stores for checkout integration with automatic reactivity.\n *\n * @example\n * ```svelte\n * <script>\n * import { checkout, initCheckout } from \"@commercengine/checkout/svelte\";\n * import { onMount } from \"svelte\";\n *\n * // Initialize once at app root (+layout.svelte)\n * onMount(() => {\n * initCheckout({\n * storeId: \"store_xxx\",\n * apiKey: \"ak_xxx\",\n * });\n * });\n * </script>\n *\n * <button on:click={() => $checkout.openCart()} disabled={!$checkout.isReady}>\n * Cart ({$checkout.cartCount})\n * </button>\n * ```\n *\n * @packageDocumentation\n */\n\nimport { type Readable, readable } from \"svelte/store\";\nimport { checkoutStore } from \"./store\";\n\n// Re-export types from @commercengine/js\nexport type {\n AddToCartItem,\n AuthLoginData,\n AuthLogoutData,\n AuthMode,\n AuthRefreshData,\n CartData,\n Channel,\n CheckoutConfig,\n CheckoutEventType,\n Environment,\n ErrorData,\n LoginMethod,\n OrderData,\n QuickBuyConfig,\n SessionMode,\n UserInfo,\n} from \"@commercengine/js\";\n// Re-export everything from vanilla for convenience\nexport {\n type CheckoutActions,\n type CheckoutState,\n type CheckoutStore,\n checkoutStore,\n destroyCheckout,\n getCheckout,\n initCheckout,\n subscribeToCheckout,\n} from \"./store\";\n\n// =============================================================================\n// TYPES\n// =============================================================================\n\n/**\n * Checkout store value type\n */\nexport interface CheckoutValue {\n /** Whether checkout is ready to use */\n isReady: boolean;\n /** Whether checkout overlay is currently open */\n isOpen: boolean;\n /** Number of items in cart */\n cartCount: number;\n /** Cart subtotal amount */\n cartTotal: number;\n /** Cart currency code */\n cartCurrency: string;\n /** Open the cart drawer */\n openCart: () => void;\n /** Open the checkout drawer directly */\n openCheckout: () => void;\n /** Close the checkout overlay */\n close: () => void;\n /** Add item to cart */\n addToCart: (productId: string, variantId: string | null, quantity?: number) => void;\n /** Update authentication tokens */\n updateTokens: (accessToken: string, refreshToken?: string) => void;\n}\n\n// =============================================================================\n// STORES\n// =============================================================================\n\n/**\n * Get current checkout value from Zustand store\n */\nfunction getCheckoutValue(): CheckoutValue {\n const state = checkoutStore.getState();\n return {\n isReady: state.isReady,\n isOpen: state.isOpen,\n cartCount: state.cartCount,\n cartTotal: state.cartTotal,\n cartCurrency: state.cartCurrency,\n openCart: state.openCart,\n openCheckout: state.openCheckout,\n close: state.close,\n addToCart: state.addToCart,\n updateTokens: state.updateTokens,\n };\n}\n\n/**\n * Svelte readable store for checkout state and actions\n *\n * Syncs with the Zustand store automatically.\n *\n * @example\n * ```svelte\n * <script>\n * import { checkout } from \"@commercengine/checkout/svelte\";\n * </script>\n *\n * <button on:click={() => $checkout.openCart()} disabled={!$checkout.isReady}>\n * Cart ({$checkout.cartCount})\n * </button>\n * ```\n */\nexport const checkout: Readable<CheckoutValue> = readable(getCheckoutValue(), (set) => {\n // Subscribe to Zustand store and update Svelte store\n return checkoutStore.subscribe(() => {\n set(getCheckoutValue());\n });\n});\n\n/**\n * Individual store for cart count (for fine-grained reactivity)\n *\n * @example\n * ```svelte\n * <script>\n * import { cartCount } from \"@commercengine/checkout/svelte\";\n * </script>\n *\n * <span class=\"badge\">{$cartCount}</span>\n * ```\n */\nexport const cartCount: Readable<number> = readable(checkoutStore.getState().cartCount, (set) => {\n return checkoutStore.subscribe((state, prevState) => {\n if (state.cartCount !== prevState.cartCount) {\n set(state.cartCount);\n }\n });\n});\n\n/**\n * Individual store for cart total\n */\nexport const cartTotal: Readable<number> = readable(checkoutStore.getState().cartTotal, (set) => {\n return checkoutStore.subscribe((state, prevState) => {\n if (state.cartTotal !== prevState.cartTotal) {\n set(state.cartTotal);\n }\n });\n});\n\n/**\n * Individual store for ready state\n */\nexport const isReady: Readable<boolean> = readable(checkoutStore.getState().isReady, (set) => {\n return checkoutStore.subscribe((state, prevState) => {\n if (state.isReady !== prevState.isReady) {\n set(state.isReady);\n }\n });\n});\n\n/**\n * Individual store for open state\n */\nexport const isOpen: Readable<boolean> = readable(checkoutStore.getState().isOpen, (set) => {\n return checkoutStore.subscribe((state, prevState) => {\n if (state.isOpen !== prevState.isOpen) {\n set(state.isOpen);\n }\n });\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmGA,SAAS,mBAAkC;CACzC,MAAM,QAAQA,4BAAc,UAAU;AACtC,QAAO;EACL,SAAS,MAAM;EACf,QAAQ,MAAM;EACd,WAAW,MAAM;EACjB,WAAW,MAAM;EACjB,cAAc,MAAM;EACpB,UAAU,MAAM;EAChB,cAAc,MAAM;EACpB,OAAO,MAAM;EACb,WAAW,MAAM;EACjB,cAAc,MAAM;EACrB;;;;;;;;;;;;;;;;;;AAmBH,MAAa,sCAA6C,kBAAkB,GAAG,QAAQ;AAErF,QAAOA,4BAAc,gBAAgB;AACnC,MAAI,kBAAkB,CAAC;GACvB;EACF;;;;;;;;;;;;;AAcF,MAAa,uCAAuCA,4BAAc,UAAU,CAAC,YAAY,QAAQ;AAC/F,QAAOA,4BAAc,WAAW,OAAO,cAAc;AACnD,MAAI,MAAM,cAAc,UAAU,UAChC,KAAI,MAAM,UAAU;GAEtB;EACF;;;;AAKF,MAAa,uCAAuCA,4BAAc,UAAU,CAAC,YAAY,QAAQ;AAC/F,QAAOA,4BAAc,WAAW,OAAO,cAAc;AACnD,MAAI,MAAM,cAAc,UAAU,UAChC,KAAI,MAAM,UAAU;GAEtB;EACF;;;;AAKF,MAAa,qCAAsCA,4BAAc,UAAU,CAAC,UAAU,QAAQ;AAC5F,QAAOA,4BAAc,WAAW,OAAO,cAAc;AACnD,MAAI,MAAM,YAAY,UAAU,QAC9B,KAAI,MAAM,QAAQ;GAEpB;EACF;;;;AAKF,MAAa,oCAAqCA,4BAAc,UAAU,CAAC,SAAS,QAAQ;AAC1F,QAAOA,4BAAc,WAAW,OAAO,cAAc;AACnD,MAAI,MAAM,WAAW,UAAU,OAC7B,KAAI,MAAM,OAAO;GAEnB;EACF"}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import { a as destroyCheckout, c as subscribeToCheckout, i as checkoutStore, n as CheckoutState, o as getCheckout, r as CheckoutStore, s as initCheckout, t as CheckoutActions } from "./store.cjs";
|
|
2
|
+
import { AddToCartItem, AuthLoginData, AuthLogoutData, AuthMode, AuthRefreshData, CartData, Channel, CheckoutConfig, CheckoutEventType, Environment, ErrorData, LoginMethod, OrderData, QuickBuyConfig, SessionMode, UserInfo } from "@commercengine/js";
|
|
3
|
+
import { Readable } from "svelte/store";
|
|
4
|
+
|
|
5
|
+
//#region src/svelte.d.ts
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Checkout store value type
|
|
9
|
+
*/
|
|
10
|
+
interface CheckoutValue {
|
|
11
|
+
/** Whether checkout is ready to use */
|
|
12
|
+
isReady: boolean;
|
|
13
|
+
/** Whether checkout overlay is currently open */
|
|
14
|
+
isOpen: boolean;
|
|
15
|
+
/** Number of items in cart */
|
|
16
|
+
cartCount: number;
|
|
17
|
+
/** Cart subtotal amount */
|
|
18
|
+
cartTotal: number;
|
|
19
|
+
/** Cart currency code */
|
|
20
|
+
cartCurrency: string;
|
|
21
|
+
/** Open the cart drawer */
|
|
22
|
+
openCart: () => void;
|
|
23
|
+
/** Open the checkout drawer directly */
|
|
24
|
+
openCheckout: () => void;
|
|
25
|
+
/** Close the checkout overlay */
|
|
26
|
+
close: () => void;
|
|
27
|
+
/** Add item to cart */
|
|
28
|
+
addToCart: (productId: string, variantId: string | null, quantity?: number) => void;
|
|
29
|
+
/** Update authentication tokens */
|
|
30
|
+
updateTokens: (accessToken: string, refreshToken?: string) => void;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Svelte readable store for checkout state and actions
|
|
34
|
+
*
|
|
35
|
+
* Syncs with the Zustand store automatically.
|
|
36
|
+
*
|
|
37
|
+
* @example
|
|
38
|
+
* ```svelte
|
|
39
|
+
* <script>
|
|
40
|
+
* import { checkout } from "@commercengine/checkout/svelte";
|
|
41
|
+
* </script>
|
|
42
|
+
*
|
|
43
|
+
* <button on:click={() => $checkout.openCart()} disabled={!$checkout.isReady}>
|
|
44
|
+
* Cart ({$checkout.cartCount})
|
|
45
|
+
* </button>
|
|
46
|
+
* ```
|
|
47
|
+
*/
|
|
48
|
+
declare const checkout: Readable<CheckoutValue>;
|
|
49
|
+
/**
|
|
50
|
+
* Individual store for cart count (for fine-grained reactivity)
|
|
51
|
+
*
|
|
52
|
+
* @example
|
|
53
|
+
* ```svelte
|
|
54
|
+
* <script>
|
|
55
|
+
* import { cartCount } from "@commercengine/checkout/svelte";
|
|
56
|
+
* </script>
|
|
57
|
+
*
|
|
58
|
+
* <span class="badge">{$cartCount}</span>
|
|
59
|
+
* ```
|
|
60
|
+
*/
|
|
61
|
+
declare const cartCount: Readable<number>;
|
|
62
|
+
/**
|
|
63
|
+
* Individual store for cart total
|
|
64
|
+
*/
|
|
65
|
+
declare const cartTotal: Readable<number>;
|
|
66
|
+
/**
|
|
67
|
+
* Individual store for ready state
|
|
68
|
+
*/
|
|
69
|
+
declare const isReady: Readable<boolean>;
|
|
70
|
+
/**
|
|
71
|
+
* Individual store for open state
|
|
72
|
+
*/
|
|
73
|
+
declare const isOpen: Readable<boolean>;
|
|
74
|
+
//# sourceMappingURL=svelte.d.ts.map
|
|
75
|
+
//#endregion
|
|
76
|
+
export { type AddToCartItem, type AuthLoginData, type AuthLogoutData, type AuthMode, type AuthRefreshData, type CartData, type Channel, type CheckoutActions, type CheckoutConfig, type CheckoutEventType, type CheckoutState, type CheckoutStore, CheckoutValue, type Environment, type ErrorData, type LoginMethod, type OrderData, type QuickBuyConfig, type SessionMode, type UserInfo, cartCount, cartTotal, checkout, checkoutStore, destroyCheckout, getCheckout, initCheckout, isOpen, isReady, subscribeToCheckout };
|
|
77
|
+
//# sourceMappingURL=svelte.d.cts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"svelte.d.cts","names":[],"sources":["../src/svelte.ts"],"sourcesContent":[],"mappings":";;;;;;;;;UAqEiB,aAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA8DJ,UAAU,SAAS;;;;;;;;;;;;;cAmBnB,WAAW;;;;cAWX,WAAW;;;;cAWX,SAAS;;;;cAWT,QAAQ"}
|
package/dist/svelte.d.ts
ADDED
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import { a as destroyCheckout, c as subscribeToCheckout, i as checkoutStore, n as CheckoutState, o as getCheckout, r as CheckoutStore, s as initCheckout, t as CheckoutActions } from "./store.js";
|
|
2
|
+
import { AddToCartItem, AuthLoginData, AuthLogoutData, AuthMode, AuthRefreshData, CartData, Channel, CheckoutConfig, CheckoutEventType, Environment, ErrorData, LoginMethod, OrderData, QuickBuyConfig, SessionMode, UserInfo } from "@commercengine/js";
|
|
3
|
+
import { Readable } from "svelte/store";
|
|
4
|
+
|
|
5
|
+
//#region src/svelte.d.ts
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Checkout store value type
|
|
9
|
+
*/
|
|
10
|
+
interface CheckoutValue {
|
|
11
|
+
/** Whether checkout is ready to use */
|
|
12
|
+
isReady: boolean;
|
|
13
|
+
/** Whether checkout overlay is currently open */
|
|
14
|
+
isOpen: boolean;
|
|
15
|
+
/** Number of items in cart */
|
|
16
|
+
cartCount: number;
|
|
17
|
+
/** Cart subtotal amount */
|
|
18
|
+
cartTotal: number;
|
|
19
|
+
/** Cart currency code */
|
|
20
|
+
cartCurrency: string;
|
|
21
|
+
/** Open the cart drawer */
|
|
22
|
+
openCart: () => void;
|
|
23
|
+
/** Open the checkout drawer directly */
|
|
24
|
+
openCheckout: () => void;
|
|
25
|
+
/** Close the checkout overlay */
|
|
26
|
+
close: () => void;
|
|
27
|
+
/** Add item to cart */
|
|
28
|
+
addToCart: (productId: string, variantId: string | null, quantity?: number) => void;
|
|
29
|
+
/** Update authentication tokens */
|
|
30
|
+
updateTokens: (accessToken: string, refreshToken?: string) => void;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Svelte readable store for checkout state and actions
|
|
34
|
+
*
|
|
35
|
+
* Syncs with the Zustand store automatically.
|
|
36
|
+
*
|
|
37
|
+
* @example
|
|
38
|
+
* ```svelte
|
|
39
|
+
* <script>
|
|
40
|
+
* import { checkout } from "@commercengine/checkout/svelte";
|
|
41
|
+
* </script>
|
|
42
|
+
*
|
|
43
|
+
* <button on:click={() => $checkout.openCart()} disabled={!$checkout.isReady}>
|
|
44
|
+
* Cart ({$checkout.cartCount})
|
|
45
|
+
* </button>
|
|
46
|
+
* ```
|
|
47
|
+
*/
|
|
48
|
+
declare const checkout: Readable<CheckoutValue>;
|
|
49
|
+
/**
|
|
50
|
+
* Individual store for cart count (for fine-grained reactivity)
|
|
51
|
+
*
|
|
52
|
+
* @example
|
|
53
|
+
* ```svelte
|
|
54
|
+
* <script>
|
|
55
|
+
* import { cartCount } from "@commercengine/checkout/svelte";
|
|
56
|
+
* </script>
|
|
57
|
+
*
|
|
58
|
+
* <span class="badge">{$cartCount}</span>
|
|
59
|
+
* ```
|
|
60
|
+
*/
|
|
61
|
+
declare const cartCount: Readable<number>;
|
|
62
|
+
/**
|
|
63
|
+
* Individual store for cart total
|
|
64
|
+
*/
|
|
65
|
+
declare const cartTotal: Readable<number>;
|
|
66
|
+
/**
|
|
67
|
+
* Individual store for ready state
|
|
68
|
+
*/
|
|
69
|
+
declare const isReady: Readable<boolean>;
|
|
70
|
+
/**
|
|
71
|
+
* Individual store for open state
|
|
72
|
+
*/
|
|
73
|
+
declare const isOpen: Readable<boolean>;
|
|
74
|
+
//# sourceMappingURL=svelte.d.ts.map
|
|
75
|
+
//#endregion
|
|
76
|
+
export { type AddToCartItem, type AuthLoginData, type AuthLogoutData, type AuthMode, type AuthRefreshData, type CartData, type Channel, type CheckoutActions, type CheckoutConfig, type CheckoutEventType, type CheckoutState, type CheckoutStore, CheckoutValue, type Environment, type ErrorData, type LoginMethod, type OrderData, type QuickBuyConfig, type SessionMode, type UserInfo, cartCount, cartTotal, checkout, checkoutStore, destroyCheckout, getCheckout, initCheckout, isOpen, isReady, subscribeToCheckout };
|
|
77
|
+
//# sourceMappingURL=svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"svelte.d.ts","names":[],"sources":["../src/svelte.ts"],"sourcesContent":[],"mappings":";;;;;;;;;UAqEiB,aAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA8DJ,UAAU,SAAS;;;;;;;;;;;;;cAmBnB,WAAW;;;;cAWX,WAAW;;;;cAWX,SAAS;;;;cAWT,QAAQ"}
|
package/dist/svelte.js
ADDED
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
import { a as subscribeToCheckout, i as initCheckout, n as destroyCheckout, r as getCheckout, t as checkoutStore } from "./store.js";
|
|
2
|
+
import { readable } from "svelte/store";
|
|
3
|
+
|
|
4
|
+
//#region src/svelte.ts
|
|
5
|
+
/**
|
|
6
|
+
* Commerce Engine Checkout - Svelte Binding
|
|
7
|
+
*
|
|
8
|
+
* Svelte stores for checkout integration with automatic reactivity.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```svelte
|
|
12
|
+
* <script>
|
|
13
|
+
* import { checkout, initCheckout } from "@commercengine/checkout/svelte";
|
|
14
|
+
* import { onMount } from "svelte";
|
|
15
|
+
*
|
|
16
|
+
* // Initialize once at app root (+layout.svelte)
|
|
17
|
+
* onMount(() => {
|
|
18
|
+
* initCheckout({
|
|
19
|
+
* storeId: "store_xxx",
|
|
20
|
+
* apiKey: "ak_xxx",
|
|
21
|
+
* });
|
|
22
|
+
* });
|
|
23
|
+
* <\/script>
|
|
24
|
+
*
|
|
25
|
+
* <button on:click={() => $checkout.openCart()} disabled={!$checkout.isReady}>
|
|
26
|
+
* Cart ({$checkout.cartCount})
|
|
27
|
+
* </button>
|
|
28
|
+
* ```
|
|
29
|
+
*
|
|
30
|
+
* @packageDocumentation
|
|
31
|
+
*/
|
|
32
|
+
/**
|
|
33
|
+
* Get current checkout value from Zustand store
|
|
34
|
+
*/
|
|
35
|
+
function getCheckoutValue() {
|
|
36
|
+
const state = checkoutStore.getState();
|
|
37
|
+
return {
|
|
38
|
+
isReady: state.isReady,
|
|
39
|
+
isOpen: state.isOpen,
|
|
40
|
+
cartCount: state.cartCount,
|
|
41
|
+
cartTotal: state.cartTotal,
|
|
42
|
+
cartCurrency: state.cartCurrency,
|
|
43
|
+
openCart: state.openCart,
|
|
44
|
+
openCheckout: state.openCheckout,
|
|
45
|
+
close: state.close,
|
|
46
|
+
addToCart: state.addToCart,
|
|
47
|
+
updateTokens: state.updateTokens
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
/**
|
|
51
|
+
* Svelte readable store for checkout state and actions
|
|
52
|
+
*
|
|
53
|
+
* Syncs with the Zustand store automatically.
|
|
54
|
+
*
|
|
55
|
+
* @example
|
|
56
|
+
* ```svelte
|
|
57
|
+
* <script>
|
|
58
|
+
* import { checkout } from "@commercengine/checkout/svelte";
|
|
59
|
+
* <\/script>
|
|
60
|
+
*
|
|
61
|
+
* <button on:click={() => $checkout.openCart()} disabled={!$checkout.isReady}>
|
|
62
|
+
* Cart ({$checkout.cartCount})
|
|
63
|
+
* </button>
|
|
64
|
+
* ```
|
|
65
|
+
*/
|
|
66
|
+
const checkout = readable(getCheckoutValue(), (set) => {
|
|
67
|
+
return checkoutStore.subscribe(() => {
|
|
68
|
+
set(getCheckoutValue());
|
|
69
|
+
});
|
|
70
|
+
});
|
|
71
|
+
/**
|
|
72
|
+
* Individual store for cart count (for fine-grained reactivity)
|
|
73
|
+
*
|
|
74
|
+
* @example
|
|
75
|
+
* ```svelte
|
|
76
|
+
* <script>
|
|
77
|
+
* import { cartCount } from "@commercengine/checkout/svelte";
|
|
78
|
+
* <\/script>
|
|
79
|
+
*
|
|
80
|
+
* <span class="badge">{$cartCount}</span>
|
|
81
|
+
* ```
|
|
82
|
+
*/
|
|
83
|
+
const cartCount = readable(checkoutStore.getState().cartCount, (set) => {
|
|
84
|
+
return checkoutStore.subscribe((state, prevState) => {
|
|
85
|
+
if (state.cartCount !== prevState.cartCount) set(state.cartCount);
|
|
86
|
+
});
|
|
87
|
+
});
|
|
88
|
+
/**
|
|
89
|
+
* Individual store for cart total
|
|
90
|
+
*/
|
|
91
|
+
const cartTotal = readable(checkoutStore.getState().cartTotal, (set) => {
|
|
92
|
+
return checkoutStore.subscribe((state, prevState) => {
|
|
93
|
+
if (state.cartTotal !== prevState.cartTotal) set(state.cartTotal);
|
|
94
|
+
});
|
|
95
|
+
});
|
|
96
|
+
/**
|
|
97
|
+
* Individual store for ready state
|
|
98
|
+
*/
|
|
99
|
+
const isReady = readable(checkoutStore.getState().isReady, (set) => {
|
|
100
|
+
return checkoutStore.subscribe((state, prevState) => {
|
|
101
|
+
if (state.isReady !== prevState.isReady) set(state.isReady);
|
|
102
|
+
});
|
|
103
|
+
});
|
|
104
|
+
/**
|
|
105
|
+
* Individual store for open state
|
|
106
|
+
*/
|
|
107
|
+
const isOpen = readable(checkoutStore.getState().isOpen, (set) => {
|
|
108
|
+
return checkoutStore.subscribe((state, prevState) => {
|
|
109
|
+
if (state.isOpen !== prevState.isOpen) set(state.isOpen);
|
|
110
|
+
});
|
|
111
|
+
});
|
|
112
|
+
|
|
113
|
+
//#endregion
|
|
114
|
+
export { cartCount, cartTotal, checkout, checkoutStore, destroyCheckout, getCheckout, initCheckout, isOpen, isReady, subscribeToCheckout };
|
|
115
|
+
//# sourceMappingURL=svelte.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"svelte.js","names":[],"sources":["../src/svelte.ts"],"sourcesContent":["/**\n * Commerce Engine Checkout - Svelte Binding\n *\n * Svelte stores for checkout integration with automatic reactivity.\n *\n * @example\n * ```svelte\n * <script>\n * import { checkout, initCheckout } from \"@commercengine/checkout/svelte\";\n * import { onMount } from \"svelte\";\n *\n * // Initialize once at app root (+layout.svelte)\n * onMount(() => {\n * initCheckout({\n * storeId: \"store_xxx\",\n * apiKey: \"ak_xxx\",\n * });\n * });\n * </script>\n *\n * <button on:click={() => $checkout.openCart()} disabled={!$checkout.isReady}>\n * Cart ({$checkout.cartCount})\n * </button>\n * ```\n *\n * @packageDocumentation\n */\n\nimport { type Readable, readable } from \"svelte/store\";\nimport { checkoutStore } from \"./store\";\n\n// Re-export types from @commercengine/js\nexport type {\n AddToCartItem,\n AuthLoginData,\n AuthLogoutData,\n AuthMode,\n AuthRefreshData,\n CartData,\n Channel,\n CheckoutConfig,\n CheckoutEventType,\n Environment,\n ErrorData,\n LoginMethod,\n OrderData,\n QuickBuyConfig,\n SessionMode,\n UserInfo,\n} from \"@commercengine/js\";\n// Re-export everything from vanilla for convenience\nexport {\n type CheckoutActions,\n type CheckoutState,\n type CheckoutStore,\n checkoutStore,\n destroyCheckout,\n getCheckout,\n initCheckout,\n subscribeToCheckout,\n} from \"./store\";\n\n// =============================================================================\n// TYPES\n// =============================================================================\n\n/**\n * Checkout store value type\n */\nexport interface CheckoutValue {\n /** Whether checkout is ready to use */\n isReady: boolean;\n /** Whether checkout overlay is currently open */\n isOpen: boolean;\n /** Number of items in cart */\n cartCount: number;\n /** Cart subtotal amount */\n cartTotal: number;\n /** Cart currency code */\n cartCurrency: string;\n /** Open the cart drawer */\n openCart: () => void;\n /** Open the checkout drawer directly */\n openCheckout: () => void;\n /** Close the checkout overlay */\n close: () => void;\n /** Add item to cart */\n addToCart: (productId: string, variantId: string | null, quantity?: number) => void;\n /** Update authentication tokens */\n updateTokens: (accessToken: string, refreshToken?: string) => void;\n}\n\n// =============================================================================\n// STORES\n// =============================================================================\n\n/**\n * Get current checkout value from Zustand store\n */\nfunction getCheckoutValue(): CheckoutValue {\n const state = checkoutStore.getState();\n return {\n isReady: state.isReady,\n isOpen: state.isOpen,\n cartCount: state.cartCount,\n cartTotal: state.cartTotal,\n cartCurrency: state.cartCurrency,\n openCart: state.openCart,\n openCheckout: state.openCheckout,\n close: state.close,\n addToCart: state.addToCart,\n updateTokens: state.updateTokens,\n };\n}\n\n/**\n * Svelte readable store for checkout state and actions\n *\n * Syncs with the Zustand store automatically.\n *\n * @example\n * ```svelte\n * <script>\n * import { checkout } from \"@commercengine/checkout/svelte\";\n * </script>\n *\n * <button on:click={() => $checkout.openCart()} disabled={!$checkout.isReady}>\n * Cart ({$checkout.cartCount})\n * </button>\n * ```\n */\nexport const checkout: Readable<CheckoutValue> = readable(getCheckoutValue(), (set) => {\n // Subscribe to Zustand store and update Svelte store\n return checkoutStore.subscribe(() => {\n set(getCheckoutValue());\n });\n});\n\n/**\n * Individual store for cart count (for fine-grained reactivity)\n *\n * @example\n * ```svelte\n * <script>\n * import { cartCount } from \"@commercengine/checkout/svelte\";\n * </script>\n *\n * <span class=\"badge\">{$cartCount}</span>\n * ```\n */\nexport const cartCount: Readable<number> = readable(checkoutStore.getState().cartCount, (set) => {\n return checkoutStore.subscribe((state, prevState) => {\n if (state.cartCount !== prevState.cartCount) {\n set(state.cartCount);\n }\n });\n});\n\n/**\n * Individual store for cart total\n */\nexport const cartTotal: Readable<number> = readable(checkoutStore.getState().cartTotal, (set) => {\n return checkoutStore.subscribe((state, prevState) => {\n if (state.cartTotal !== prevState.cartTotal) {\n set(state.cartTotal);\n }\n });\n});\n\n/**\n * Individual store for ready state\n */\nexport const isReady: Readable<boolean> = readable(checkoutStore.getState().isReady, (set) => {\n return checkoutStore.subscribe((state, prevState) => {\n if (state.isReady !== prevState.isReady) {\n set(state.isReady);\n }\n });\n});\n\n/**\n * Individual store for open state\n */\nexport const isOpen: Readable<boolean> = readable(checkoutStore.getState().isOpen, (set) => {\n return checkoutStore.subscribe((state, prevState) => {\n if (state.isOpen !== prevState.isOpen) {\n set(state.isOpen);\n }\n });\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmGA,SAAS,mBAAkC;CACzC,MAAM,QAAQ,cAAc,UAAU;AACtC,QAAO;EACL,SAAS,MAAM;EACf,QAAQ,MAAM;EACd,WAAW,MAAM;EACjB,WAAW,MAAM;EACjB,cAAc,MAAM;EACpB,UAAU,MAAM;EAChB,cAAc,MAAM;EACpB,OAAO,MAAM;EACb,WAAW,MAAM;EACjB,cAAc,MAAM;EACrB;;;;;;;;;;;;;;;;;;AAmBH,MAAa,WAAoC,SAAS,kBAAkB,GAAG,QAAQ;AAErF,QAAO,cAAc,gBAAgB;AACnC,MAAI,kBAAkB,CAAC;GACvB;EACF;;;;;;;;;;;;;AAcF,MAAa,YAA8B,SAAS,cAAc,UAAU,CAAC,YAAY,QAAQ;AAC/F,QAAO,cAAc,WAAW,OAAO,cAAc;AACnD,MAAI,MAAM,cAAc,UAAU,UAChC,KAAI,MAAM,UAAU;GAEtB;EACF;;;;AAKF,MAAa,YAA8B,SAAS,cAAc,UAAU,CAAC,YAAY,QAAQ;AAC/F,QAAO,cAAc,WAAW,OAAO,cAAc;AACnD,MAAI,MAAM,cAAc,UAAU,UAChC,KAAI,MAAM,UAAU;GAEtB;EACF;;;;AAKF,MAAa,UAA6B,SAAS,cAAc,UAAU,CAAC,UAAU,QAAQ;AAC5F,QAAO,cAAc,WAAW,OAAO,cAAc;AACnD,MAAI,MAAM,YAAY,UAAU,QAC9B,KAAI,MAAM,QAAQ;GAEpB;EACF;;;;AAKF,MAAa,SAA4B,SAAS,cAAc,UAAU,CAAC,SAAS,QAAQ;AAC1F,QAAO,cAAc,WAAW,OAAO,cAAc;AACnD,MAAI,MAAM,WAAW,UAAU,OAC7B,KAAI,MAAM,OAAO;GAEnB;EACF"}
|