feat: product pricing plans

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-17 16:02:27 +03:00
parent a3894d2f37
commit 768c814762
10 changed files with 229 additions and 1 deletions
@@ -0,0 +1,40 @@
+@props(['plans' => []])
+
+@php
+    $initial = collect(old('plans', $plans))->map(fn ($p) => [
+        'name' => $p['name'] ?? '',
+        'price' => $p['price'] ?? '',
+        'period' => $p['period'] ?? 'monthly',
+        'description' => $p['description'] ?? '',
+    ])->values()->all();
+    $input = 'block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm';
+@endphp
+
+<!-- Pricing plans -->
+<div x-data="{ plans: @js($initial) }">
+    <label class="block text-sm font-medium text-gray-700">Pricing plans</label>
+    <div class="mt-2 space-y-3">
+        <template x-for="(plan, i) in plans" :key="i">
+            <div class="grid grid-cols-1 sm:grid-cols-12 gap-2 p-3 border border-gray-200 rounded-md">
+                <input type="text" :name="`plans[${i}][name]`" x-model="plan.name" placeholder="Name" maxlength="100" class="{{ $input }} sm:col-span-3">
+                <input type="number" :name="`plans[${i}][price]`" x-model="plan.price" placeholder="Price (EUR)" min="0" max="99999" step="0.01" class="{{ $input }} sm:col-span-2">
+                <select :name="`plans[${i}][period]`" x-model="plan.period" class="{{ $input }} sm:col-span-2">
+                    @foreach(\App\Models\PricingPlan::PERIODS as $period)
+                        <option value="{{ $period }}">{{ $period }}</option>
+                    @endforeach
+                </select>
+                <input type="text" :name="`plans[${i}][description]`" x-model="plan.description" placeholder="Description (optional)" maxlength="255" class="{{ $input }} sm:col-span-4">
+                <button type="button" @click="plans.splice(i, 1)" class="sm:col-span-1 text-sm text-red-600 hover:text-red-800">Remove</button>
+            </div>
+        </template>
+    </div>
+    @foreach($errors->get('plans.*') as $messages)
+        <p class="mt-2 text-sm text-red-600">{{ $messages[0] }}</p>
+    @endforeach
+    @error('plans')
+        <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
+    @enderror
+    <button type="button" @click="plans.push({ name: '', price: '', period: 'monthly', description: '' })"
+            class="mt-3 inline-flex items-center px-3 py-1.5 border border-gray-300 rounded-md text-sm text-gray-700 hover:bg-gray-50">Add plan</button>
+</div>
+
@@ -0,0 +1,21 @@
+@props(['product'])
+
+@php($plans = $product->pricingPlans)
+
+@if($plans->isNotEmpty())
+    <div data-pricing {{ $attributes->class('bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-6') }}>
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Pricing</h2>
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            @foreach($plans as $plan)
+                <div class="rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+                    <h3 class="font-medium text-gray-900 dark:text-white">{{ $plan->name }}</h3>
+                    <p class="mt-2 text-2xl font-bold text-gray-900 dark:text-white">{{ $plan->formattedPrice() }}</p>
+                    <p class="text-sm text-gray-500 dark:text-gray-400">{{ $plan->period }}</p>
+                    @if($plan->description)
+                        <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">{{ $plan->description }}</p>
+                    @endif
+                </div>
+            @endforeach
+        </div>
+    </div>
+@endif