storefront-layouts-staging 1.0.0-staging.0

package/dist/hooks/use-catalog-price-range.d.ts

@@ -0,0 +1,17 @@
+import { type PriceableItem } from '../lib/utils/catalog-price-bounds';
+export type UseCatalogPriceRangeOptions = {
+    /** Used when the catalog is empty (e.g. 5000 retail, 100 food). */
+    fallbackMax?: number;
+};
+export declare function useCatalogPriceRange(items: PriceableItem[], options?: UseCatalogPriceRangeOptions): {
+    priceRange: [number, number];
+    setPriceRange: import("react").Dispatch<import("react").SetStateAction<[number, number]>>;
+    catalogBounds: {
+        min: number;
+        max: number;
+    };
+    sliderMax: number;
+    resetPriceRange: () => void;
+    hasActivePriceFilter: boolean;
+};
+//# sourceMappingURL=use-catalog-price-range.d.ts.map

package/dist/hooks/use-catalog-price-range.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-catalog-price-range.d.ts","sourceRoot":"","sources":["../../src/hooks/use-catalog-price-range.ts"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,kCAAkC,CAAC;AAE1C,MAAM,MAAM,2BAA2B,GAAG;IACxC,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,aAAa,EAAE,EACtB,OAAO,GAAE,2BAAgC;;;;;;;;;;EAiC1C"}

package/dist/hooks/use-catalog-price-range.js

@@ -0,0 +1,26 @@
+'use client';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { getCatalogPriceBounds, } from '../lib/utils/catalog-price-bounds.js';
+export function useCatalogPriceRange(items, options = {}) {
+    const fallbackMax = options.fallbackMax ?? 5000;
+    const catalogBounds = useMemo(() => getCatalogPriceBounds(items, fallbackMax), [items, fallbackMax]);
+    const [priceRange, setPriceRange] = useState(() => [
+        catalogBounds.min,
+        catalogBounds.max,
+    ]);
+    useEffect(() => {
+        setPriceRange([catalogBounds.min, catalogBounds.max]);
+    }, [catalogBounds.min, catalogBounds.max]);
+    const resetPriceRange = useCallback(() => {
+        setPriceRange([catalogBounds.min, catalogBounds.max]);
+    }, [catalogBounds.min, catalogBounds.max]);
+    const hasActivePriceFilter = priceRange[0] > catalogBounds.min || priceRange[1] < catalogBounds.max;
+    return {
+        priceRange,
+        setPriceRange,
+        catalogBounds,
+        sliderMax: catalogBounds.max,
+        resetPriceRange,
+        hasActivePriceFilter,
+    };
+}

package/dist/hooks/use-checkout-fees.d.ts

@@ -0,0 +1,16 @@
+import { type CheckoutFeeBreakdown } from '../lib/services/fees.service';
+export interface UseCheckoutFeesOptions {
+    storeId?: string;
+    subtotal: number;
+    currency: string;
+    shippingCost?: number;
+    debounceMs?: number;
+    onError?: (message: string) => void;
+}
+export declare function useCheckoutFees({ storeId, subtotal, currency, shippingCost, debounceMs, onError, }: UseCheckoutFeesOptions): {
+    feeBreakdown: CheckoutFeeBreakdown;
+    loading: boolean;
+    totalPayable: number;
+    displayLines: import("../lib/services/fees.service").CheckoutFeeLine[];
+};
+//# sourceMappingURL=use-checkout-fees.d.ts.map

package/dist/hooks/use-checkout-fees.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-checkout-fees.d.ts","sourceRoot":"","sources":["../../src/hooks/use-checkout-fees.ts"],"names":[],"mappings":"AAGA,OAAO,EAIL,KAAK,oBAAoB,EAC1B,MAAM,6BAA6B,CAAC;AAiCrC,MAAM,WAAW,sBAAsB;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAED,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAgB,EAChB,UAAgB,EAChB,OAAO,GACR,EAAE,sBAAsB;;;;;EAqFxB"}

package/dist/hooks/use-checkout-fees.js

@@ -0,0 +1,105 @@
+'use client';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { EMPTY_CHECKOUT_FEE_BREAKDOWN, feesService, normalizeCheckoutFeeBreakdown, } from '../lib/services/fees.service.js';
+const STORAGE_PREFIX = 'checkoutFees:';
+function readStoredBreakdown(storeId) {
+    if (typeof window === 'undefined')
+        return null;
+    try {
+        const raw = sessionStorage.getItem(`${STORAGE_PREFIX}${storeId}`);
+        if (!raw)
+            return null;
+        return JSON.parse(raw);
+    }
+    catch {
+        return null;
+    }
+}
+function writeStoredBreakdown(storeId, breakdown) {
+    if (typeof window === 'undefined')
+        return;
+    try {
+        sessionStorage.setItem(`${STORAGE_PREFIX}${storeId}`, JSON.stringify(breakdown));
+    }
+    catch {
+        // ignore quota errors
+    }
+}
+function buildRequestKey(storeId, subtotal, currency, shippingCost) {
+    return `${storeId}:${subtotal.toFixed(2)}:${currency}:${shippingCost.toFixed(2)}`;
+}
+export function useCheckoutFees({ storeId, subtotal, currency, shippingCost = 0, debounceMs = 300, onError, }) {
+    const [feeBreakdown, setFeeBreakdown] = useState(() => storeId ? readStoredBreakdown(storeId) : null);
+    const [loading, setLoading] = useState(false);
+    const onErrorRef = useRef(onError);
+    onErrorRef.current = onError;
+    const lastFetchedKeyRef = useRef(null);
+    const inFlightKeyRef = useRef(null);
+    useEffect(() => {
+        if (!storeId || subtotal <= 0) {
+            setFeeBreakdown(null);
+            setLoading(false);
+            lastFetchedKeyRef.current = null;
+            inFlightKeyRef.current = null;
+            return;
+        }
+        const requestKey = buildRequestKey(storeId, subtotal, currency, shippingCost);
+        if (requestKey === lastFetchedKeyRef.current) {
+            return;
+        }
+        let cancelled = false;
+        const timer = window.setTimeout(async () => {
+            if (inFlightKeyRef.current === requestKey) {
+                return;
+            }
+            inFlightKeyRef.current = requestKey;
+            setLoading(true);
+            try {
+                const result = await feesService.calculateFees({
+                    storeId,
+                    subtotal,
+                    currency,
+                    shippingCost,
+                });
+                if (cancelled)
+                    return;
+                const breakdown = normalizeCheckoutFeeBreakdown(result, subtotal, shippingCost);
+                setFeeBreakdown(breakdown);
+                writeStoredBreakdown(storeId, breakdown);
+                lastFetchedKeyRef.current = requestKey;
+            }
+            catch (error) {
+                if (cancelled)
+                    return;
+                setFeeBreakdown(null);
+                lastFetchedKeyRef.current = null;
+                const message = error instanceof Error ? error.message : 'Unable to calculate checkout fees';
+                onErrorRef.current?.(message);
+            }
+            finally {
+                if (inFlightKeyRef.current === requestKey) {
+                    inFlightKeyRef.current = null;
+                }
+                if (!cancelled)
+                    setLoading(false);
+            }
+        }, debounceMs);
+        return () => {
+            cancelled = true;
+            window.clearTimeout(timer);
+        };
+    }, [storeId, subtotal, currency, shippingCost, debounceMs]);
+    const totalPayable = useMemo(() => {
+        if (feeBreakdown) {
+            return feeBreakdown.totalPayable;
+        }
+        return Math.max(0, subtotal + shippingCost);
+    }, [feeBreakdown, subtotal, shippingCost]);
+    const displayLines = feeBreakdown?.customerLines ?? EMPTY_CHECKOUT_FEE_BREAKDOWN.customerLines;
+    return {
+        feeBreakdown,
+        loading,
+        totalPayable,
+        displayLines,
+    };
+}

package/dist/hooks/use-content-ready.d.ts

@@ -0,0 +1,17 @@
+interface UseContentReadyOptions {
+    pathname: string;
+    enabled?: boolean;
+    minDisplayTime?: number;
+    maxWaitTime?: number;
+    checkInterval?: number;
+}
+/**
+ * Hook to detect when page content is ready for display
+ * Uses DOM observation to verify key content elements are present
+ */
+export declare function useContentReady({ pathname, enabled, minDisplayTime, maxWaitTime, checkInterval, }: UseContentReadyOptions): {
+    isContentReady: boolean;
+    contentPercentage: number;
+};
+export {};
+//# sourceMappingURL=use-content-ready.d.ts.map

package/dist/hooks/use-content-ready.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-content-ready.d.ts","sourceRoot":"","sources":["../../src/hooks/use-content-ready.ts"],"names":[],"mappings":"AAKA,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,OAAc,EACd,cAAoB,EACpB,WAAkB,EAClB,aAAmB,GACpB,EAAE,sBAAsB;;;EA+NxB"}

package/dist/hooks/use-content-ready.js

@@ -0,0 +1,197 @@
+'use client';
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { getContentSelectors, detectRouteType } from '../lib/content-selectors.js';
+/**
+ * Hook to detect when page content is ready for display
+ * Uses DOM observation to verify key content elements are present
+ */
+export function useContentReady({ pathname, enabled = true, minDisplayTime = 300, maxWaitTime = 5000, checkInterval = 100, }) {
+    const [isContentReady, setIsContentReady] = useState(false);
+    const [contentPercentage, setContentPercentage] = useState(0);
+    const observerRef = useRef(null);
+    const checkIntervalRef = useRef(null);
+    const startTimeRef = useRef(null);
+    const minTimeTimeoutRef = useRef(null);
+    const checkContent = useCallback(() => {
+        if (!enabled || typeof window === 'undefined') {
+            return false;
+        }
+        // Quick check: if document is ready and has substantial content, consider it ready
+        if (document.readyState === 'complete') {
+            const bodyHeight = document.body.scrollHeight;
+            const viewportHeight = window.innerHeight;
+            // If body has more than viewport height, likely content is loaded
+            if (bodyHeight > viewportHeight * 0.5) {
+                const routeType = detectRouteType(pathname);
+                const config = getContentSelectors(routeType);
+                // For generic pages, be more lenient
+                if (routeType === 'generic') {
+                    return true; // If document is complete and has height, consider ready
+                }
+            }
+        }
+        const routeType = detectRouteType(pathname);
+        const config = getContentSelectors(routeType);
+        // Check required selectors first
+        if (config.requiredSelectors && config.requiredSelectors.length > 0) {
+            const allRequiredPresent = config.requiredSelectors.every(selector => {
+                const elements = document.querySelectorAll(selector);
+                return elements.length > 0 && Array.from(elements).some(el => {
+                    const rect = el.getBoundingClientRect();
+                    return rect.width > 0 && rect.height > 0 && window.getComputedStyle(el).visibility !== 'hidden';
+                });
+            });
+            if (!allRequiredPresent) {
+                setContentPercentage(0);
+                return false;
+            }
+        }
+        // Check all selectors and count visible elements
+        let totalFound = 0;
+        let totalExpected = 0;
+        for (const selector of config.selectors) {
+            const elements = document.querySelectorAll(selector);
+            totalExpected += elements.length;
+            const visibleElements = Array.from(elements).filter(el => {
+                const rect = el.getBoundingClientRect();
+                const style = window.getComputedStyle(el);
+                return (rect.width > 0 &&
+                    rect.height > 0 &&
+                    style.visibility !== 'hidden' &&
+                    style.display !== 'none' &&
+                    style.opacity !== '0');
+            });
+            totalFound += visibleElements.length;
+        }
+        // Calculate percentage
+        const percentage = totalExpected > 0 ? (totalFound / totalExpected) * 100 : 0;
+        setContentPercentage(percentage);
+        // Check if content is ready based on config
+        let isReady = false;
+        if (config.minElements !== undefined) {
+            isReady = totalFound >= config.minElements;
+        }
+        if (config.minPercentage !== undefined) {
+            isReady = isReady || percentage >= config.minPercentage;
+        }
+        // If no specific requirements, just check if any content is present
+        if (config.minElements === undefined && config.minPercentage === undefined) {
+            isReady = totalFound > 0;
+        }
+        // For generic pages, also check if main content area exists (more lenient)
+        if (routeType === 'generic' && !isReady) {
+            // Check if there's any substantial content on the page
+            const mainContent = document.querySelector('main, [data-content-ready], .container, article');
+            if (mainContent) {
+                const rect = mainContent.getBoundingClientRect();
+                if (rect.height > 100) { // At least 100px of content
+                    isReady = true;
+                }
+            }
+        }
+        return isReady;
+    }, [pathname, enabled]);
+    useEffect(() => {
+        if (!enabled) {
+            setIsContentReady(false);
+            setContentPercentage(0);
+            return;
+        }
+        // Reset state when pathname changes
+        setIsContentReady(false);
+        setContentPercentage(0);
+        startTimeRef.current = Date.now();
+        // Clear any existing timeouts/intervals
+        if (checkIntervalRef.current) {
+            clearInterval(checkIntervalRef.current);
+        }
+        if (minTimeTimeoutRef.current) {
+            clearTimeout(minTimeTimeoutRef.current);
+        }
+        if (observerRef.current) {
+            observerRef.current.disconnect();
+        }
+        // Wait a bit for initial render, but check immediately if document is already ready
+        const checkImmediately = document.readyState === 'complete';
+        const delay = checkImmediately ? 50 : 100;
+        const initialDelay = setTimeout(() => {
+            // Start checking content
+            const performCheck = () => {
+                const now = Date.now();
+                const elapsed = startTimeRef.current ? now - startTimeRef.current : 0;
+                // Check if max wait time exceeded
+                if (elapsed >= maxWaitTime) {
+                    setIsContentReady(true);
+                    if (checkIntervalRef.current) {
+                        clearInterval(checkIntervalRef.current);
+                    }
+                    if (observerRef.current) {
+                        observerRef.current.disconnect();
+                    }
+                    return;
+                }
+                // Check if content is ready
+                const ready = checkContent();
+                // If ready and minimum time has passed, mark as ready immediately
+                if (ready && elapsed >= minDisplayTime) {
+                    setIsContentReady(true);
+                    if (checkIntervalRef.current) {
+                        clearInterval(checkIntervalRef.current);
+                    }
+                    if (observerRef.current) {
+                        observerRef.current.disconnect();
+                    }
+                    return; // Exit early
+                }
+                // If ready but minimum time hasn't passed, wait for minDisplayTime
+                if (ready && elapsed < minDisplayTime) {
+                    // Content is ready but minimum display time hasn't passed
+                    // Set a timeout to mark as ready after minDisplayTime
+                    if (minTimeTimeoutRef.current) {
+                        clearTimeout(minTimeTimeoutRef.current);
+                    }
+                    minTimeTimeoutRef.current = setTimeout(() => {
+                        setIsContentReady(true);
+                        if (checkIntervalRef.current) {
+                            clearInterval(checkIntervalRef.current);
+                        }
+                        if (observerRef.current) {
+                            observerRef.current.disconnect();
+                        }
+                    }, minDisplayTime - elapsed);
+                }
+            };
+            // Perform initial check
+            performCheck();
+            // Set up interval checking
+            checkIntervalRef.current = setInterval(performCheck, checkInterval);
+            // Set up MutationObserver to watch for DOM changes
+            observerRef.current = new MutationObserver(() => {
+                performCheck();
+            });
+            // Observe the entire document body for changes
+            observerRef.current.observe(document.body, {
+                childList: true,
+                subtree: true,
+                attributes: true,
+                attributeFilter: ['style', 'class'],
+            });
+        }, 100);
+        return () => {
+            clearTimeout(initialDelay);
+            if (checkIntervalRef.current) {
+                clearInterval(checkIntervalRef.current);
+            }
+            if (minTimeTimeoutRef.current) {
+                clearTimeout(minTimeTimeoutRef.current);
+            }
+            if (observerRef.current) {
+                observerRef.current.disconnect();
+            }
+        };
+    }, [pathname, enabled, minDisplayTime, maxWaitTime, checkInterval, checkContent]);
+    return {
+        isContentReady,
+        contentPercentage,
+    };
+}

package/dist/hooks/use-debounce.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A custom hook that debounces a value.
+ * Useful for preventing excessive re-renders or API calls on frequent updates (like typing).
+ */
+export declare function useDebounce<T>(value: T, delay: number): T;
+//# sourceMappingURL=use-debounce.d.ts.map

package/dist/hooks/use-debounce.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-debounce.d.ts","sourceRoot":"","sources":["../../src/hooks/use-debounce.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC,CAczD"}

package/dist/hooks/use-debounce.js

@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react';
+/**
+ * A custom hook that debounces a value.
+ * Useful for preventing excessive re-renders or API calls on frequent updates (like typing).
+ */
+export function useDebounce(value, delay) {
+    const [debouncedValue, setDebouncedValue] = useState(value);
+    useEffect(() => {
+        const handler = setTimeout(() => {
+            setDebouncedValue(value);
+        }, delay);
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [value, delay]);
+    return debouncedValue;
+}

package/dist/hooks/use-multi-store-checkout-fees.d.ts

@@ -0,0 +1,25 @@
+import { type CheckoutFeeBreakdown, type CheckoutFeeLine } from '../lib/services/fees.service';
+export interface MultiStoreSubtotal {
+    storeId: string;
+    subtotal: number;
+}
+export interface UseMultiStoreCheckoutFeesOptions {
+    stores: MultiStoreSubtotal[];
+    currency: string;
+    debounceMs?: number;
+    onError?: (message: string) => void;
+}
+/**
+ * Fee preview for a cart whose items span multiple real stores — not necessarily the
+ * "marketplace" virtual storefront specifically, any checkout grouped by more than one storeId.
+ * Fetches every store's breakdown in a single batched request (`/fees/calculate-batch`) rather
+ * than one `/fees/calculate` round trip per store, then sums them client-side — mirrors how the
+ * backend computes fees per-store during process-marketplace.
+ */
+export declare function useMultiStoreCheckoutFees({ stores, currency, debounceMs, onError, }: UseMultiStoreCheckoutFeesOptions): {
+    feeBreakdown: CheckoutFeeBreakdown;
+    loading: boolean;
+    totalPayable: number;
+    displayLines: CheckoutFeeLine[];
+};
+//# sourceMappingURL=use-multi-store-checkout-fees.d.ts.map

package/dist/hooks/use-multi-store-checkout-fees.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-multi-store-checkout-fees.d.ts","sourceRoot":"","sources":["../../src/hooks/use-multi-store-checkout-fees.ts"],"names":[],"mappings":"AAGA,OAAO,EAGL,KAAK,oBAAoB,EACzB,KAAK,eAAe,EACrB,MAAM,6BAA6B,CAAC;AAErC,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,gCAAgC;IAC/C,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAqDD;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,MAAM,EACN,QAAQ,EACR,UAAgB,EAChB,OAAO,GACR,EAAE,gCAAgC;;;;;EAwElC"}

package/dist/hooks/use-multi-store-checkout-fees.js

@@ -0,0 +1,116 @@
+'use client';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { EMPTY_CHECKOUT_FEE_BREAKDOWN, feesService, } from '../lib/services/fees.service.js';
+function sumFeeBreakdowns(breakdowns) {
+    if (breakdowns.length === 0)
+        return EMPTY_CHECKOUT_FEE_BREAKDOWN;
+    const combined = {
+        subtotal: 0,
+        shipping: 0,
+        merchant: { configuredBy: 'store_fee_settings', tax: 0, serviceCharge: 0, total: 0, lines: [] },
+        platform: {
+            configuredBy: 'backoffice',
+            collectionFeePayer: breakdowns[0].platform.collectionFeePayer,
+            charges: [],
+            total: 0,
+            customerTotal: 0,
+            lines: [],
+        },
+        customerLines: [],
+        totalPayable: 0,
+    };
+    const customerLines = [];
+    for (const breakdown of breakdowns) {
+        combined.subtotal += breakdown.subtotal;
+        combined.shipping += breakdown.shipping;
+        combined.merchant.tax += breakdown.merchant.tax;
+        combined.merchant.serviceCharge += breakdown.merchant.serviceCharge;
+        combined.merchant.total += breakdown.merchant.total;
+        combined.platform.charges.push(...breakdown.platform.charges);
+        combined.platform.total += breakdown.platform.total;
+        combined.platform.customerTotal += breakdown.platform.customerTotal;
+        combined.totalPayable += breakdown.totalPayable;
+        customerLines.push(...breakdown.customerLines);
+    }
+    // Merge same-label lines (e.g. "VAT" from each store) into one summed row for display.
+    const mergedByKey = new Map();
+    for (const line of customerLines) {
+        const key = `${line.source ?? 'merchant'}:${line.label}`;
+        const existing = mergedByKey.get(key);
+        if (existing) {
+            existing.amount += line.amount;
+        }
+        else {
+            mergedByKey.set(key, { ...line });
+        }
+    }
+    combined.customerLines = Array.from(mergedByKey.values());
+    combined.platform.lines = combined.customerLines.filter((line) => line.source === 'platform');
+    return combined;
+}
+/**
+ * Fee preview for a cart whose items span multiple real stores — not necessarily the
+ * "marketplace" virtual storefront specifically, any checkout grouped by more than one storeId.
+ * Fetches every store's breakdown in a single batched request (`/fees/calculate-batch`) rather
+ * than one `/fees/calculate` round trip per store, then sums them client-side — mirrors how the
+ * backend computes fees per-store during process-marketplace.
+ */
+export function useMultiStoreCheckoutFees({ stores, currency, debounceMs = 300, onError, }) {
+    const [feeBreakdown, setFeeBreakdown] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const onErrorRef = useRef(onError);
+    onErrorRef.current = onError;
+    const lastFetchedKeyRef = useRef(null);
+    const requestKey = useMemo(() => stores
+        .map((s) => `${s.storeId}:${s.subtotal.toFixed(2)}`)
+        .sort()
+        .join('|') + `::${currency}`, [stores, currency]);
+    useEffect(() => {
+        if (stores.length === 0 || stores.every((s) => s.subtotal <= 0)) {
+            setFeeBreakdown(null);
+            setLoading(false);
+            lastFetchedKeyRef.current = null;
+            return;
+        }
+        if (requestKey === lastFetchedKeyRef.current) {
+            return;
+        }
+        let cancelled = false;
+        const timer = window.setTimeout(async () => {
+            setLoading(true);
+            try {
+                const results = await feesService.calculateFeesBatch(stores.filter((s) => s.subtotal > 0).map((s) => ({ storeId: s.storeId, subtotal: s.subtotal })), currency);
+                if (cancelled)
+                    return;
+                const breakdowns = results
+                    .map((r) => r.feeBreakdown ?? null)
+                    .filter((b) => b != null);
+                setFeeBreakdown(sumFeeBreakdowns(breakdowns));
+                lastFetchedKeyRef.current = requestKey;
+            }
+            catch (error) {
+                if (cancelled)
+                    return;
+                setFeeBreakdown(null);
+                lastFetchedKeyRef.current = null;
+                const message = error instanceof Error ? error.message : 'Unable to calculate checkout fees';
+                onErrorRef.current?.(message);
+            }
+            finally {
+                if (!cancelled)
+                    setLoading(false);
+            }
+        }, debounceMs);
+        return () => {
+            cancelled = true;
+            window.clearTimeout(timer);
+        };
+    }, [requestKey, stores, currency, debounceMs]);
+    const totalPayable = useMemo(() => {
+        if (feeBreakdown)
+            return feeBreakdown.totalPayable;
+        return Math.max(0, stores.reduce((sum, s) => sum + s.subtotal, 0));
+    }, [feeBreakdown, stores]);
+    const displayLines = feeBreakdown?.customerLines ?? EMPTY_CHECKOUT_FEE_BREAKDOWN.customerLines;
+    return { feeBreakdown, loading, totalPayable, displayLines };
+}

package/dist/hooks/use-navigation-loading.d.ts

@@ -0,0 +1,4 @@
+export declare function useNavigationLoading(): {
+    navigateWithLoading: (href: string) => void;
+};
+//# sourceMappingURL=use-navigation-loading.d.ts.map

package/dist/hooks/use-navigation-loading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-navigation-loading.d.ts","sourceRoot":"","sources":["../../src/hooks/use-navigation-loading.ts"],"names":[],"mappings":"AAMA,wBAAgB,oBAAoB;gCAIa,MAAM;EAOtD"}

package/dist/hooks/use-navigation-loading.js

@@ -0,0 +1,14 @@
+'use client';
+import { useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import { useLoading } from '../lib/loading-context.js';
+export function useNavigationLoading() {
+    const router = useRouter();
+    const { startPageLoading, stopPageLoading } = useLoading();
+    const navigateWithLoading = useCallback((href) => {
+        startPageLoading();
+        router.push(href);
+        // Stop loading will be handled by the route change detection in LoadingProvider
+    }, [router, startPageLoading]);
+    return { navigateWithLoading };
+}

package/dist/hooks/use-payaza-checkout.d.ts

@@ -0,0 +1,15 @@
+import { PayazaCheckoutConfig, PayazaCheckoutResponse } from '../lib/payaza-checkout';
+interface UsePayazaCheckoutOptions {
+    /** Fallback only — prefer `publicKey` on each checkout config (backend currency-resolved key). */
+    publicKey?: string;
+    onSuccess?: (response: PayazaCheckoutResponse) => void;
+    onError?: (error: string) => void;
+    onClose?: () => void;
+}
+export declare function usePayazaCheckout({ publicKey, onSuccess, onError, onClose }: UsePayazaCheckoutOptions): {
+    checkout: (config: Omit<PayazaCheckoutConfig, "onSuccess" | "onError" | "onClose">) => Promise<void>;
+    isLoading: boolean;
+    error: string;
+};
+export {};
+//# sourceMappingURL=use-payaza-checkout.d.ts.map

package/dist/hooks/use-payaza-checkout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-payaza-checkout.d.ts","sourceRoot":"","sources":["../../src/hooks/use-payaza-checkout.ts"],"names":[],"mappings":"AAGA,OAAO,EAA0B,oBAAoB,EAAE,sBAAsB,EAA6B,MAAM,uBAAuB,CAAC;AAGxI,UAAU,wBAAwB;IAChC,kGAAkG;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACvD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,SAAc,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,wBAAwB;uBAiBzE,IAAI,CAAC,oBAAoB,EAAE,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;;;EA8GhG"}