E-commerce with Product Inquiries

<!-- Product page with inquiry form -->
<div class="product-page">
  <h1>Product Name</h1>
  <div class="product-details">
    <!-- Product info -->
  </div>
  
  <form action="https://staticbox.io/api/forms/[your-project-id]/[slug-name]/submit" method="POST">
    <input name="product_id" type="hidden" value="{{product.id}}" />
    <input name="product_name" type="hidden" value="{{product.name}}" />
    <input name="customer_name" type="text" placeholder="Name" required />
    <input name="customer_email" type="email" placeholder="Email" required />
    <select name="inquiry_type">
      <option value="pricing">Pricing Information</option>
      <option value="availability">Check Availability</option>
      <option value="bulk">Bulk Order Quote</option>
    </select>
    <textarea name="message" placeholder="Your inquiry..."></textarea>
    <button type="submit">Contact Us</button>
  </form>
</div>

// ⚠️  CRITICAL: Inventory operations must be server-side only!
// Never expose API keys or inventory logic in frontend code

// Server-side inventory management (Next.js API route)
// app/api/inventory/update/route.js
export async function POST(request) {
  const { productId, stockChange } = await request.json();
  
  // Server-side validation and business logic
  const response = await fetch('https://staticbox.io/api/projects/[your-project-id]/datastores/[collection-name]/data', {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer ' + process.env.STATICBOX_API_KEY, // Secure!
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      product_id: productId,
      stock_change: stockChange,
      last_updated: new Date().toISOString(),
      updated_by: 'system' // Track who made changes
    })
  });
  
  return Response.json({ success: response.ok });
}

// Frontend: Safe inventory display (read-only, no API keys)
async function displayInventory() {
  // Public inventory view (no authentication needed for display)
  const response = await fetch('/api/inventory/public');
  const inventory = await response.json();
  updateInventoryDisplay(inventory);
}

// ⚠️  SECURITY: Customer data must be processed server-side!

// Server-side inquiry processing (Next.js API route)
// app/api/process-inquiry/route.js
export async function POST(request) {
  const formData = await request.formData();
  
  // 1. Save inquiry (forms API - no auth needed)
  await fetch('https://staticbox.io/api/forms/[your-project-id]/[slug-name]/submit', {
    method: 'POST',
    body: formData
  });
  
  // 2. Update customer record (DataStore - requires auth)
  await fetch('https://staticbox.io/api/projects/[your-project-id]/datastores/[collection-name]/data', {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer ' + process.env.STATICBOX_API_KEY, // Server-only!
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      email: formData.get('customer_email'),
      name: formData.get('customer_name'),
      company: formData.get('company'),
      last_inquiry: new Date().toISOString(),
      inquiry_count: 1,
      source: 'website_inquiry'
    })
  });
  
  return Response.json({ success: true });
}

// Frontend form submission (safe)
document.querySelector('#inquiry-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  
  await fetch('/api/process-inquiry', {
    method: 'POST',
    body: formData
  });
});