From ba00291c18c9a769f3568343c7af06ac89c5064e Mon Sep 17 00:00:00 2001
From: Vantz Stockwell <vstockwell@predator-mini.local>
Date: Sun, 15 Feb 2026 14:47:12 -0500
Subject: [PATCH] feat: Complete Phase 4 Module Store frontend marketplace
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Customer-facing module marketplace with full browse/preview/purchase flow:

Frontend Implementation:
- Complete ModuleStoreView.vue with dual-tab interface (Catalog + My Modules)
- Module grid with preview images, category badges, pricing display
- Search functionality across name/description fields
- Category filtering (8 categories: Loot, Events, Economy, Kits, Admin, PVP, PVE, Building)
- Detail modal with screenshots gallery, full features list, version info
- Purchase confirmation modal with license binding display
- Installation status tracking (Not Purchased → Purchased → Installed)
- Professional marketplace UI with hover animations and responsive grid

TypeScript Types:
- Module interface with full metadata (id, slug, name, description, price, category, images, features, version, purchase/install status)
- PurchaseRequest interface for API integration

API Integration Points (backend implementation separate):
- GET /api/modules/catalog — Browse all available modules
- GET /api/modules/my-modules — Fetch purchased modules for license
- POST /api/modules/purchase — Initiate purchase (returns payment URL or instant confirmation)
- POST /api/modules/install — Trigger deployment to game server

Design Features:
- Color-coded category badges with 8-color palette
- Preview image with scale-on-hover effect
- "Purchased" badge overlay for owned modules
- Three-button state progression (Purchase → Install → Installed)
- Empty states for zero results and zero purchases
- Mobile-responsive grid (1/2/3 columns)
- Payment flow with external redirect support (Stripe/PayPal)
- Error handling with inline error display in purchase modal

Purpose: Server admins can browse, preview, purchase, and install premium gameplay modules directly from dashboard. This is where customers pay real money — UI polish critical for conversion.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 frontend/src/types/index.ts                  |  21 +
 frontend/src/views/admin/ModuleStoreView.vue | 515 ++++++++++++++++---
 2 files changed, 452 insertions(+), 84 deletions(-)

diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 30086be..d7003a0 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -225,6 +225,27 @@ export interface WebstoreTransaction {
   created_at: string
 }
 
+// Module Store types
+export interface Module {
+  id: string
+  slug: string
+  name: string
+  description: string
+  price: number
+  category: string
+  preview_image_url: string
+  screenshots: string[]
+  features: string[]
+  version: string
+  is_purchased: boolean
+  is_installed: boolean
+}
+
+export interface PurchaseRequest {
+  module_id: string
+  license_id: string
+}
+
 // Analytics types
 export interface AnalyticsSummary {
   peak_players: number
diff --git a/frontend/src/views/admin/ModuleStoreView.vue b/frontend/src/views/admin/ModuleStoreView.vue
index 55b8983..ed4fe1c 100644
--- a/frontend/src/views/admin/ModuleStoreView.vue
+++ b/frontend/src/views/admin/ModuleStoreView.vue
@@ -1,54 +1,153 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed, onMounted } from 'vue'
+import { useApi } from '@/composables/useApi'
 import { useAuthStore } from '@/stores/auth'
-import { Package, Check, Lock } from 'lucide-vue-next'
+import type { Module } from '@/types'
+import { ShoppingCart, Package, Search, Filter, X, Check, Download, AlertCircle, ExternalLink } from 'lucide-vue-next'
 
+const api = useApi()
 const auth = useAuthStore()
 
-interface Module {
-  slug: string
-  name: string
-  description: string
-  price: string
-  features: string[]
-}
+const isLoading = ref(false)
+const modules = ref<Module[]>([])
+const myModules = ref<Module[]>([])
+const activeTab = ref<'catalog' | 'my-modules'>('catalog')
+const searchQuery = ref('')
+const selectedCategory = ref<string>('all')
+const selectedModule = ref<Module | null>(null)
+const showDetailModal = ref(false)
+const showPurchaseModal = ref(false)
+const isPurchasing = ref(false)
+const purchaseError = ref('')
 
-const modules: Module[] = [
-  {
-    slug: 'analytics',
-    name: 'Analytics & Insights',
-    description: 'Player trends, retention metrics, and server performance dashboards.',
-    price: '$4.99/mo',
-    features: ['Player count history', 'Performance graphs', 'Retention reports', 'Export to CSV'],
-  },
-  {
-    slug: 'webstore',
-    name: 'Webstore',
-    description: 'Sell kits, ranks, and custom items with Stripe/PayPal checkout.',
-    price: '$9.99/mo',
-    features: ['Item catalog', 'Stripe + PayPal', 'Auto-delivery via RCON', 'Transaction history'],
-  },
-  {
-    slug: 'discord_bot',
-    name: 'Discord Bot',
-    description: 'Two-way Discord integration with chat relay and command bridge.',
-    price: '$2.99/mo',
-    features: ['Chat relay', 'Server status embed', 'Player lookup', 'Admin commands'],
-  },
-  {
-    slug: 'backups',
-    name: 'Cloud Backups',
-    description: 'Automated server backups with point-in-time restore.',
-    price: '$5.99/mo',
-    features: ['Scheduled backups', 'Manual snapshots', 'One-click restore', '30-day retention'],
-  },
+const categories = [
+  { value: 'all', label: 'All Modules' },
+  { value: 'loot', label: 'Loot' },
+  { value: 'events', label: 'Events' },
+  { value: 'economy', label: 'Economy' },
+  { value: 'kits', label: 'Kits' },
+  { value: 'admin', label: 'Admin Tools' },
+  { value: 'pvp', label: 'PVP' },
+  { value: 'pve', label: 'PVE' },
+  { value: 'building', label: 'Building' },
 ]
 
-const tab = ref<'available' | 'installed'>('available')
+const filteredModules = computed(() => {
+  let result = activeTab.value === 'catalog' ? modules.value : myModules.value
 
-function isEnabled(slug: string): boolean {
-  return auth.license?.modules_enabled?.includes(slug) ?? false
+  if (selectedCategory.value !== 'all') {
+    result = result.filter(m => m.category === selectedCategory.value)
+  }
+
+  if (searchQuery.value.trim()) {
+    const q = searchQuery.value.toLowerCase()
+    result = result.filter(m =>
+      m.name.toLowerCase().includes(q) ||
+      m.description.toLowerCase().includes(q)
+    )
+  }
+
+  return result
+})
+
+async function loadCatalog() {
+  isLoading.value = true
+  try {
+    const data = await api.get<Module[]>('/modules/catalog')
+    modules.value = data
+  } catch (error) {
+    console.error('Failed to load module catalog:', error)
+  } finally {
+    isLoading.value = false
+  }
 }
+
+async function loadMyModules() {
+  isLoading.value = true
+  try {
+    const data = await api.get<Module[]>('/modules/my-modules')
+    myModules.value = data
+  } catch (error) {
+    console.error('Failed to load my modules:', error)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+async function initiatePurchase(module: Module) {
+  selectedModule.value = module
+  showPurchaseModal.value = true
+  purchaseError.value = ''
+}
+
+async function confirmPurchase() {
+  if (!selectedModule.value || !auth.license?.id) return
+
+  isPurchasing.value = true
+  purchaseError.value = ''
+
+  try {
+    const response = await api.post<{ payment_url?: string; success: boolean; message?: string }>('/modules/purchase', {
+      module_id: selectedModule.value.id,
+      license_id: auth.license.id
+    })
+
+    if (response.payment_url) {
+      // Redirect to external payment provider
+      window.location.href = response.payment_url
+    } else if (response.success) {
+      // Instant purchase confirmed
+      showPurchaseModal.value = false
+      selectedModule.value = null
+      await loadCatalog()
+      await loadMyModules()
+    }
+  } catch (error: any) {
+    purchaseError.value = error.message || 'Purchase failed. Please try again.'
+  } finally {
+    isPurchasing.value = false
+  }
+}
+
+async function installModule(module: Module) {
+  try {
+    await api.post('/modules/install', { module_id: module.id })
+    await loadMyModules()
+  } catch (error) {
+    console.error('Failed to install module:', error)
+  }
+}
+
+function openDetailModal(module: Module) {
+  selectedModule.value = module
+  showDetailModal.value = true
+}
+
+function closeModals() {
+  showDetailModal.value = false
+  showPurchaseModal.value = false
+  selectedModule.value = null
+  purchaseError.value = ''
+}
+
+function categoryBadgeClass(category: string): string {
+  const colors: Record<string, string> = {
+    loot: 'bg-yellow-500/15 text-yellow-400',
+    events: 'bg-purple-500/15 text-purple-400',
+    economy: 'bg-green-500/15 text-green-400',
+    kits: 'bg-blue-500/15 text-blue-400',
+    admin: 'bg-oxide-500/15 text-oxide-400',
+    pvp: 'bg-red-500/15 text-red-400',
+    pve: 'bg-indigo-500/15 text-indigo-400',
+    building: 'bg-orange-500/15 text-orange-400',
+  }
+  return colors[category] || 'bg-neutral-700/50 text-neutral-400'
+}
+
+onMounted(() => {
+  loadCatalog()
+  loadMyModules()
+})
 </script>
 
 <template>
@@ -56,71 +155,319 @@ function isEnabled(slug: string): boolean {
     <!-- Header -->
     <div class="flex items-center justify-between">
       <div class="flex items-center gap-3">
-        <Package class="w-5 h-5 text-oxide-500" />
-        <h1 class="text-2xl font-bold text-neutral-100">Module Store</h1>
+        <ShoppingCart class="w-5 h-5 text-oxide-500" />
+        <div>
+          <h1 class="text-2xl font-bold text-neutral-100">Module Store</h1>
+          <p class="text-sm text-neutral-500 mt-0.5">
+            Extend your server with premium gameplay modules
+          </p>
+        </div>
       </div>
       <div class="flex bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden">
         <button
-          @click="tab = 'available'"
+          @click="activeTab = 'catalog'"
           class="px-4 py-2 text-sm font-medium transition-colors"
-          :class="tab === 'available' ? 'bg-oxide-500/15 text-oxide-400' : 'text-neutral-400 hover:text-neutral-200'"
+          :class="activeTab === 'catalog' ? 'bg-oxide-500/15 text-oxide-400' : 'text-neutral-400 hover:text-neutral-200'"
         >
-          Available
+          <span class="flex items-center gap-2">
+            <Package class="w-4 h-4" />
+            Catalog
+          </span>
         </button>
         <button
-          @click="tab = 'installed'"
+          @click="activeTab = 'my-modules'"
           class="px-4 py-2 text-sm font-medium transition-colors"
-          :class="tab === 'installed' ? 'bg-oxide-500/15 text-oxide-400' : 'text-neutral-400 hover:text-neutral-200'"
+          :class="activeTab === 'my-modules' ? 'bg-oxide-500/15 text-oxide-400' : 'text-neutral-400 hover:text-neutral-200'"
         >
-          Installed
+          <span class="flex items-center gap-2">
+            <Download class="w-4 h-4" />
+            My Modules ({{ myModules.length }})
+          </span>
         </button>
       </div>
     </div>
 
-    <!-- Module cards -->
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+    <!-- Filters -->
+    <div class="flex items-center gap-4">
+      <div class="relative flex-1 max-w-md">
+        <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
+        <input
+          v-model="searchQuery"
+          type="text"
+          placeholder="Search modules..."
+          class="w-full pl-10 pr-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
+        />
+      </div>
+      <div class="flex items-center gap-2">
+        <Filter class="w-4 h-4 text-neutral-500" />
+        <select
+          v-model="selectedCategory"
+          class="px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
+        >
+          <option v-for="cat in categories" :key="cat.value" :value="cat.value">
+            {{ cat.label }}
+          </option>
+        </select>
+      </div>
+    </div>
+
+    <!-- Loading state -->
+    <div v-if="isLoading" class="flex items-center justify-center py-12">
+      <div class="text-neutral-500">Loading modules...</div>
+    </div>
+
+    <!-- Module grid -->
+    <div v-else-if="filteredModules.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
       <div
-        v-for="mod in (tab === 'installed' ? modules.filter(m => isEnabled(m.slug)) : modules)"
-        :key="mod.slug"
-        class="bg-neutral-900 border rounded-lg p-5 transition-colors"
-        :class="isEnabled(mod.slug) ? 'border-oxide-500/30' : 'border-neutral-800'"
+        v-for="module in filteredModules"
+        :key="module.id"
+        class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden hover:border-oxide-500/30 transition-all group"
       >
-        <div class="flex items-start justify-between mb-3">
-          <div>
-            <h3 class="text-base font-semibold text-neutral-100">{{ mod.name }}</h3>
-            <p class="text-sm text-neutral-500 mt-0.5">{{ mod.description }}</p>
+        <!-- Preview Image -->
+        <div class="relative h-40 bg-neutral-800 overflow-hidden">
+          <img
+            v-if="module.preview_image_url"
+            :src="module.preview_image_url"
+            :alt="module.name"
+            class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+          />
+          <div v-else class="w-full h-full flex items-center justify-center">
+            <Package class="w-12 h-12 text-neutral-700" />
+          </div>
+          <div class="absolute top-2 right-2">
+            <span class="text-xs font-medium px-2 py-1 rounded-full" :class="categoryBadgeClass(module.category)">
+              {{ module.category }}
+            </span>
+          </div>
+          <div v-if="module.is_purchased" class="absolute top-2 left-2">
+            <span class="text-xs font-medium px-2 py-1 rounded-full bg-green-500/20 text-green-400 flex items-center gap-1">
+              <Check class="w-3 h-3" />
+              Purchased
+            </span>
           </div>
-          <span class="text-sm font-medium text-oxide-400 shrink-0 ml-4">{{ mod.price }}</span>
         </div>
 
-        <ul class="space-y-1.5 mb-4">
-          <li v-for="feat in mod.features" :key="feat" class="flex items-center gap-2 text-sm text-neutral-400">
-            <Check class="w-3.5 h-3.5 text-oxide-500 shrink-0" />
-            {{ feat }}
-          </li>
-        </ul>
+        <!-- Content -->
+        <div class="p-4 space-y-3">
+          <div>
+            <div class="flex items-start justify-between gap-2 mb-1">
+              <h3 class="text-base font-semibold text-neutral-100">{{ module.name }}</h3>
+              <span class="text-lg font-bold text-oxide-400 shrink-0">${{ module.price.toFixed(2) }}</span>
+            </div>
+            <p class="text-sm text-neutral-500 line-clamp-2">{{ module.description }}</p>
+          </div>
 
-        <button
-          v-if="isEnabled(mod.slug)"
-          disabled
-          class="w-full py-2 text-sm font-medium text-green-400 bg-green-500/10 border border-green-500/20 rounded-lg cursor-default"
-        >
-          Installed
-        </button>
-        <button
-          v-else
-          class="w-full flex items-center justify-center gap-2 py-2 text-sm font-medium text-oxide-400 bg-oxide-500/10 hover:bg-oxide-500/20 border border-oxide-500/20 rounded-lg transition-colors"
-        >
-          <Lock class="w-3.5 h-3.5" />
-          Subscribe
-        </button>
+          <!-- Features -->
+          <div class="flex flex-wrap gap-1.5">
+            <span
+              v-for="(feature, idx) in module.features.slice(0, 3)"
+              :key="idx"
+              class="text-xs text-neutral-400 bg-neutral-800 px-2 py-0.5 rounded"
+            >
+              {{ feature }}
+            </span>
+            <span v-if="module.features.length > 3" class="text-xs text-neutral-500">
+              +{{ module.features.length - 3 }} more
+            </span>
+          </div>
+
+          <!-- Actions -->
+          <div class="flex gap-2 pt-2">
+            <button
+              @click="openDetailModal(module)"
+              class="flex-1 py-2 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 border border-neutral-700 rounded-lg transition-colors"
+            >
+              Details
+            </button>
+            <button
+              v-if="!module.is_purchased"
+              @click="initiatePurchase(module)"
+              class="flex-1 py-2 text-sm font-medium text-white bg-oxide-600 hover:bg-oxide-700 rounded-lg transition-colors"
+            >
+              Purchase
+            </button>
+            <button
+              v-else-if="!module.is_installed"
+              @click="installModule(module)"
+              class="flex-1 flex items-center justify-center gap-1.5 py-2 text-sm font-medium text-green-400 bg-green-500/10 hover:bg-green-500/20 border border-green-500/20 rounded-lg transition-colors"
+            >
+              <Download class="w-3.5 h-3.5" />
+              Install
+            </button>
+            <button
+              v-else
+              disabled
+              class="flex-1 flex items-center justify-center gap-1.5 py-2 text-sm font-medium text-green-400 bg-green-500/10 border border-green-500/20 rounded-lg cursor-default"
+            >
+              <Check class="w-3.5 h-3.5" />
+              Installed
+            </button>
+          </div>
+        </div>
       </div>
     </div>
 
-    <div v-if="tab === 'installed' && modules.filter(m => isEnabled(m.slug)).length === 0" class="bg-neutral-900 border border-neutral-800 rounded-lg p-12 text-center">
-      <Package class="w-10 h-10 text-neutral-600 mx-auto mb-3" />
-      <h3 class="text-lg font-medium text-neutral-300 mb-1">No Modules Installed</h3>
-      <p class="text-sm text-neutral-500">Browse available modules to extend your panel.</p>
+    <!-- Empty state -->
+    <div v-else class="bg-neutral-900 border border-neutral-800 rounded-lg p-12 text-center">
+      <Package class="w-12 h-12 text-neutral-600 mx-auto mb-3" />
+      <h3 class="text-lg font-medium text-neutral-300 mb-1">
+        {{ activeTab === 'catalog' ? 'No modules found' : 'No purchased modules' }}
+      </h3>
+      <p class="text-sm text-neutral-500">
+        {{ activeTab === 'catalog' ? 'Try adjusting your filters.' : 'Browse the catalog to purchase modules.' }}
+      </p>
+    </div>
+
+    <!-- Detail Modal -->
+    <div
+      v-if="showDetailModal && selectedModule"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4"
+      @click.self="closeModals"
+    >
+      <div class="bg-neutral-900 border border-neutral-800 rounded-lg max-w-3xl w-full max-h-[90vh] overflow-y-auto">
+        <!-- Modal Header -->
+        <div class="sticky top-0 bg-neutral-900 border-b border-neutral-800 px-6 py-4 flex items-start justify-between">
+          <div class="flex-1">
+            <div class="flex items-center gap-3 mb-2">
+              <h2 class="text-xl font-bold text-neutral-100">{{ selectedModule.name }}</h2>
+              <span class="text-xs font-medium px-2 py-1 rounded-full" :class="categoryBadgeClass(selectedModule.category)">
+                {{ selectedModule.category }}
+              </span>
+            </div>
+            <p class="text-sm text-neutral-400">Version {{ selectedModule.version }}</p>
+          </div>
+          <button
+            @click="closeModals"
+            class="p-2 text-neutral-400 hover:text-neutral-200 rounded-lg transition-colors"
+          >
+            <X class="w-5 h-5" />
+          </button>
+        </div>
+
+        <!-- Modal Body -->
+        <div class="p-6 space-y-6">
+          <!-- Screenshots -->
+          <div v-if="selectedModule.screenshots.length > 0" class="space-y-3">
+            <h3 class="text-sm font-medium text-neutral-300 uppercase tracking-wider">Screenshots</h3>
+            <div class="grid grid-cols-2 gap-3">
+              <img
+                v-for="(screenshot, idx) in selectedModule.screenshots"
+                :key="idx"
+                :src="screenshot"
+                :alt="`Screenshot ${idx + 1}`"
+                class="w-full h-48 object-cover rounded-lg border border-neutral-800"
+              />
+            </div>
+          </div>
+
+          <!-- Description -->
+          <div class="space-y-3">
+            <h3 class="text-sm font-medium text-neutral-300 uppercase tracking-wider">Description</h3>
+            <p class="text-sm text-neutral-400 leading-relaxed">{{ selectedModule.description }}</p>
+          </div>
+
+          <!-- Features -->
+          <div class="space-y-3">
+            <h3 class="text-sm font-medium text-neutral-300 uppercase tracking-wider">Features</h3>
+            <ul class="space-y-2">
+              <li
+                v-for="(feature, idx) in selectedModule.features"
+                :key="idx"
+                class="flex items-start gap-2 text-sm text-neutral-400"
+              >
+                <Check class="w-4 h-4 text-oxide-500 shrink-0 mt-0.5" />
+                {{ feature }}
+              </li>
+            </ul>
+          </div>
+
+          <!-- Price and Purchase -->
+          <div class="bg-neutral-800/50 border border-neutral-700 rounded-lg p-4 flex items-center justify-between">
+            <div>
+              <p class="text-sm text-neutral-400 mb-1">One-time purchase</p>
+              <p class="text-2xl font-bold text-oxide-400">${{ selectedModule.price.toFixed(2) }}</p>
+            </div>
+            <button
+              v-if="!selectedModule.is_purchased"
+              @click="initiatePurchase(selectedModule)"
+              class="px-6 py-3 text-sm font-medium text-white bg-oxide-600 hover:bg-oxide-700 rounded-lg transition-colors"
+            >
+              Purchase Now
+            </button>
+            <button
+              v-else-if="!selectedModule.is_installed"
+              @click="installModule(selectedModule)"
+              class="flex items-center gap-2 px-6 py-3 text-sm font-medium text-green-400 bg-green-500/10 hover:bg-green-500/20 border border-green-500/20 rounded-lg transition-colors"
+            >
+              <Download class="w-4 h-4" />
+              Install
+            </button>
+            <div v-else class="flex items-center gap-2 text-green-400">
+              <Check class="w-5 h-5" />
+              <span class="text-sm font-medium">Installed</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Purchase Confirmation Modal -->
+    <div
+      v-if="showPurchaseModal && selectedModule"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4"
+      @click.self="closeModals"
+    >
+      <div class="bg-neutral-900 border border-neutral-800 rounded-lg max-w-md w-full">
+        <!-- Header -->
+        <div class="border-b border-neutral-800 px-6 py-4">
+          <h2 class="text-xl font-bold text-neutral-100">Confirm Purchase</h2>
+        </div>
+
+        <!-- Body -->
+        <div class="p-6 space-y-4">
+          <div class="bg-neutral-800/50 border border-neutral-700 rounded-lg p-4 space-y-2">
+            <div class="flex items-center justify-between">
+              <span class="text-sm text-neutral-400">Module</span>
+              <span class="text-sm font-medium text-neutral-100">{{ selectedModule.name }}</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span class="text-sm text-neutral-400">License</span>
+              <span class="text-sm font-medium text-neutral-100">{{ auth.license?.license_key }}</span>
+            </div>
+            <div class="border-t border-neutral-700 pt-2 mt-2 flex items-center justify-between">
+              <span class="text-base font-medium text-neutral-300">Total</span>
+              <span class="text-2xl font-bold text-oxide-400">${{ selectedModule.price.toFixed(2) }}</span>
+            </div>
+          </div>
+
+          <div v-if="purchaseError" class="flex items-start gap-2 bg-red-500/10 border border-red-500/20 rounded-lg p-3">
+            <AlertCircle class="w-4 h-4 text-red-400 shrink-0 mt-0.5" />
+            <p class="text-sm text-red-400">{{ purchaseError }}</p>
+          </div>
+
+          <p class="text-xs text-neutral-500 leading-relaxed">
+            By confirming this purchase, you agree to the module license terms. This purchase is non-refundable once the module is installed.
+          </p>
+        </div>
+
+        <!-- Footer -->
+        <div class="border-t border-neutral-800 px-6 py-4 flex items-center justify-end gap-3">
+          <button
+            @click="closeModals"
+            :disabled="isPurchasing"
+            class="px-4 py-2 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 rounded-lg transition-colors disabled:opacity-50"
+          >
+            Cancel
+          </button>
+          <button
+            @click="confirmPurchase"
+            :disabled="isPurchasing"
+            class="px-6 py-2 text-sm font-medium text-white bg-oxide-600 hover:bg-oxide-700 rounded-lg transition-colors disabled:opacity-50"
+          >
+            {{ isPurchasing ? 'Processing...' : 'Confirm Purchase' }}
+          </button>
+        </div>
+      </div>
     </div>
   </div>
 </template>