storefront-layouts 1.0.3 → 1.0.4

package/dist/lib/store-context.js

@@ -1,29 +1,19 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useState, useMemo, useCallback, useRef } from 'react';
-import { getStoreConfig } from './store-config.js';
-import { shouldUseAPI, getBaseStoreSlug } from './utils/demo-detection.js';
-import { storeService } from './services/store.service.js';
+import { createContext, useContext, useEffect, useState, useMemo, useCallback } from 'react';
+import { getStoreConfig } from './store-config';
+import { shouldUseAPI, getBaseStoreSlug } from './utils/demo-detection';
+import { storeService } from './services/store.service';
 // Note: cartService and wishlistService removed - using localStorage only for cart/wishlist
 // These services are only needed for shared pages (cart, wishlist, account) which aren't editable in the editor
-import { categoryService } from './services/category.service.js';
-import { productService } from './services/product.service.js';
-import { serviceService } from './services/service.service.js';
-import { transformCategoryToStoreCategory, transformProductToStoreProduct, transformServiceToStoreService, transformStoreResponseToConfig } from './store-config-utils.js';
-import { useLoading } from './loading-context.js';
-import { normalizePrice, isDeepEqual } from './utils/index.js';
-import { richFieldPlainTextForDisplay } from './rich-html.js';
-import { useAuth } from './auth-context.js';
-import { analyticsService } from './services/analytics.service.js';
-import { getProductStockInfo, formatStockLimitMessage } from './inventory-utils.js';
-import { buildCartLineProduct } from './product-variation-utils.js';
-import { trackStorefrontEvent } from './mixpanel.js';
-function normalizeAddToCartOptions(variantIdOrOptions) {
-    if (typeof variantIdOrOptions === 'string') {
-        return { variantId: variantIdOrOptions };
-    }
-    return variantIdOrOptions ?? {};
-}
+import { categoryService } from './services/category.service';
+import { productService } from './services/product.service';
+import { serviceService } from './services/service.service';
+import { transformCategoryToStoreCategory, transformProductToStoreProduct, transformServiceToStoreService } from './store-config-utils';
+import { useLoading } from './loading-context';
+import { normalizePrice } from './utils';
+import { useAuth } from './auth-context';
+import { analyticsService } from './services/analytics.service';
 export const StoreContext = createContext({
     store: null,
     isLoading: true,
@@ -33,16 +23,11 @@ export const StoreContext = createContext({
     removeFromCart: async () => { },
     updateCartQuantity: async () => { },
     removeOrderItemsFromCart: async () => { },
-    finalizeCartAfterOrder: async () => { },
     cartTotal: 0,
     cartCount: 0,
     isCartOpen: false,
     setIsCartOpen: () => { },
     isCartLoading: false,
-    isCartHydrated: true,
-    isCartRefreshing: false,
-    refreshCart: async () => { },
-    handleInventoryHoldExpired: () => { },
     buyNowItem: null,
     setBuyNowItem: () => { },
     clearBuyNowItem: () => { },
@@ -116,34 +101,14 @@ export function StoreProvider({ children, storeSlug, initialConfig }) {
     // Wishlist State
     const [wishlist, setWishlist] = useState([]);
     const [isWishlistLoading, setIsWishlistLoading] = useState(false);
-    const lastSyncedInitialConfigRef = useRef(null);
-    // Track Store_viewed once per store per session (not on every re-render/config update)
-    const trackedStoreViewId = useRef(null);
-    useEffect(() => {
-        if (!store?.id || trackedStoreViewId.current === store.id)
-            return;
-        trackedStoreViewId.current = store.id;
-        trackStorefrontEvent('Store_viewed', {
-            storeId: store.id,
-            storeSlug: store.slug,
-            storeName: store.name,
-            layout: store.layout,
-            customerId: isAuthenticated ? (user?.id || null) : null,
-        });
-    }, [store?.id, store?.slug, store?.name, store?.layout, isAuthenticated, user?.id]);
     useEffect(() => {
         if (initialConfig) {
-            // Avoid setStore on every parent re-render when the editor passes a new object reference
-            // with identical data (reduces preview flicker / layout thrashing)
-            const prev = lastSyncedInitialConfigRef.current;
-            if (!prev || !isDeepEqual(prev, initialConfig)) {
-                setStore(initialConfig);
-                lastSyncedInitialConfigRef.current = initialConfig;
-            }
+            // For live preview/editor, we want to update the store state immediately
+            // when initialConfig (which is actually the dynamic config from the editor) changes
+            setStore(initialConfig);
             setIsLoading(false);
             return;
         }
-        lastSyncedInitialConfigRef.current = null;
         if (!storeSlug) {
             setIsLoading(false);
             return;
@@ -159,16 +124,15 @@ export function StoreProvider({ children, storeSlug, initialConfig }) {
                     const baseSlug = getBaseStoreSlug(storeSlug);
                     console.log('[StoreContext] Loading store from API (client-side):', baseSlug);
                     const { store: apiStore } = await storeService.getStoreBySlug(baseSlug);
-                    const storeConfig = transformStoreResponseToConfig(apiStore);
                     // Fetch categories, products, and services in parallel
                     const [categoriesResult, productsResult, servicesResult] = await Promise.allSettled([
                         categoryService.getCategories(apiStore.id).then((apiCategories) => apiCategories.map(transformCategoryToStoreCategory)),
                         productService
                             .getProducts({
                             storeId: apiStore.id,
-                            limit: 1000,
+                            limit: 12,
                         })
-                            .then((response) => response.data.map((product) => transformProductToStoreProduct(product))),
+                            .then((response) => response.data.map(transformProductToStoreProduct)),
                         serviceService
                             .getServices(apiStore.id)
                             .then((apiServices) => apiServices.map(transformServiceToStoreService)),
@@ -196,23 +160,57 @@ export function StoreProvider({ children, storeSlug, initialConfig }) {
                     else {
                         console.log(`[StoreContext] Fetched ${services.length} services`);
                     }
-                    // Populate dynamic catalog data on the hydrated store config
-                    storeConfig.categories = categories;
-                    storeConfig.products = products;
-                    storeConfig.services = services;
-                    if (storeConfig.layout.startsWith('food')) {
-                        storeConfig.menuItems = products.map((product) => ({
-                            id: product.id,
-                            name: product.name,
-                            description: richFieldPlainTextForDisplay(product.description),
-                            price: product.price,
-                            image: product.images[0],
-                            categoryId: product.categoryId,
-                            inStock: product.inStock,
-                            dietaryInfo: product.specifications?.dietaryInfo || [],
-                            customizable: !!product.variants?.length,
-                        }));
+                    // Build contactInfo from various sources
+                    let contactInfo = apiStore.contactInfo || {
+                        email: apiStore.contactEmail,
+                        phone: apiStore.contactPhone,
+                        address: apiStore.address,
+                    };
+                    // If contactInfo exists but doesn't have an address, merge Store's address if available
+                    if (contactInfo && !contactInfo.address && apiStore.address) {
+                        contactInfo = {
+                            ...contactInfo,
+                            address: apiStore.address,
+                        };
                     }
+                    // Transform API response to StoreConfig format
+                    const storeConfig = {
+                        id: apiStore.id,
+                        slug: apiStore.slug,
+                        name: apiStore.name,
+                        description: apiStore.description || '',
+                        type: 'generic',
+                        layout: 'generic',
+                        branding: {
+                            primaryColor: apiStore.branding?.primaryColor || '#000000',
+                            secondaryColor: apiStore.branding?.secondaryColor,
+                            accentColor: apiStore.branding?.secondaryColor || apiStore.branding?.primaryColor || '#000000',
+                            logo: apiStore.branding?.logo || apiStore.logo, // Check branding.logo first, then root logo
+                        },
+                        navigation: {
+                            main: [],
+                            footer: [],
+                        },
+                        features: {
+                            cart: true,
+                            wishlist: true,
+                            reviews: true,
+                            search: true,
+                            filters: true,
+                            booking: false,
+                            delivery: true,
+                        },
+                        products,
+                        categories,
+                        services,
+                        settings: {
+                            currency: apiStore.settings?.currency || 'USD',
+                            taxRate: apiStore.settings?.taxRate, // Deprecated: kept for backward compatibility
+                            vat: apiStore.settings?.vat,
+                            serviceCharge: apiStore.settings?.serviceCharge,
+                        },
+                        contactInfo: (contactInfo.email || contactInfo.phone || contactInfo.address) ? contactInfo : undefined,
+                    };
                     setStore(storeConfig);
                 }
                 else {
@@ -288,23 +286,12 @@ export function StoreProvider({ children, storeSlug, initialConfig }) {
         localStorage.setItem(`cart_${storeSlug}`, JSON.stringify(cart));
         localStorage.setItem(`wishlist_${storeSlug}`, JSON.stringify(wishlist));
     }, [cart, wishlist, storeSlug, store]);
-    const addToCart = useCallback(async (product, quantity = 1, variantIdOrOptions) => {
-        const { variantId, variantName, unitPrice } = normalizeAddToCartOptions(variantIdOrOptions);
-        const matchingVariant = variantId ? product.variants?.find(v => v.id === variantId) : undefined;
-        const resolvedVariantName = variantName ?? matchingVariant?.name ?? matchingVariant?.value;
-        const resolvedUnitPrice = unitPrice ?? matchingVariant?.price ?? product.price;
-        const stock = getProductStockInfo(product);
-        if (!stock.canPurchase) {
+    const addToCart = useCallback(async (product, quantity = 1, variantId) => {
+        // Validate product is in stock
+        if (!product.inStock) {
             console.warn('[StoreContext] Attempted to add out-of-stock product to cart:', product.id);
-            throw new Error(formatStockLimitMessage(product.name, stock.availableStock ?? 0));
-        }
-        if (product.trackInventory !== false && stock.availableStock != null) {
-            const cartItemId = variantId ? `${product.id}-${variantId}` : product.id;
-            const existingItem = cart.find((item) => item.id === cartItemId || (item.productId === product.id && item.variantId === variantId));
-            const requestedQty = (existingItem?.quantity || 0) + quantity;
-            if (requestedQty > stock.availableStock) {
-                throw new Error(formatStockLimitMessage(product.name, stock.availableStock, requestedQty));
-            }
+            // Note: Error message should be shown by the calling component
+            throw new Error('This product is currently out of stock');
         }
         setIsCartLoading(true);
         try {
@@ -322,14 +309,13 @@ export function StoreProvider({ children, storeSlug, initialConfig }) {
                         productId: product.id,
                         quantity,
                         variantId,
-                        variantName: resolvedVariantName,
-                        price: resolvedUnitPrice,
-                        product: buildCartLineProduct(product, matchingVariant),
+                        price: product.price,
+                        product
                     }];
             });
-            setIsCartOpen(true);
+            // Track add to cart event
             if (store?.id) {
-                analyticsService.trackCommerceEvent({
+                analyticsService.trackEvent({
                     storeId: store.id,
                     eventType: 'add_to_cart',
                     userId: isAuthenticated ? (user?.id || null) : null,
@@ -338,27 +324,16 @@ export function StoreProvider({ children, storeSlug, initialConfig }) {
                         productName: product.name,
                         categoryId: product.categoryId,
                         quantity,
-                        price: resolvedUnitPrice,
+                        price: product.price,
                         variantId,
                     },
-                }, `add_to_cart:${product.id}:${variantId || 'default'}`);
-                trackStorefrontEvent('Product_added_to_cart', {
-                    storeId: store.id,
-                    storeSlug: store.slug,
-                    productId: product.id,
-                    productName: product.name,
-                    categoryId: product.categoryId,
-                    quantity,
-                    price: product.price,
-                    variantId,
-                    customerId: isAuthenticated ? (user?.id || null) : null,
-                });
+                }).catch(err => console.warn('Failed to track add to cart:', err));
             }
         }
         finally {
             setIsCartLoading(false);
         }
-    }, [store?.id, store?.slug, isAuthenticated, user?.id]);
+    }, [store?.id, isAuthenticated, user?.id]);
     const removeFromCart = useCallback(async (cartItemId) => {
         setIsCartLoading(true);
         try {
@@ -366,8 +341,9 @@ export function StoreProvider({ children, storeSlug, initialConfig }) {
             const removedItem = cart.find(item => item.id === cartItemId);
             // Use local storage only (cartService removed)
             setCart(prev => prev.filter(item => item.id !== cartItemId));
+            // Track remove_from_cart event
             if (removedItem && store?.id) {
-                analyticsService.trackCommerceEvent({
+                analyticsService.trackEvent({
                     storeId: store.id,
                     eventType: 'remove_from_cart',
                     userId: isAuthenticated ? (user?.id || null) : null,
@@ -378,7 +354,7 @@ export function StoreProvider({ children, storeSlug, initialConfig }) {
                         price: removedItem.price,
                         variantId: removedItem.variantId,
                     },
-                }, `remove_from_cart:${removedItem.productId}:${removedItem.variantId || 'default'}`);
+                }).catch(err => console.warn('Failed to track remove_from_cart:', err));
             }
         }
         finally {
@@ -416,13 +392,17 @@ export function StoreProvider({ children, storeSlug, initialConfig }) {
                 }
                 return updated;
             });
+            // Track wishlist events
             if (store?.id) {
-                analyticsService.trackCommerceEvent({
+                analyticsService.trackEvent({
                     storeId: store.id,
                     eventType: wasInWishlist ? 'wishlist_remove' : 'wishlist_add',
                     userId: isAuthenticated ? (user?.id || null) : null,
-                    metadata: { productId, productName },
-                }, `wishlist:${productId}`);
+                    metadata: {
+                        productId,
+                        productName,
+                    },
+                }).catch(err => console.warn('Failed to track wishlist event:', err));
             }
         }
         catch (error) {
@@ -449,8 +429,6 @@ export function StoreProvider({ children, storeSlug, initialConfig }) {
         isCartOpen,
         setIsCartOpen,
         isCartLoading,
-        isCartHydrated: true,
-        refreshCart: async () => { },
         buyNowItem,
         setBuyNowItem,
         clearBuyNowItem,

package/dist/lib/store-types.d.ts

@@ -1,5 +1,4 @@
-import type { PayazaRichTextStored } from './rich-html';
-export type StoreLayoutType = 'food' | 'food-modern' | 'clothing' | 'clothing-minimal' | 'booking' | 'booking-agenda' | 'electronics' | 'electronics-grid' | 'motivational-speaker' | 'marketplace';
+export type StoreLayoutType = 'food' | 'food-modern' | 'clothing' | 'clothing-minimal' | 'booking' | 'booking-agenda' | 'electronics' | 'electronics-grid' | 'motivational-speaker';
 export interface StoreBranding {
     primaryColor: string;
     secondaryColor?: string;
@@ -42,7 +41,7 @@ export interface StoreCategory {
     id: string;
     name: string;
     slug: string;
-    description?: string | PayazaRichTextStored;
+    description?: string;
     image?: string;
     parentId?: string;
     children?: StoreCategory[];
@@ -64,32 +63,22 @@ export interface StoreProduct {
     id: string;
     name: string;
     slug: string;
-    description: string | PayazaRichTextStored;
+    description: string;
     price: number;
     compareAtPrice?: number;
-    isLimitedTimeOffer?: boolean;
-    limitedTimeOfferEndsAt?: string | null;
     images: string[];
     categoryId: string;
     category?: string;
+    brand?: string;
     inStock: boolean;
-    trackInventory?: boolean;
-    availableStock?: number;
-    lowStockThreshold?: number;
     sku?: string;
     currency?: string;
     variants?: Array<{
         id: string;
-        name?: string;
-        value?: string;
-        attributes?: Record<string, string>;
+        name: string;
+        value: string;
         price?: number;
-        compareAtPrice?: number;
         sku?: string;
-        stock?: number;
-        inStock?: boolean;
-        isActive?: boolean;
-        images?: string[];
     }>;
     specifications?: Record<string, string>;
     rating?: number;
@@ -102,7 +91,7 @@ export interface StoreService {
     id: string;
     name: string;
     slug: string;
-    description: string | PayazaRichTextStored;
+    description: string;
     price: number;
     currency?: string;
     duration: number;
@@ -169,8 +158,6 @@ export interface TestimonialItem {
     rating: number;
     image?: string;
     order: number;
-    location?: string;
-    date?: string;
 }
 export interface StorySection {
     show: boolean;
@@ -211,14 +198,14 @@ export interface StoreConfig {
     slug: string;
     name: string;
     description: string;
-    /** When false, customer checkout and booking payments are disabled (merchant not verified). */
-    checkoutEnabled?: boolean;
     type: StoreLayoutType;
     layout: StoreLayoutType;
     branding: StoreBranding;
     navigation: StoreNavigation;
     categories: StoreCategory[];
     products?: StoreProduct[];
+    /** Total active catalog size from bootstrap productsMeta (may exceed products.length). */
+    productsTotal?: number;
     services?: StoreService[];
     menuItems?: StoreMenuItem[];
     domain?: StoreDomain;
@@ -245,7 +232,6 @@ export interface StoreConfig {
     };
     settings: {
         currency: string;
-        industry?: string;
         taxRate?: number;
         shippingEnabled?: boolean;
         minOrderAmount?: number;
@@ -261,8 +247,6 @@ export interface StoreConfig {
             enabled: boolean;
             applyTo: 'pos' | 'online' | 'both';
         };
-        /** Who pays Shopaza collection fees at checkout: customer (added to total) or merchant (deducted at settlement). */
-        collectionFeePayer?: 'customer' | 'merchant';
     };
     payment?: {
         payazaPublicKey?: string;
@@ -358,25 +342,12 @@ export interface StoreLayoutConfig {
             showBadges?: boolean;
             sliders?: HeroSlider[];
             badge?: string;
-            hero_badge?: string;
             title?: string;
             titleHighlight?: string;
             subtitle?: string;
             description?: string;
             primaryCTA?: string;
             secondaryCTA?: string;
-            primaryButton?: {
-                text?: string;
-                link?: string;
-            };
-            secondaryButton?: {
-                text?: string;
-                link?: string;
-            };
-            showTrustIndicators?: boolean;
-            deliveryTime?: string;
-            ratingText?: string;
-            ratingIcon?: string;
         };
         categories?: {
             show: boolean;
@@ -473,20 +444,15 @@ export interface StoreLayoutConfig {
                 description?: string;
                 items?: string[];
             };
-            showDiscountBadge?: boolean;
-            discountSuffix?: string;
         };
         testimonials?: {
             show: boolean;
             title?: string;
             subtitle?: string;
             items?: TestimonialItem[];
-            showRatings?: boolean;
-            limit?: number;
             quote?: string;
             author?: string;
             role?: string;
-            maxItems?: number;
         };
         story?: StorySection;
         promoBanner?: PromoBannerSection;
@@ -520,14 +486,6 @@ export interface StoreLayoutConfig {
             viewAllLabel?: string;
             memberName?: string;
             memberRole?: string;
-            memberRating?: string;
-            memberReviewCount?: string;
-            ratingIcon?: string;
-            specialist_image?: string;
-            features?: Array<{
-                text: string;
-                icon?: string;
-            }>;
         };
         services?: {
             show: boolean;
@@ -566,8 +524,6 @@ export interface StoreLayoutConfig {
             stat2Value?: string;
             buttonText?: string;
             buttonLink?: string;
-            chefBadgeTitle?: string;
-            chefBadgeSubtitle?: string;
         };
         trust?: {
             show: boolean;
@@ -599,8 +555,6 @@ export interface StoreLayoutConfig {
             }>;
             hero?: any;
             story?: any;
-            aboutHero?: any;
-            ourStory?: any;
             stats?: any;
             'contact-info'?: any;
             values?: any;
@@ -608,7 +562,6 @@ export interface StoreLayoutConfig {
             aboutContent?: any;
             statsSection?: any;
             contactSection?: any;
-            contactInfoSection?: any;
         };
         team?: {
             title?: string;
@@ -639,29 +592,6 @@ export interface StoreLayoutConfig {
         services?: {
             title?: string;
             description?: string;
-            hero?: {
-                title?: string;
-                description?: string;
-                backgroundImage?: string;
-                show?: boolean;
-                [key: string]: any;
-            };
-            servicesHeader?: {
-                title?: string;
-                showFilters?: boolean;
-                showSearch?: boolean;
-                backgroundImage?: string;
-                [key: string]: any;
-            };
-            servicesGrid?: {
-                showPagination?: boolean;
-                showBookButton?: boolean;
-                [key: string]: any;
-            };
-            'services-list'?: {
-                show?: boolean;
-                [key: string]: any;
-            };
         };
         faq?: {
             title?: string;
@@ -677,12 +607,9 @@ export interface StoreLayoutConfig {
         categories?: {
             categoriesHeader?: any;
             categoryGrid?: any;
-            categoriesGrid?: any;
         };
         categoryDetail?: {
             categoryDetail?: any;
-            categoryHeader?: any;
-            productGrid?: any;
             showServices?: boolean;
             showProducts?: boolean;
             showBanner?: boolean;
@@ -691,7 +618,6 @@ export interface StoreLayoutConfig {
         };
         productDetail?: {
             productDetail?: any;
-            menuItemInfo?: any;
             showSizeGuide?: boolean;
             showAddToCart?: boolean;
             showWishlist?: boolean;
@@ -704,18 +630,12 @@ export interface StoreLayoutConfig {
             contactForm?: any;
             hero?: any;
             form?: any;
-            reservationForm?: any;
             backgroundImage?: string;
             title?: string;
             subtitle?: string;
             infoTitle?: string;
             infoDescription?: string;
         };
-        book?: {
-            bookingHeader?: any;
-            bookingForm?: any;
-        };
-        serviceDetail?: any;
         menu?: {
             menuHeader?: any;
             menuGrid?: any;
@@ -915,7 +835,5 @@ export interface StoreLayoutConfig {
     assignedText?: Record<string, string>;
     assignedAssets?: Record<string, string>;
     assetRequirements?: any;
-    /** Inline section styles keyed by `${pageId}::${sectionKey}` — Payaza Styles inspector. */
-    payazaSectionStyles?: Record<string, Record<string, string>>;
 }
 //# sourceMappingURL=store-types.d.ts.map