storefront-layouts-staging 1.0.0-staging.0

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

@@ -0,0 +1,123 @@
+'use client';
+import { useState, useRef, useEffect } from 'react';
+import { initiatePayazaCheckout, teardownPayazaCheckoutDom } from '../lib/payaza-checkout.js';
+import { orderService } from '../lib/services/order.service.js';
+export function usePayazaCheckout({ publicKey = '', onSuccess, onError, onClose }) {
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const timeoutRef = useRef(null);
+    const mountedRef = useRef(true);
+    useEffect(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+                timeoutRef.current = null;
+            }
+        };
+    }, []);
+    const checkout = async (config) => {
+        const resolvedPublicKey = config.publicKey || publicKey;
+        setIsLoading(true);
+        setError(null);
+        let callbackFired = false;
+        let successFired = false;
+        const clearLoadingWithTimeout = () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+                timeoutRef.current = null;
+            }
+        };
+        const PAYAZA_TIMEOUT_MS = 45000;
+        const removePayazaOverlay = () => {
+            teardownPayazaCheckoutDom();
+        };
+        const setLoadingTimeout = () => {
+            timeoutRef.current = setTimeout(() => {
+                if (!callbackFired && mountedRef.current) {
+                    console.warn('[Payaza] Timeout: checkout did not complete within 45 seconds');
+                    setIsLoading(false);
+                    setError('Payment popup may not have opened. Please try again.');
+                    onError?.('Payment popup may not have opened. Please try again.');
+                    onClose?.();
+                    removePayazaOverlay();
+                }
+                timeoutRef.current = null;
+            }, PAYAZA_TIMEOUT_MS);
+        };
+        try {
+            const response = await initiatePayazaCheckout({
+                ...config,
+                publicKey: resolvedPublicKey,
+                onCheckoutLoaded: () => {
+                    clearLoadingWithTimeout();
+                    if (config.orderId) {
+                        void orderService.markPaymentInitiated(config.orderId).catch((err) => {
+                            console.warn('[Payaza] markPaymentInitiated failed:', err);
+                        });
+                    }
+                    if (mountedRef.current) {
+                        setIsLoading(false);
+                    }
+                },
+                onSuccess: (response) => {
+                    callbackFired = true;
+                    successFired = true;
+                    clearLoadingWithTimeout();
+                    setIsLoading(false);
+                    onSuccess?.(response);
+                },
+                onError: (errorMessage) => {
+                    callbackFired = true;
+                    clearLoadingWithTimeout();
+                    setIsLoading(false);
+                    setError(errorMessage);
+                    removePayazaOverlay();
+                    onError?.(errorMessage);
+                },
+                onClose: () => {
+                    callbackFired = true;
+                    clearLoadingWithTimeout();
+                    setIsLoading(false);
+                    removePayazaOverlay();
+                    if (!successFired) {
+                        onClose?.();
+                    }
+                },
+            });
+            if (response.status === 'success' && response.message === 'Checkout popup opened') {
+                setLoadingTimeout();
+                return;
+            }
+            if (response.status === 'success') {
+                callbackFired = true;
+                clearLoadingWithTimeout();
+                setIsLoading(false);
+                onSuccess?.(response);
+            }
+            else {
+                callbackFired = true;
+                clearLoadingWithTimeout();
+                const errorMessage = response.message || 'Checkout failed';
+                setIsLoading(false);
+                setError(errorMessage);
+                onError?.(errorMessage);
+            }
+        }
+        catch (err) {
+            callbackFired = true;
+            clearLoadingWithTimeout();
+            const errorMessage = err instanceof Error ? err.message : 'An unexpected error occurred';
+            setIsLoading(false);
+            setError(errorMessage);
+            removePayazaOverlay();
+            onError?.(errorMessage);
+        }
+    };
+    return {
+        checkout,
+        isLoading,
+        error,
+    };
+}

package/dist/hooks/use-product-variation-selection.d.ts

@@ -0,0 +1,26 @@
+import { type StoreProductVariant } from '../lib/product-variation-utils';
+export declare function useProductVariationSelection(variants?: StoreProductVariant[]): {
+    optionGroups: Record<string, string[]>;
+    selectedAttributes: Record<string, string>;
+    setAttribute: (key: string, value: string) => void;
+    selectedColor: string;
+    selectedSize: string;
+    setSelectedColor: (value: string) => void;
+    setSelectedSize: (value: string) => void;
+    matchingVariation: {
+        id: string;
+        name?: string;
+        value?: string;
+        attributes?: Record<string, string>;
+        price?: number;
+        compareAtPrice?: number;
+        sku?: string;
+        stock?: number;
+        inStock?: boolean;
+        isActive?: boolean;
+        images?: string[];
+    };
+    hasVariations: boolean;
+    resolveVariationId: () => string;
+};
+//# sourceMappingURL=use-product-variation-selection.d.ts.map

package/dist/hooks/use-product-variation-selection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-product-variation-selection.d.ts","sourceRoot":"","sources":["../../src/hooks/use-product-variation-selection.ts"],"names":[],"mappings":"AAGA,OAAO,EAIL,KAAK,mBAAmB,EACzB,MAAM,+BAA+B,CAAC;AAEvC,wBAAgB,4BAA4B,CAAC,QAAQ,CAAC,EAAE,mBAAmB,EAAE;;;wBAYpC,MAAM,SAAS,MAAM;;;8BAehC,MAAM;6BACP,MAAM;;;;;;;;;;;;;;;;EAKlC"}

package/dist/hooks/use-product-variation-selection.js

@@ -0,0 +1,26 @@
+'use client';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { findMatchingVariation, getDefaultSelectedAttributes, getVariationOptionGroups, } from '../lib/product-variation-utils.js';
+export function useProductVariationSelection(variants) {
+    const optionGroups = useMemo(() => getVariationOptionGroups(variants), [variants]);
+    const [selectedAttributes, setSelectedAttributes] = useState({});
+    useEffect(() => {
+        setSelectedAttributes(getDefaultSelectedAttributes(optionGroups));
+    }, [optionGroups]);
+    const setAttribute = useCallback((key, value) => {
+        setSelectedAttributes((previous) => ({ ...previous, [key]: value }));
+    }, []);
+    const matchingVariation = useMemo(() => findMatchingVariation(variants, selectedAttributes), [variants, selectedAttributes]);
+    return {
+        optionGroups,
+        selectedAttributes,
+        setAttribute,
+        selectedColor: selectedAttributes.color || '',
+        selectedSize: selectedAttributes.size || '',
+        setSelectedColor: (value) => setAttribute('color', value),
+        setSelectedSize: (value) => setAttribute('size', value),
+        matchingVariation,
+        hasVariations: Boolean(variants?.length),
+        resolveVariationId: () => matchingVariation?.id,
+    };
+}

package/dist/hooks/use-products-api.d.ts

@@ -0,0 +1,19 @@
+import { Product, ProductListParams } from '../lib/services/product.service';
+import { StoreConfig, StoreProduct } from '../lib/store-types';
+export interface UseProductsApiResult {
+    products: Product[] | StoreProduct[];
+    loading: boolean;
+    error: string | null;
+    pagination: {
+        page: number;
+        limit: number;
+        total: number;
+        totalPages: number;
+    } | null;
+    refetch: () => Promise<void>;
+}
+/**
+ * Hook to fetch products from API or use mock data for demo stores
+ */
+export declare function useProductsApi(storeConfig: StoreConfig | null, params?: Partial<ProductListParams>): UseProductsApiResult;
+//# sourceMappingURL=use-products-api.d.ts.map

package/dist/hooks/use-products-api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-products-api.d.ts","sourceRoot":"","sources":["../../src/hooks/use-products-api.ts"],"names":[],"mappings":"AACA,OAAO,EAAkB,OAAO,EAAE,iBAAiB,EAAqB,MAAM,gCAAgC,CAAC;AAE/G,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG9D,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,OAAO,EAAE,GAAG,YAAY,EAAE,CAAC;IACrC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,UAAU,EAAE;QACV,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,UAAU,EAAE,MAAM,CAAC;KACpB,GAAG,IAAI,CAAC;IACT,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B;AAED;;GAEG;AACH,wBAAgB,cAAc,CAC5B,WAAW,EAAE,WAAW,GAAG,IAAI,EAC/B,MAAM,GAAE,OAAO,CAAC,iBAAiB,CAAM,GACtC,oBAAoB,CAmFtB"}

package/dist/hooks/use-products-api.js

@@ -0,0 +1,84 @@
+import { useState, useEffect, useCallback } from 'react';
+import { productService } from '../lib/services/product.service.js';
+import { shouldUseAPI } from '../lib/utils/demo-detection.js';
+import { useLoading } from '../lib/loading-context.js';
+/**
+ * Hook to fetch products from API or use mock data for demo stores
+ */
+export function useProductsApi(storeConfig, params = {}) {
+    const [products, setProducts] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [pagination, setPagination] = useState(null);
+    // Get loading context if available
+    let loadingContext = null;
+    try {
+        loadingContext = useLoading();
+    }
+    catch {
+        // LoadingProvider not available, continue without it
+    }
+    const startBackendLoading = loadingContext?.startBackendLoading;
+    const stopBackendLoading = loadingContext?.stopBackendLoading;
+    const fetchProducts = useCallback(async () => {
+        if (!storeConfig) {
+            setLoading(false);
+            return;
+        }
+        try {
+            setLoading(true);
+            setError(null);
+            if (shouldUseAPI(storeConfig.slug) && storeConfig.id) {
+                // Use API for non-demo stores - signal backend loading
+                startBackendLoading?.();
+                const apiParams = {
+                    storeId: storeConfig.id,
+                    ...params,
+                };
+                const result = await productService.getProducts(apiParams);
+                setProducts(result.data);
+                setPagination(result.meta);
+            }
+            else {
+                // Use mock data for demo stores
+                const mockProducts = storeConfig.products || [];
+                setProducts(mockProducts);
+                setPagination({
+                    page: 1,
+                    limit: mockProducts.length,
+                    total: mockProducts.length,
+                    totalPages: 1,
+                });
+            }
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Failed to fetch products';
+            setError(errorMessage);
+            // Fallback to mock data on error
+            if (storeConfig) {
+                const mockProducts = storeConfig.products || [];
+                setProducts(mockProducts);
+                setPagination({
+                    page: 1,
+                    limit: mockProducts.length,
+                    total: mockProducts.length,
+                    totalPages: 1,
+                });
+            }
+        }
+        finally {
+            setLoading(false);
+            stopBackendLoading?.();
+        }
+    }, [storeConfig, params, startBackendLoading, stopBackendLoading]);
+    useEffect(() => {
+        fetchProducts();
+    }, [fetchProducts]);
+    return {
+        products,
+        loading,
+        error,
+        pagination,
+        refetch: fetchProducts,
+    };
+}

package/dist/hooks/use-shipping-quote.d.ts

@@ -0,0 +1,25 @@
+import { ShippingMethod } from '../lib/services/shipping.service';
+import { ShippingQuoteAddress, ShippingCustomerInfo } from '../lib/shipping-address.util';
+interface UseShippingQuoteOptions {
+    storeId: string;
+    productId: string;
+    productPrice: number;
+    currency: string;
+    quantity: number;
+    enabled?: boolean;
+    customerInfo?: ShippingCustomerInfo;
+    initialAddress?: Partial<ShippingQuoteAddress>;
+}
+export declare function useShippingQuote({ storeId, productId, productPrice, currency, quantity, enabled, customerInfo, initialAddress, }: UseShippingQuoteOptions): {
+    address: ShippingQuoteAddress;
+    setAddress: import("react").Dispatch<import("react").SetStateAction<ShippingQuoteAddress>>;
+    updateAddress: (patch: Partial<ShippingQuoteAddress>) => void;
+    methods: ShippingMethod[];
+    isCalculating: boolean;
+    error: string;
+    freeShippingEligible: boolean;
+    freeShippingThreshold: number;
+    recalculate: () => Promise<void>;
+};
+export {};
+//# sourceMappingURL=use-shipping-quote.d.ts.map

package/dist/hooks/use-shipping-quote.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-shipping-quote.d.ts","sourceRoot":"","sources":["../../src/hooks/use-shipping-quote.ts"],"names":[],"mappings":"AAGA,OAAO,EAAmB,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAClF,OAAO,EACL,oBAAoB,EACpB,oBAAoB,EAIrB,MAAM,6BAA6B,CAAC;AAErC,UAAU,uBAAuB;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,cAAc,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;CAChD;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,OAAc,EACd,YAAY,EACZ,cAAc,GACf,EAAE,uBAAuB;;;2BAWkB,OAAO,CAAC,oBAAoB,CAAC;;;;;;;EAsExE"}

package/dist/hooks/use-shipping-quote.js

@@ -0,0 +1,80 @@
+'use client';
+import { useState, useEffect, useCallback } from 'react';
+import { shippingService } from '../lib/services/shipping.service.js';
+import { EMPTY_SHIPPING_QUOTE_ADDRESS, canRequestShippingQuote, buildShippingCalculatePayload, } from '../lib/shipping-address.util.js';
+export function useShippingQuote({ storeId, productId, productPrice, currency, quantity, enabled = true, customerInfo, initialAddress, }) {
+    const [address, setAddress] = useState({
+        ...EMPTY_SHIPPING_QUOTE_ADDRESS,
+        ...initialAddress,
+    });
+    const [methods, setMethods] = useState([]);
+    const [isCalculating, setIsCalculating] = useState(false);
+    const [error, setError] = useState(null);
+    const [freeShippingEligible, setFreeShippingEligible] = useState(false);
+    const [freeShippingThreshold, setFreeShippingThreshold] = useState();
+    const updateAddress = useCallback((patch) => {
+        setAddress((prev) => ({ ...prev, ...patch }));
+    }, []);
+    const calculate = useCallback(async () => {
+        if (!enabled || !canRequestShippingQuote(address)) {
+            setMethods([]);
+            setError(null);
+            return;
+        }
+        setIsCalculating(true);
+        setError(null);
+        try {
+            const result = await shippingService.calculateShipping(buildShippingCalculatePayload({
+                storeId,
+                address,
+                items: [{ productId, quantity }],
+                subtotal: productPrice * quantity,
+                currency,
+                customerInfo,
+            }));
+            setMethods(result.methods || []);
+            setFreeShippingEligible(result.freeShippingEligible || false);
+            setFreeShippingThreshold(result.freeShippingThreshold);
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : 'Failed to calculate shipping';
+            setError(message);
+            setMethods([]);
+        }
+        finally {
+            setIsCalculating(false);
+        }
+    }, [enabled, address, storeId, productId, quantity, productPrice, currency, customerInfo]);
+    useEffect(() => {
+        if (!enabled)
+            return;
+        const timer = setTimeout(() => {
+            void calculate();
+        }, 500);
+        return () => clearTimeout(timer);
+    }, [
+        enabled,
+        address.country,
+        address.city,
+        address.street,
+        address.state,
+        address.zipCode,
+        address.phone,
+        quantity,
+        productId,
+        productPrice,
+        currency,
+        calculate,
+    ]);
+    return {
+        address,
+        setAddress,
+        updateAddress,
+        methods,
+        isCalculating,
+        error,
+        freeShippingEligible,
+        freeShippingThreshold,
+        recalculate: calculate,
+    };
+}

package/dist/hooks/use-store-api.d.ts

@@ -0,0 +1,12 @@
+import { StoreResponse } from '../lib/services/store.service';
+import { StoreConfig } from '../lib/store-config';
+export interface UseStoreApiResult {
+    store: StoreConfig | StoreResponse | null;
+    loading: boolean;
+    error: string | null;
+}
+/**
+ * Hook to fetch store data from API or use mock data for demo stores
+ */
+export declare function useStoreApi(storeSlug: string | undefined): UseStoreApiResult;
+//# sourceMappingURL=use-store-api.d.ts.map

package/dist/hooks/use-store-api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-store-api.d.ts","sourceRoot":"","sources":["../../src/hooks/use-store-api.ts"],"names":[],"mappings":"AACA,OAAO,EAAgB,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE3E,OAAO,EAAkB,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAGjE,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,WAAW,GAAG,aAAa,GAAG,IAAI,CAAC;IAC1C,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS,GAAG,iBAAiB,CAiE5E"}

package/dist/hooks/use-store-api.js

@@ -0,0 +1,73 @@
+import { useEffect, useState } from 'react';
+import { storeService } from '../lib/services/store.service.js';
+import { shouldUseAPI, getBaseStoreSlug } from '../lib/utils/demo-detection.js';
+import { getStoreConfig } from '../lib/store-config.js';
+import { useLoading } from '../lib/loading-context.js';
+/**
+ * Hook to fetch store data from API or use mock data for demo stores
+ */
+export function useStoreApi(storeSlug) {
+    const [store, setStore] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    // Get loading context if available
+    let loadingContext = null;
+    try {
+        loadingContext = useLoading();
+    }
+    catch {
+        // LoadingProvider not available, continue without it
+    }
+    const startBackendLoading = loadingContext?.startBackendLoading;
+    const stopBackendLoading = loadingContext?.stopBackendLoading;
+    useEffect(() => {
+        if (!storeSlug) {
+            setLoading(false);
+            return;
+        }
+        const fetchStore = async () => {
+            try {
+                setLoading(true);
+                setError(null);
+                if (shouldUseAPI(storeSlug)) {
+                    // Use API for non-demo stores - signal backend loading
+                    startBackendLoading?.();
+                    const baseSlug = getBaseStoreSlug(storeSlug);
+                    const storeData = await storeService.getStoreBySlug(baseSlug);
+                    // Transform API response to StoreConfig format if needed
+                    setStore(storeData);
+                }
+                else {
+                    // Use mock data for demo stores
+                    const baseSlug = getBaseStoreSlug(storeSlug);
+                    const mockStore = getStoreConfig(baseSlug);
+                    if (mockStore) {
+                        setStore(mockStore);
+                    }
+                    else {
+                        setError('Store not found');
+                    }
+                }
+            }
+            catch (err) {
+                const errorMessage = err instanceof Error ? err.message : 'Failed to fetch store';
+                setError(errorMessage);
+                // Fallback to mock data on error
+                if (storeSlug) {
+                    const baseSlug = getBaseStoreSlug(storeSlug);
+                    const mockStore = getStoreConfig(baseSlug);
+                    if (mockStore) {
+                        setStore(mockStore);
+                        setError(null);
+                    }
+                }
+            }
+            finally {
+                setLoading(false);
+                stopBackendLoading?.();
+            }
+        };
+        fetchStore();
+    }, [storeSlug, startBackendLoading, stopBackendLoading]);
+    return { store, loading, error };
+}

package/dist/hooks/usePreviewSlideSync.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Syncs hero carousel index when the template editor selects a slide in the inspector.
+ */
+export declare function usePreviewSlideSync(sectionKey: string, setCurrentSlide: (index: number) => void, pauseAutoplay?: () => void): void;
+//# sourceMappingURL=usePreviewSlideSync.d.ts.map

package/dist/hooks/usePreviewSlideSync.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePreviewSlideSync.d.ts","sourceRoot":"","sources":["../../src/hooks/usePreviewSlideSync.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,wBAAgB,mBAAmB,CACjC,UAAU,EAAE,MAAM,EAClB,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,EACxC,aAAa,CAAC,EAAE,MAAM,IAAI,QAiB3B"}

package/dist/hooks/usePreviewSlideSync.js

@@ -0,0 +1,28 @@
+'use client';
+import { useEffect } from 'react';
+import { PREVIEW_MSG } from '../preview/canvas/preview-messages.js';
+/**
+ * Syncs hero carousel index when the template editor selects a slide in the inspector.
+ */
+export function usePreviewSlideSync(sectionKey, setCurrentSlide, pauseAutoplay) {
+    useEffect(() => {
+        const onMessage = (event) => {
+            const d = event.data;
+            if (!d || typeof d !== 'object')
+                return;
+            if (d.type !== PREVIEW_MSG.SLIDE_INDEX_SYNC)
+                return;
+            if (d.sectionKey !== sectionKey)
+                return;
+            if (d.arrayField !== 'sliders')
+                return;
+            const index = Number(d.index);
+            if (!Number.isFinite(index) || index < 0)
+                return;
+            pauseAutoplay?.();
+            setCurrentSlide(index);
+        };
+        window.addEventListener('message', onMessage);
+        return () => window.removeEventListener('message', onMessage);
+    }, [sectionKey, setCurrentSlide, pauseAutoplay]);
+}