@o2vend/theme-cli 1.0.32

package/lib/lib/mock-api-server.js

@@ -0,0 +1,989 @@
+/**
+ * Mock O2VEND Storefront API Server
+ * Provides realistic mock data for local development
+ */
+
+const express = require('express');
+const chalk = require('chalk');
+const mockDataGenerator = require('./mock-data');
+
+class MockApiServer {
+  constructor(options = {}) {
+    this.port = options.port || 3001;
+    this.app = express();
+    this.server = null;
+    console.log(chalk.cyan('[MOCK API] Generating mock data...'));
+    this.mockData = mockDataGenerator.generateMockData();
+    console.log(chalk.green(`[MOCK API] ✅ Mock data generated:`));
+    console.log(chalk.gray(`  - Products: ${this.mockData.products?.length || 0}`));
+    console.log(chalk.gray(`  - Categories: ${this.mockData.categories?.length || 0}`));
+    console.log(chalk.gray(`  - Brands: ${this.mockData.brands?.length || 0}`));
+    console.log(chalk.gray(`  - Widgets: ${this.mockData.widgets?.length || 0}`));
+  }
+
+  /**
+   * Setup routes
+   */
+  setupRoutes() {
+    // Body parser
+    this.app.use(express.json());
+    this.app.use(express.urlencoded({ extended: true }));
+
+    // Store Info
+    this.app.get('/shopfront/api/v2/storeinfo', (req, res) => {
+      res.json(this.mockData.store);
+    });
+
+    // Store Settings
+    this.app.get('/shopfront/api/v2/settings', (req, res) => {
+      res.json(this.mockData.settings);
+    });
+
+    // Products
+    this.app.post('/shopfront/api/v2/products', (req, res) => {
+      const { limit = 20, offset = 0, categoryId, brandId, search } = req.body;
+      let products = [...this.mockData.products];
+
+      // Filter by category
+      if (categoryId) {
+        products = products.filter(p => p.categoryId === categoryId);
+      }
+
+      // Filter by brand
+      if (brandId) {
+        products = products.filter(p => p.brandId === brandId);
+      }
+
+      // Search
+      if (search) {
+        const searchLower = search.toLowerCase();
+        products = products.filter(p => 
+          p.title.toLowerCase().includes(searchLower) ||
+          p.description?.toLowerCase().includes(searchLower)
+        );
+      }
+
+      // Paginate
+      const paginated = products.slice(offset, offset + limit);
+
+      // DEBUG: Verify products have stock/quantity before sending
+      if (paginated.length > 0) {
+        const sampleProduct = paginated[0];
+        const hasStock = 'stock' in sampleProduct;
+        // Use nullish coalescing to show 0 values correctly
+        const stockValue = sampleProduct.stock ?? 'N/A';
+        console.log(`[MOCK API] Returning ${paginated.length} products (total: ${products.length})`);
+        console.log(`[MOCK API DEBUG] Sample product - Title: ${sampleProduct.title}, Has stock field: ${hasStock}, Stock value: ${stockValue}`);
+        console.log(`[MOCK API DEBUG] Sample product stock details: stock=${sampleProduct.stock}, inStock=${sampleProduct.inStock}`);
+        if (sampleProduct.variants && sampleProduct.variants.length > 0) {
+          const sampleVariant = sampleProduct.variants[0];
+          const variantHasStock = 'stock' in sampleVariant;
+          const variantStockValue = sampleVariant.stock ?? 'N/A';
+          console.log(`[MOCK API DEBUG] Sample variant - Has stock field: ${variantHasStock}, Stock value: ${variantStockValue}`);
+          console.log(`[MOCK API DEBUG] Sample variant stock details: stock=${sampleVariant.stock}, inStock=${sampleVariant.inStock}, available=${sampleVariant.available}`);
+        }
+      }
+
+      res.json({
+        products: paginated,
+        total: products.length,
+        limit,
+        offset
+      });
+    });
+
+    // Product by ID
+    this.app.get('/shopfront/api/v2/products/:id', (req, res) => {
+      const product = this.mockData.products.find(p => p.id === req.params.id);
+      if (product) {
+        res.json(product);
+      } else {
+        res.status(404).json({ error: 'Product not found' });
+      }
+    });
+
+    // Product Search
+    this.app.post('/shopfront/api/v2/products/search', (req, res) => {
+      const { query, limit = 20, offset = 0 } = req.body;
+      const searchLower = (query || '').toLowerCase();
+      
+      let products = this.mockData.products.filter(p => 
+        p.title.toLowerCase().includes(searchLower) ||
+        p.description?.toLowerCase().includes(searchLower)
+      );
+
+      const paginated = products.slice(offset, offset + limit);
+
+      res.json({
+        products: paginated,
+        total: products.length,
+        limit,
+        offset,
+        query
+      });
+    });
+
+    // Categories
+    this.app.post('/shopfront/api/v2/categories', (req, res) => {
+      const { limit = 50, offset = 0 } = req.body;
+      const paginated = this.mockData.categories.slice(offset, offset + limit);
+      
+      res.json({
+        categories: paginated,
+        total: this.mockData.categories.length,
+        limit,
+        offset
+      });
+    });
+
+    // Category by ID
+    this.app.get('/shopfront/api/v2/categories/:id', (req, res) => {
+      const category = this.mockData.categories.find(c => c.id === req.params.id);
+      if (category) {
+        res.json(category);
+      } else {
+        res.status(404).json({ error: 'Category not found' });
+      }
+    });
+
+    // Brands
+    this.app.post('/shopfront/api/v2/brands', (req, res) => {
+      const { limit = 50, offset = 0 } = req.body;
+      const paginated = this.mockData.brands.slice(offset, offset + limit);
+      
+      res.json({
+        brands: paginated,
+        total: this.mockData.brands.length,
+        limit,
+        offset
+      });
+    });
+
+    // Widgets - GET endpoint
+    this.app.get('/shopfront/api/v2/widgets', (req, res) => {
+      const { section, pageId, status } = req.query;
+      
+      let widgets = [...this.mockData.widgets];
+      
+      // Filter by section
+      if (section) {
+        widgets = widgets.filter(w => w.section === section || w.sectionName === section);
+      }
+      
+      // Filter by status (default to 'active' if not specified)
+      const filterStatus = status || 'active';
+      widgets = widgets.filter(w => w.status === filterStatus);
+      
+      // Sort by position
+      widgets.sort((a, b) => (a.position || 0) - (b.position || 0));
+      
+      res.json({
+        widgets: widgets,
+        total: widgets.length
+      });
+    });
+
+    // Widgets - POST endpoint
+    this.app.post('/shopfront/api/v2/widgets', (req, res) => {
+      const { section, pageId, status } = req.body;
+      
+      let widgets = [...this.mockData.widgets];
+      
+      // Filter by section
+      if (section) {
+        widgets = widgets.filter(w => w.section === section || w.sectionName === section);
+      }
+      
+      // Filter by status (default to 'active' if not specified)
+      const filterStatus = status || 'active';
+      widgets = widgets.filter(w => w.status === filterStatus);
+      
+      // Sort by position
+      widgets.sort((a, b) => (a.position || 0) - (b.position || 0));
+      
+      res.json({
+        widgets: widgets,
+        total: widgets.length
+      });
+    });
+
+    // Cart endpoints
+    this.app.get('/shopfront/api/v2/cart/:cartId', (req, res) => {
+      res.json(this.mockData.cart);
+    });
+
+    this.app.post('/shopfront/api/v2/cart/:cartId/items', (req, res) => {
+      // Add item to cart
+      const newItem = {
+        id: Date.now().toString(),
+        productId: req.body.productId,
+        variantId: req.body.variantId,
+        quantity: req.body.quantity || 1,
+        ...req.body
+      };
+      this.mockData.cart.items.push(newItem);
+      this.mockData.cart.itemCount = this.mockData.cart.items.length;
+      this.mockData.cart.total = this.mockData.cart.items.reduce((sum, item) => 
+        sum + (item.price * item.quantity), 0
+      );
+      res.json(this.mockData.cart);
+    });
+
+    // Webstore API endpoints (for frontend JavaScript)
+    
+    // Menus API
+    // Return array directly for frontend compatibility
+    // Enhanced with proper type field and nested child items
+    this.app.get('/webstoreapi/menus', (req, res) => {
+      const menus = [
+        {
+          id: 'main-menu',
+          name: 'Main Menu',
+          type: 'Main Menu',  // Type field for filtering
+          items: [
+            { 
+              id: '1', 
+              name: 'Home', 
+              title: 'Home', 
+              link: '/', 
+              url: '/',
+              displayOrder: 1,
+              childItems: [] 
+            },
+            { 
+              id: '2', 
+              name: 'Products', 
+              title: 'Products', 
+              link: '/products', 
+              url: '/products',
+              displayOrder: 2,
+              childItems: [
+                { id: '2-1', name: 'Electronics', title: 'Electronics', link: '/products?category=electronics', url: '/products?category=electronics', displayOrder: 1 },
+                { id: '2-2', name: 'Clothing', title: 'Clothing', link: '/products?category=clothing', url: '/products?category=clothing', displayOrder: 2 },
+                { id: '2-3', name: 'Accessories', title: 'Accessories', link: '/products?category=accessories', url: '/products?category=accessories', displayOrder: 3 },
+                { id: '2-4', name: 'Home & Garden', title: 'Home & Garden', link: '/products?category=home-garden', url: '/products?category=home-garden', displayOrder: 4 }
+              ]
+            },
+            { 
+              id: '3', 
+              name: 'Collections', 
+              title: 'Collections', 
+              link: '/collections', 
+              url: '/collections',
+              displayOrder: 3,
+              childItems: [
+                { id: '3-1', name: 'New Arrivals', title: 'New Arrivals', link: '/collections/new-arrivals', url: '/collections/new-arrivals', displayOrder: 1 },
+                { id: '3-2', name: 'Best Sellers', title: 'Best Sellers', link: '/collections/best-sellers', url: '/collections/best-sellers', displayOrder: 2 },
+                { id: '3-3', name: 'On Sale', title: 'On Sale', link: '/collections/sale', url: '/collections/sale', displayOrder: 3 }
+              ]
+            },
+            { 
+              id: '4', 
+              name: 'About', 
+              title: 'About', 
+              link: '/page/about', 
+              url: '/page/about',
+              displayOrder: 4,
+              childItems: [] 
+            },
+            { 
+              id: '5', 
+              name: 'Contact', 
+              title: 'Contact', 
+              link: '/page/contact', 
+              url: '/page/contact',
+              displayOrder: 5,
+              childItems: [] 
+            }
+          ]
+        },
+        {
+          id: 'footer-menu',
+          name: 'Footer Menu',
+          type: 'Footer Menu',  // Type field for filtering
+          items: [
+            { id: '6', name: 'Privacy Policy', title: 'Privacy Policy', link: '/pages/privacy', url: '/pages/privacy', displayOrder: 1 },
+            { id: '7', name: 'Terms of Service', title: 'Terms of Service', link: '/pages/terms', url: '/pages/terms', displayOrder: 2 },
+            { id: '8', name: 'Shipping', title: 'Shipping', link: '/pages/shipping', url: '/pages/shipping', displayOrder: 3 },
+            { id: '9', name: 'Returns', title: 'Returns', link: '/pages/returns', url: '/pages/returns', displayOrder: 4 }
+          ]
+        }
+      ];
+      
+      // Support both array format (for frontend) and object format (for backward compatibility)
+      if (req.query.format === 'object') {
+        res.json({ 
+          success: true,
+          data: { menus } 
+        });
+      } else {
+        res.json(menus);
+      }
+    });
+
+    this.app.get('/webstoreapi/menus/:menuId', (req, res) => {
+      const menuId = req.params.menuId;
+      const menus = {
+        'main-menu': {
+          id: 'main-menu',
+          name: 'Main Menu',
+          type: 'Main Menu',
+          items: [
+            { 
+              id: '1', 
+              name: 'Home', 
+              title: 'Home', 
+              link: '/', 
+              url: '/',
+              displayOrder: 1,
+              childItems: [] 
+            },
+            { 
+              id: '2', 
+              name: 'Products', 
+              title: 'Products', 
+              link: '/products', 
+              url: '/products',
+              displayOrder: 2,
+              childItems: [
+                { id: '2-1', name: 'Electronics', title: 'Electronics', link: '/products?category=electronics', url: '/products?category=electronics', displayOrder: 1 },
+                { id: '2-2', name: 'Clothing', title: 'Clothing', link: '/products?category=clothing', url: '/products?category=clothing', displayOrder: 2 },
+                { id: '2-3', name: 'Accessories', title: 'Accessories', link: '/products?category=accessories', url: '/products?category=accessories', displayOrder: 3 },
+                { id: '2-4', name: 'Home & Garden', title: 'Home & Garden', link: '/products?category=home-garden', url: '/products?category=home-garden', displayOrder: 4 }
+              ]
+            },
+            { 
+              id: '3', 
+              name: 'Collections', 
+              title: 'Collections', 
+              link: '/collections', 
+              url: '/collections',
+              displayOrder: 3,
+              childItems: [
+                { id: '3-1', name: 'New Arrivals', title: 'New Arrivals', link: '/collections/new-arrivals', url: '/collections/new-arrivals', displayOrder: 1 },
+                { id: '3-2', name: 'Best Sellers', title: 'Best Sellers', link: '/collections/best-sellers', url: '/collections/best-sellers', displayOrder: 2 },
+                { id: '3-3', name: 'On Sale', title: 'On Sale', link: '/collections/sale', url: '/collections/sale', displayOrder: 3 }
+              ]
+            },
+            { 
+              id: '4', 
+              name: 'About', 
+              title: 'About', 
+              link: '/page/about', 
+              url: '/page/about',
+              displayOrder: 4,
+              childItems: [] 
+            },
+            { 
+              id: '5', 
+              name: 'Contact', 
+              title: 'Contact', 
+              link: '/page/contact', 
+              url: '/page/contact',
+              displayOrder: 5,
+              childItems: [] 
+            }
+          ]
+        },
+        'footer-menu': {
+          id: 'footer-menu',
+          name: 'Footer Menu',
+          type: 'Footer Menu',
+          items: [
+            { id: '6', name: 'Privacy Policy', title: 'Privacy Policy', link: '/pages/privacy', url: '/pages/privacy', displayOrder: 1 },
+            { id: '7', name: 'Terms of Service', title: 'Terms of Service', link: '/pages/terms', url: '/pages/terms', displayOrder: 2 },
+            { id: '8', name: 'Shipping', title: 'Shipping', link: '/pages/shipping', url: '/pages/shipping', displayOrder: 3 },
+            { id: '9', name: 'Returns', title: 'Returns', link: '/pages/returns', url: '/pages/returns', displayOrder: 4 }
+          ]
+        }
+      };
+      
+      const menu = menus[menuId];
+      if (menu) {
+        // Return menu directly (not wrapped in success/data) for frontend compatibility
+        res.json(menu);
+      } else {
+        // Return main-menu as fallback instead of 404
+        res.json(menus['main-menu']);
+      }
+    });
+
+    // Cart quantity endpoint - matches webstore format
+    this.app.get('/webstoreapi/carts/quantity', (req, res) => {
+      res.json({
+        success: true,
+        data: {
+          cartQuantity: this.mockData.cart.itemCount || 0
+        }
+      });
+    });
+
+    // Cart endpoint (for cart drawer/panel) - matches webstore format
+    this.app.get('/webstoreapi/carts', (req, res) => {
+      // Transform cart to match webstore response format
+      const cart = {
+        items: this.mockData.cart.items || [],
+        total: this.mockData.cart.total || 0,
+        itemCount: this.mockData.cart.itemCount || 0,
+        subTotal: this.mockData.cart.total || 0,
+        taxAmount: 0,
+        shippingAmount: 0
+      };
+      
+      res.json({
+        success: true,
+        data: cart
+      });
+    });
+
+    this.app.get('/webstoreapi/carts/:cartId', (req, res) => {
+      // Return specific cart by ID
+      res.json(this.mockData.cart);
+    });
+
+    // Add item to cart - simplified endpoint (matches webstore)
+    this.app.post('/webstoreapi/carts/add', (req, res) => {
+      if (!req.body.productId || !req.body.quantity) {
+        return res.status(400).json({
+          success: false,
+          error: 'Product ID and quantity are required'
+        });
+      }
+      
+      const product = this.mockData.products.find(p => p.id === req.body.productId || p.productId === parseInt(req.body.productId));
+      if (!product) {
+        return res.status(404).json({
+          success: false,
+          error: 'Product not found'
+        });
+      }
+      
+      const newItem = {
+        itemId: Date.now().toString(),
+        id: Date.now().toString(),
+        productId: parseInt(req.body.productId),
+        variantId: req.body.variantId || 0,
+        quantity: parseFloat(req.body.quantity) || 1,
+        title: product.title,
+        image: product.images?.[0]?.url || null,
+        price: product.price || 0,
+        linePrice: (product.price || 0) * (parseFloat(req.body.quantity) || 1),
+        productSlug: product.handle || product.id,
+        variantTitle: 'Default Title',
+        compareAtPrice: product.compareAtPrice || null,
+        sku: product.sku || null
+      };
+      
+      // Check if item already exists in cart
+      const existingItem = this.mockData.cart.items.find(i => 
+        i.productId === newItem.productId && i.variantId === newItem.variantId
+      );
+      
+      if (existingItem) {
+        existingItem.quantity += newItem.quantity;
+        existingItem.linePrice = existingItem.price * existingItem.quantity;
+      } else {
+        this.mockData.cart.items.push(newItem);
+      }
+      
+      this.mockData.cart.itemCount = this.mockData.cart.items.reduce((sum, item) => sum + (item.quantity || 0), 0);
+      this.mockData.cart.total = this.mockData.cart.items.reduce((sum, item) => 
+        sum + (item.price * item.quantity), 0
+      );
+      
+      res.json({
+        success: true,
+        data: this.mockData.cart
+      });
+    });
+
+    // Add item to cart
+    this.app.post('/webstoreapi/carts/:cartId/items', (req, res) => {
+      if (!req.body.productId || !req.body.quantity) {
+        return res.status(400).json({
+          success: false,
+          error: 'Product ID and quantity are required'
+        });
+      }
+      
+      const product = this.mockData.products.find(p => p.id === req.body.productId || p.productId === parseInt(req.body.productId));
+      if (!product) {
+        return res.status(404).json({
+          success: false,
+          error: 'Product not found'
+        });
+      }
+      
+      const newItem = {
+        itemId: Date.now().toString(),
+        id: Date.now().toString(),
+        productId: parseInt(req.body.productId),
+        variantId: req.body.variantId || 0,
+        quantity: parseFloat(req.body.quantity) || 1,
+        title: product.title,
+        image: product.images?.[0]?.url || null,
+        price: product.price || 0,
+        linePrice: (product.price || 0) * (parseFloat(req.body.quantity) || 1),
+        productSlug: product.handle || product.id,
+        variantTitle: 'Default Title',
+        compareAtPrice: product.compareAtPrice || null,
+        sku: product.sku || null
+      };
+      
+      this.mockData.cart.items.push(newItem);
+      this.mockData.cart.itemCount = this.mockData.cart.items.reduce((sum, item) => sum + (item.quantity || 0), 0);
+      this.mockData.cart.total = this.mockData.cart.items.reduce((sum, item) => 
+        sum + (item.price * item.quantity), 0
+      );
+      
+      res.json(this.mockData.cart);
+    });
+
+    // Update cart item
+    this.app.put('/webstoreapi/carts/:cartId/items/:itemId', (req, res) => {
+      const item = this.mockData.cart.items.find(i => i.id === req.params.itemId);
+      if (item) {
+        if (req.body.quantity !== undefined) {
+          item.quantity = req.body.quantity;
+        }
+        if (req.body.price !== undefined) {
+          item.price = req.body.price;
+        }
+        this.mockData.cart.itemCount = this.mockData.cart.items.length;
+        this.mockData.cart.total = this.mockData.cart.items.reduce((sum, item) => 
+          sum + (item.price * item.quantity), 0
+        );
+      }
+      res.json(this.mockData.cart);
+    });
+
+    // Remove item from cart
+    this.app.delete('/webstoreapi/carts/:cartId/items/:itemId', (req, res) => {
+      this.mockData.cart.items = this.mockData.cart.items.filter(i => 
+        i.id !== req.params.itemId && i.itemId !== req.params.itemId
+      );
+      this.mockData.cart.itemCount = this.mockData.cart.items.reduce((sum, item) => sum + (item.quantity || 0), 0);
+      this.mockData.cart.total = this.mockData.cart.items.reduce((sum, item) => 
+        sum + (item.price * item.quantity), 0
+      );
+      res.json(this.mockData.cart);
+    });
+
+    // Products endpoint (GET) - matches webstore format
+    this.app.get('/webstoreapi/products', (req, res) => {
+      const { limit = 20, offset = 0, category, brand, search } = req.query;
+      let products = [...this.mockData.products];
+
+      // Filter by category
+      if (category) {
+        products = products.filter(p => 
+          p.categoryId === category || 
+          p.categoryId === `category-${category}` ||
+          String(p.categoryId).includes(String(category))
+        );
+      }
+
+      // Filter by brand
+      if (brand) {
+        products = products.filter(p => 
+          p.brandId === brand || 
+          p.brandId === `brand-${brand}` ||
+          String(p.brandId).includes(String(brand))
+        );
+      }
+
+      // Search
+      if (search) {
+        const searchLower = search.toLowerCase();
+        products = products.filter(p => 
+          p.title.toLowerCase().includes(searchLower) ||
+          p.description?.toLowerCase().includes(searchLower) ||
+          p.handle?.toLowerCase().includes(searchLower)
+        );
+      }
+
+      // Paginate
+      const paginated = products.slice(parseInt(offset), parseInt(offset) + parseInt(limit));
+
+      res.json({
+        success: true,
+        data: {
+          products: paginated,
+          total: products.length,
+          limit: parseInt(limit),
+          offset: parseInt(offset)
+        }
+      });
+    });
+
+    // Product by ID endpoint (GET) - matches webstore format
+    this.app.get('/webstoreapi/products/:productId', (req, res) => {
+      const productId = parseInt(req.params.productId);
+      const product = this.mockData.products.find(p => 
+        p.id === req.params.productId || 
+        p.productId === productId ||
+        parseInt(p.id) === productId
+      );
+      
+      if (product) {
+        res.json({
+          success: true,
+          data: product
+        });
+      } else {
+        res.status(404).json({
+          success: false,
+          error: 'Product not found'
+        });
+      }
+    });
+
+    // Categories endpoint (GET) - matches webstore format
+    this.app.get('/webstoreapi/categories', (req, res) => {
+      const { limit = 50, offset = 0 } = req.query;
+      const paginated = this.mockData.categories.slice(parseInt(offset), parseInt(offset) + parseInt(limit));
+      
+      res.json({
+        success: true,
+        data: {
+          categories: paginated,
+          total: this.mockData.categories.length,
+          limit: parseInt(limit),
+          offset: parseInt(offset)
+        }
+      });
+    });
+
+    // Brands endpoint (GET) - matches webstore format
+    this.app.get('/webstoreapi/brands', (req, res) => {
+      const { limit = 50, offset = 0 } = req.query;
+      const paginated = this.mockData.brands.slice(parseInt(offset), parseInt(offset) + parseInt(limit));
+      
+      res.json({
+        success: true,
+        data: {
+          brands: paginated,
+          total: this.mockData.brands.length,
+          limit: parseInt(limit),
+          offset: parseInt(offset)
+        }
+      });
+    });
+
+    // Shopfront Page API - Landing pages from CMS (O2VEND format)
+    this.app.get('/shopfront/api/v2/page/:handle', (req, res) => {
+      const handle = req.params.handle;
+      const landingPages = {
+        'about': {
+          id: 'landing-about',
+          slug: 'about',
+          title: 'About Us',
+          metaTitle: 'About Us - My O2VEND Store',
+          metaDescription: 'Learn about our company and mission',
+          htmlContent: `
+            <div class="landing-page about-page">
+              <div class="container">
+                <div class="page-hero" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 60px 20px; text-align: center; color: white; border-radius: 12px; margin-bottom: 40px;">
+                  <h1 style="font-size: 3rem; margin-bottom: 20px;">About Our Store</h1>
+                  <p style="font-size: 1.25rem; opacity: 0.9;">Discover who we are and what drives us</p>
+                </div>
+                
+                <div class="content-section" style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 40px;">
+                  <div>
+                    <h2 style="color: #333; margin-bottom: 20px;">Our Story</h2>
+                    <p style="color: #666; line-height: 1.8;">We are a passionate team dedicated to bringing you the best products at competitive prices. Founded in 2020, we've grown from a small startup to a trusted online retailer serving thousands of happy customers worldwide.</p>
+                    <p style="color: #666; line-height: 1.8; margin-top: 15px;">Our journey began with a simple idea: make quality products accessible to everyone. Today, we continue to uphold that vision while constantly improving our offerings.</p>
+                  </div>
+                  <div>
+                    <img src="https://picsum.photos/seed/about1/600/400" alt="Our Team" style="width: 100%; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);">
+                  </div>
+                </div>
+                
+                <div class="values-section" style="background: #f8f9fa; padding: 40px; border-radius: 12px; margin-bottom: 40px;">
+                  <h2 style="text-align: center; color: #333; margin-bottom: 30px;">Our Values</h2>
+                  <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;">
+                    <div style="text-align: center;">
+                      <div style="width: 60px; height: 60px; background: #667eea; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px;">
+                        <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
+                      </div>
+                      <h3 style="color: #333; margin-bottom: 10px;">Quality</h3>
+                      <p style="color: #666; font-size: 0.9rem;">Premium products curated for you</p>
+                    </div>
+                    <div style="text-align: center;">
+                      <div style="width: 60px; height: 60px; background: #667eea; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px;">
+                        <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+                      </div>
+                      <h3 style="color: #333; margin-bottom: 10px;">Service</h3>
+                      <p style="color: #666; font-size: 0.9rem;">Customer satisfaction first</p>
+                    </div>
+                    <div style="text-align: center;">
+                      <div style="width: 60px; height: 60px; background: #667eea; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px;">
+                        <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+                      </div>
+                      <h3 style="color: #333; margin-bottom: 10px;">Trust</h3>
+                      <p style="color: #666; font-size: 0.9rem;">Transparent and honest</p>
+                    </div>
+                    <div style="text-align: center;">
+                      <div style="width: 60px; height: 60px; background: #667eea; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px;">
+                        <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
+                      </div>
+                      <h3 style="color: #333; margin-bottom: 10px;">Innovation</h3>
+                      <p style="color: #666; font-size: 0.9rem;">Always improving</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          `,
+          content: 'About Us - Our Story and Values'
+        },
+        'contact': {
+          id: 'landing-contact',
+          slug: 'contact',
+          title: 'Contact Us',
+          metaTitle: 'Contact Us - My O2VEND Store',
+          metaDescription: 'Get in touch with our team',
+          htmlContent: `
+            <div class="landing-page contact-page">
+              <div class="container">
+                <div class="page-hero" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); padding: 60px 20px; text-align: center; color: white; border-radius: 12px; margin-bottom: 40px;">
+                  <h1 style="font-size: 3rem; margin-bottom: 20px;">Contact Us</h1>
+                  <p style="font-size: 1.25rem; opacity: 0.9;">We'd love to hear from you</p>
+                </div>
+                
+                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px;">
+                  <div style="background: #fff; padding: 40px; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.08);">
+                    <h2 style="color: #333; margin-bottom: 25px;">Send us a message</h2>
+                    <form style="display: flex; flex-direction: column; gap: 20px;">
+                      <div>
+                        <label style="display: block; margin-bottom: 8px; color: #333; font-weight: 500;">Name</label>
+                        <input type="text" placeholder="Your name" style="width: 100%; padding: 12px 16px; border: 1px solid #ddd; border-radius: 8px; font-size: 1rem;">
+                      </div>
+                      <div>
+                        <label style="display: block; margin-bottom: 8px; color: #333; font-weight: 500;">Email</label>
+                        <input type="email" placeholder="your@email.com" style="width: 100%; padding: 12px 16px; border: 1px solid #ddd; border-radius: 8px; font-size: 1rem;">
+                      </div>
+                      <div>
+                        <label style="display: block; margin-bottom: 8px; color: #333; font-weight: 500;">Message</label>
+                        <textarea rows="5" placeholder="How can we help you?" style="width: 100%; padding: 12px 16px; border: 1px solid #ddd; border-radius: 8px; font-size: 1rem; resize: vertical;"></textarea>
+                      </div>
+                      <button type="submit" style="background: #11998e; color: white; padding: 14px 28px; border: none; border-radius: 8px; font-size: 1rem; cursor: pointer; font-weight: 500;">Send Message</button>
+                    </form>
+                  </div>
+                  
+                  <div>
+                    <div style="background: #f8f9fa; padding: 30px; border-radius: 12px; margin-bottom: 20px;">
+                      <h3 style="color: #333; margin-bottom: 15px; display: flex; align-items: center; gap: 10px;">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#11998e" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
+                        Address
+                      </h3>
+                      <p style="color: #666; line-height: 1.6;">123 Commerce Street<br>Business District<br>New York, NY 10001</p>
+                    </div>
+                    <div style="background: #f8f9fa; padding: 30px; border-radius: 12px; margin-bottom: 20px;">
+                      <h3 style="color: #333; margin-bottom: 15px; display: flex; align-items: center; gap: 10px;">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#11998e" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
+                        Phone
+                      </h3>
+                      <p style="color: #666;">+1 (555) 123-4567</p>
+                    </div>
+                    <div style="background: #f8f9fa; padding: 30px; border-radius: 12px;">
+                      <h3 style="color: #333; margin-bottom: 15px; display: flex; align-items: center; gap: 10px;">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#11998e" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+                        Email
+                      </h3>
+                      <p style="color: #666;">support@mystore.com</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          `,
+          content: 'Contact Us - Get in Touch'
+        }
+      };
+      
+      const page = landingPages[handle];
+      if (page) {
+        res.json(page);
+      } else {
+        res.json({
+          id: `landing-${handle}`,
+          slug: handle,
+          title: handle.charAt(0).toUpperCase() + handle.slice(1).replace(/-/g, ' '),
+          htmlContent: `<div class="landing-page"><div class="container"><h1>${handle.charAt(0).toUpperCase() + handle.slice(1).replace(/-/g, ' ')}</h1><p>Landing page content coming soon.</p></div></div>`,
+          content: `${handle} page`
+        });
+      }
+    });
+
+    // Pages API - mock pages for about, contact, etc.
+    this.app.get('/webstoreapi/pages/:handle', (req, res) => {
+      const handle = req.params.handle;
+      const pages = {
+        'about': {
+          id: 'page-about',
+          title: 'About Us',
+          handle: 'about',
+          content: `
+            <h2>Welcome to Our Store</h2>
+            <p>We are a passionate team dedicated to bringing you the best products at competitive prices. Founded in 2020, we've grown from a small startup to a trusted online retailer serving thousands of happy customers.</p>
+            <h3>Our Mission</h3>
+            <p>To provide exceptional shopping experiences with quality products, fast shipping, and outstanding customer service.</p>
+            <h3>Our Values</h3>
+            <ul>
+              <li><strong>Quality:</strong> We carefully curate every product in our catalog</li>
+              <li><strong>Service:</strong> Your satisfaction is our top priority</li>
+              <li><strong>Trust:</strong> Transparent pricing and honest communication</li>
+              <li><strong>Innovation:</strong> Constantly improving our offerings</li>
+            </ul>
+          `,
+          metaTitle: 'About Us - My O2VEND Store',
+          metaDescription: 'Learn about our company, mission, and values.'
+        },
+        'contact': {
+          id: 'page-contact',
+          title: 'Contact Us',
+          handle: 'contact',
+          content: `
+            <h2>Get in Touch</h2>
+            <p>We'd love to hear from you! Whether you have a question about our products, need help with an order, or just want to say hello, we're here to help.</p>
+            <h3>Contact Information</h3>
+            <ul>
+              <li><strong>Email:</strong> support@example.com</li>
+              <li><strong>Phone:</strong> +1 (555) 123-4567</li>
+              <li><strong>Hours:</strong> Monday - Friday, 9am - 5pm EST</li>
+            </ul>
+            <h3>Our Address</h3>
+            <p>123 Main Street<br>Suite 100<br>New York, NY 10001</p>
+          `,
+          metaTitle: 'Contact Us - My O2VEND Store',
+          metaDescription: 'Get in touch with our support team.'
+        },
+        'privacy': {
+          id: 'page-privacy',
+          title: 'Privacy Policy',
+          handle: 'privacy',
+          content: `
+            <h2>Privacy Policy</h2>
+            <p>Last updated: January 2026</p>
+            <p>Your privacy is important to us. This policy explains how we collect, use, and protect your personal information.</p>
+            <h3>Information We Collect</h3>
+            <p>We collect information you provide directly to us, such as your name, email address, shipping address, and payment information when you make a purchase.</p>
+            <h3>How We Use Your Information</h3>
+            <p>We use your information to process orders, communicate with you, improve our services, and send promotional emails (with your consent).</p>
+          `,
+          metaTitle: 'Privacy Policy - My O2VEND Store',
+          metaDescription: 'Our privacy policy and how we protect your data.'
+        },
+        'terms': {
+          id: 'page-terms',
+          title: 'Terms of Service',
+          handle: 'terms',
+          content: `
+            <h2>Terms of Service</h2>
+            <p>Last updated: January 2026</p>
+            <p>By using our website and services, you agree to these terms and conditions.</p>
+            <h3>Use of Website</h3>
+            <p>You may use our website for lawful purposes only. You agree not to use our site for any fraudulent or illegal activity.</p>
+            <h3>Orders and Payments</h3>
+            <p>All orders are subject to availability and confirmation. Prices may change without notice.</p>
+          `,
+          metaTitle: 'Terms of Service - My O2VEND Store',
+          metaDescription: 'Our terms and conditions of service.'
+        },
+        'shipping': {
+          id: 'page-shipping',
+          title: 'Shipping Information',
+          handle: 'shipping',
+          content: `
+            <h2>Shipping Information</h2>
+            <h3>Shipping Methods</h3>
+            <ul>
+              <li><strong>Standard Shipping:</strong> 5-7 business days - Free on orders over $50</li>
+              <li><strong>Express Shipping:</strong> 2-3 business days - $9.99</li>
+              <li><strong>Next Day Delivery:</strong> 1 business day - $19.99</li>
+            </ul>
+            <h3>Shipping Policy</h3>
+            <p>Orders placed before 2pm EST are processed the same day. Tracking information is provided via email once your order ships.</p>
+          `,
+          metaTitle: 'Shipping Information - My O2VEND Store',
+          metaDescription: 'Learn about our shipping options and delivery times.'
+        },
+        'returns': {
+          id: 'page-returns',
+          title: 'Returns & Refunds',
+          handle: 'returns',
+          content: `
+            <h2>Returns & Refunds</h2>
+            <h3>Return Policy</h3>
+            <p>We offer a 30-day return policy for most items. Products must be in original condition with tags attached.</p>
+            <h3>How to Return</h3>
+            <ol>
+              <li>Contact our customer service to initiate a return</li>
+              <li>Receive a prepaid shipping label via email</li>
+              <li>Pack items securely and ship within 14 days</li>
+              <li>Refund processed within 5-7 business days of receipt</li>
+            </ol>
+          `,
+          metaTitle: 'Returns & Refunds - My O2VEND Store',
+          metaDescription: 'Our return and refund policy.'
+        }
+      };
+      
+      const page = pages[handle] || {
+        id: `page-${handle}`,
+        title: handle.charAt(0).toUpperCase() + handle.slice(1).replace(/-/g, ' '),
+        handle: handle,
+        content: `<h2>${handle.charAt(0).toUpperCase() + handle.slice(1).replace(/-/g, ' ')}</h2><p>This page content is coming soon.</p>`,
+        metaTitle: `${handle} - My O2VEND Store`,
+        metaDescription: `Information about ${handle}`
+      };
+      
+      res.json(page);
+    });
+
+    // Default route
+    this.app.use((req, res) => {
+      res.status(404).json({ 
+        error: 'Not found',
+        message: `Mock API endpoint not found: ${req.method} ${req.path}`
+      });
+    });
+  }
+
+  /**
+   * Start mock API server
+   */
+  async start() {
+    return new Promise((resolve, reject) => {
+      this.setupRoutes();
+      
+      this.server = this.app.listen(this.port, (error) => {
+        if (error) {
+          reject(error);
+          return;
+        }
+        
+        console.log(`✅ Mock API server running on http://localhost:${this.port}`);
+        resolve(this.server);
+      });
+    });
+  }
+
+  /**
+   * Stop mock API server
+   */
+  async stop() {
+    return new Promise((resolve) => {
+      if (this.server) {
+        this.server.close(() => {
+          resolve();
+        });
+      } else {
+        resolve();
+      }
+    });
+  }
+}
+
+module.exports = MockApiServer;