isaaccladandClaude Opus 4.8
8b68fad82c
Deploy Ladill Merchant / deploy (push) Successful in 1m1s
The storefront create/edit/manage UI and the public storefront page were give's church-donation flow relabeled. Replace with genuine merchant storefronts, reusing the QR-core manager + validator (which already build sections/services content): - Merchant create: type picker (shop/menu/booking) + per-type editors in a shared partial (products/menu items with prices; bookable services with days/hours). x-if per type so inputs never collide across types. - StorefrontController store/update/create now delegate to QrCodeManagerService for all three types (was hardcoded church org_type/denomination/collection). - Storefront show = QR preview + download + live toggle + delete + full editor. - QrCodeManagerService: shop/menu/booking are free (no QR-wallet gate); drop the duplicate church TYPE_SHOP arm in hasContentChanges. - Public: new storefront catalog+cart view for shop/menu (posts items[] to the existing order/Pay flow); route shop+menu to it. Booking already had a real public page; church TYPE_SHOP landing branch retired. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
277 lines
20 KiB
PHP
277 lines
20 KiB
PHP
@php
|
|
/** @var array<string,mixed> $content */
|
|
$content = $content ?? [];
|
|
$defaultSections = [['name' => 'Products', 'items' => [['name' => '', 'description' => '', 'price' => '', 'image_path' => '']]]];
|
|
$seedSections = old('sections', ! empty($content['sections']) ? $content['sections'] : $defaultSections);
|
|
$seedServices = old('services', ! empty($content['services'])
|
|
? $content['services']
|
|
: [['name' => '', 'duration_minutes' => 30, 'price_ghs' => '', 'description' => '']]);
|
|
@endphp
|
|
|
|
{{-- Only the active type's block is in the DOM (x-if), so inputs never collide across types. --}}
|
|
|
|
{{-- ============================ BOOKING ============================ --}}
|
|
<template x-if="type === 'booking'">
|
|
<div x-data="{
|
|
services: @js($seedServices),
|
|
activeDays: @js(old('active_days', $content['active_days'] ?? ['mon','tue','wed','thu','fri'])),
|
|
days: [
|
|
{ key: 'mon', label: 'Mon' }, { key: 'tue', label: 'Tue' }, { key: 'wed', label: 'Wed' },
|
|
{ key: 'thu', label: 'Thu' }, { key: 'fri', label: 'Fri' }, { key: 'sat', label: 'Sat' }, { key: 'sun', label: 'Sun' },
|
|
],
|
|
toggleDay(key) {
|
|
if (this.activeDays.includes(key)) { this.activeDays = this.activeDays.filter(d => d !== key); }
|
|
else { this.activeDays.push(key); }
|
|
},
|
|
addService() { this.services.push({ name: '', duration_minutes: 30, price_ghs: '', description: '' }); },
|
|
removeService(i) { this.services.splice(i, 1); },
|
|
}" class="space-y-4">
|
|
<div>
|
|
<label class="block text-xs font-semibold text-slate-600">Business / page title *</label>
|
|
<input type="text" name="booking_title" value="{{ old('booking_title', $content['booking_title'] ?? '') }}"
|
|
placeholder="e.g. Glow Salon"
|
|
class="mt-1.5 w-full rounded-xl border border-slate-200 px-3.5 py-2.5 text-sm">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-semibold text-slate-600">Description</label>
|
|
<textarea name="description" rows="2" placeholder="What customers should know…"
|
|
class="mt-1.5 w-full rounded-xl border border-slate-200 px-3.5 py-2.5 text-sm">{{ old('description', $content['description'] ?? '') }}</textarea>
|
|
</div>
|
|
<div class="grid gap-3 sm:grid-cols-2">
|
|
<div>
|
|
<label class="block text-xs font-semibold text-slate-600">Opens at</label>
|
|
<input type="time" name="opens_at" value="{{ old('opens_at', $content['opens_at'] ?? '09:00') }}"
|
|
class="mt-1.5 w-full rounded-xl border border-slate-200 px-3.5 py-2.5 text-sm">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-semibold text-slate-600">Closes at</label>
|
|
<input type="time" name="closes_at" value="{{ old('closes_at', $content['closes_at'] ?? '17:00') }}"
|
|
class="mt-1.5 w-full rounded-xl border border-slate-200 px-3.5 py-2.5 text-sm">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-semibold text-slate-600">Available days *</p>
|
|
<div class="mt-2 flex flex-wrap gap-2">
|
|
<template x-for="day in days" :key="day.key">
|
|
<button type="button" @click="toggleDay(day.key)"
|
|
class="rounded-lg border px-3 py-1.5 text-xs font-semibold transition"
|
|
:class="activeDays.includes(day.key) ? 'border-indigo-300 bg-indigo-50 text-indigo-700' : 'border-slate-200 text-slate-500'"
|
|
x-text="day.label"></button>
|
|
</template>
|
|
</div>
|
|
<template x-for="day in activeDays" :key="day">
|
|
<input type="hidden" name="active_days[]" :value="day">
|
|
</template>
|
|
</div>
|
|
<div>
|
|
<div class="flex items-center justify-between">
|
|
<p class="text-xs font-semibold text-slate-600">Services *</p>
|
|
<button type="button" @click="addService()" class="text-xs font-semibold text-indigo-600">+ Add service</button>
|
|
</div>
|
|
<template x-for="(svc, i) in services" :key="i">
|
|
<div class="mt-3 rounded-xl border border-slate-200 p-3 space-y-2">
|
|
<input type="text" :name="'services['+i+'][name]'" x-model="svc.name" placeholder="Service name *"
|
|
class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm">
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<input type="number" :name="'services['+i+'][duration_minutes]'" x-model="svc.duration_minutes" min="15" step="15" placeholder="Duration (min)"
|
|
class="rounded-lg border border-slate-200 px-3 py-2 text-sm">
|
|
<input type="number" :name="'services['+i+'][price_ghs]'" x-model="svc.price_ghs" min="0" step="0.01" placeholder="Price GHS (0 = free)"
|
|
class="rounded-lg border border-slate-200 px-3 py-2 text-sm">
|
|
</div>
|
|
<input type="text" :name="'services['+i+'][description]'" x-model="svc.description" placeholder="Description (optional)"
|
|
class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm">
|
|
<button type="button" x-show="services.length > 1" @click="removeService(i)" class="text-xs text-red-600">Remove</button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<label class="flex items-center gap-2 text-sm text-slate-600">
|
|
<input type="hidden" name="accepts_payment" value="0">
|
|
<input type="checkbox" name="accepts_payment" value="1" @checked(old('accepts_payment', $content['accepts_payment'] ?? true)) class="rounded border-slate-300 text-indigo-600">
|
|
Accept online payment for paid services
|
|
</label>
|
|
<div class="grid gap-4 sm:grid-cols-2">
|
|
<div>
|
|
<label class="block text-xs font-semibold text-slate-600">Logo (optional)</label>
|
|
<input type="file" name="menu_logo" accept="image/*" class="mt-1.5 block w-full rounded-xl border border-slate-200 bg-white px-3.5 py-2.5 text-sm">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-semibold text-slate-600">Cover image (optional)</label>
|
|
<input type="file" name="menu_cover" accept="image/*" class="mt-1.5 block w-full rounded-xl border border-slate-200 bg-white px-3.5 py-2.5 text-sm">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
{{-- ============================ MENU ============================ --}}
|
|
<template x-if="type === 'menu'">
|
|
<div x-data="{
|
|
sections: @js($seedSections),
|
|
addItem(sIdx) { this.sections[sIdx].items.push({ name: '', description: '', price: '', image_path: '' }) },
|
|
removeItem(sIdx, iIdx) { this.sections[sIdx].items.splice(iIdx, 1) },
|
|
removeSection(sIdx) { this.sections.splice(sIdx, 1) },
|
|
addSection() { this.sections.push({ name: 'New Section', items: [{ name: '', description: '', price: '', image_path: '' }] }) },
|
|
}">
|
|
<div class="mb-4 space-y-3">
|
|
<p class="text-xs font-semibold text-slate-600">Branding <span class="font-normal text-slate-400">(optional)</span></p>
|
|
<div class="grid gap-3 sm:grid-cols-3">
|
|
<div>
|
|
<label class="block text-[11px] font-medium text-slate-500">Logo</label>
|
|
<input type="file" name="menu_logo" accept="image/*"
|
|
class="mt-1 block w-full text-xs text-slate-600 file:mr-2 file:rounded-lg file:border-0 file:bg-indigo-50 file:px-2 file:py-1 file:text-xs file:font-semibold file:text-indigo-700">
|
|
</div>
|
|
<div>
|
|
<label class="block text-[11px] font-medium text-slate-500">Cover Image</label>
|
|
<input type="file" name="menu_cover" accept="image/*"
|
|
class="mt-1 block w-full text-xs text-slate-600 file:mr-2 file:rounded-lg file:border-0 file:bg-indigo-50 file:px-2 file:py-1 file:text-xs file:font-semibold file:text-indigo-700">
|
|
<x-qr.cover-image-hint />
|
|
</div>
|
|
<div>
|
|
<label class="block text-[11px] font-medium text-slate-500">Brand Color</label>
|
|
<input type="color" name="brand_color" value="{{ old('brand_color', $content['brand_color'] ?? '#f97316') }}"
|
|
class="mt-1 h-10 w-full cursor-pointer rounded-xl border border-slate-200 p-1">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<input type="text" name="menu_title" value="{{ old('menu_title', $content['title'] ?? 'Menu') }}" placeholder="Menu title"
|
|
class="mb-4 w-full rounded-xl border border-slate-200 px-3.5 py-2.5 text-sm">
|
|
|
|
@include('merchant.storefronts.partials.payment-shipping', ['content' => $content, 'noun' => 'items', 'word' => 'delivery'])
|
|
|
|
<template x-for="(section, sIdx) in sections" :key="sIdx">
|
|
<div class="mb-4 overflow-hidden rounded-2xl border border-slate-200 bg-slate-50/50">
|
|
<div class="flex items-center gap-2 border-b border-slate-200 bg-white px-4 py-3">
|
|
<input type="text" :name="'sections[' + sIdx + '][name]'" x-model="section.name" placeholder="Section name"
|
|
class="flex-1 rounded-xl border border-slate-200 px-3 py-2 text-sm font-semibold">
|
|
<button type="button" x-show="sections.length > 1" @click="removeSection(sIdx)"
|
|
class="ml-auto flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-slate-200 text-slate-400 hover:border-red-300 hover:text-red-500">
|
|
<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="space-y-3 p-4">
|
|
<template x-for="(item, iIdx) in section.items" :key="iIdx">
|
|
<div class="rounded-xl border border-slate-200 bg-white p-3">
|
|
<input type="hidden" :name="'sections['+sIdx+'][items]['+iIdx+'][image_path]'" :value="item.image_path || ''">
|
|
<div class="grid gap-2 sm:grid-cols-[1fr_1fr_auto]">
|
|
<input type="text" :name="'sections[' + sIdx + '][items][' + iIdx + '][name]'" x-model="item.name" placeholder="Item name *"
|
|
class="rounded-lg border border-slate-200 px-3 py-2 text-sm">
|
|
<input type="text" :name="'sections[' + sIdx + '][items][' + iIdx + '][price]'" x-model="item.price" placeholder="Price (e.g. 25.00)"
|
|
class="rounded-lg border border-slate-200 px-3 py-2 text-sm">
|
|
<button type="button" x-show="section.items.length > 1" @click="removeItem(sIdx, iIdx)"
|
|
class="flex h-9 w-9 items-center justify-center rounded-lg border border-slate-200 text-slate-400 hover:border-red-300 hover:text-red-500">
|
|
<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
|
|
</button>
|
|
</div>
|
|
<input type="text" :name="'sections[' + sIdx + '][items][' + iIdx + '][description]'" x-model="item.description" placeholder="Description (optional)"
|
|
class="mt-2 w-full rounded-lg border border-slate-200 px-3 py-2 text-sm">
|
|
<div class="mt-2">
|
|
<label class="block text-[11px] font-medium text-slate-500">Photo (optional)</label>
|
|
<input type="file" :name="'item_images[' + sIdx + '][' + iIdx + ']'" accept="image/*"
|
|
class="mt-1 block w-full text-xs text-slate-600 file:mr-2 file:rounded-lg file:border-0 file:bg-slate-100 file:px-2 file:py-1 file:text-xs file:font-medium file:text-slate-600">
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<button type="button" @click="addItem(sIdx)" class="inline-flex items-center gap-1 text-xs font-semibold text-indigo-600 hover:text-indigo-800">
|
|
<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
|
|
Add item
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<button type="button" @click="addSection()" class="inline-flex items-center gap-1.5 rounded-xl border border-indigo-200 bg-indigo-50 px-3.5 py-2 text-xs font-semibold text-indigo-700 hover:bg-indigo-100">
|
|
<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
|
|
Add section
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
{{-- ============================ SHOP ============================ --}}
|
|
<template x-if="type === 'shop'">
|
|
<div x-data="{
|
|
sections: @js($seedSections),
|
|
addItem(sIdx) { this.sections[sIdx].items.push({ name: '', description: '', price: '', image_path: '' }) },
|
|
removeItem(sIdx, iIdx) { this.sections[sIdx].items.splice(iIdx, 1) },
|
|
removeSection(sIdx) { this.sections.splice(sIdx, 1) },
|
|
addSection() { this.sections.push({ name: 'New Category', items: [{ name: '', description: '', price: '', image_path: '' }] }) },
|
|
}">
|
|
<div class="mb-4 space-y-3">
|
|
<p class="text-xs font-semibold text-slate-600">Branding <span class="font-normal text-slate-400">(optional)</span></p>
|
|
<div class="grid gap-3 sm:grid-cols-3">
|
|
<div>
|
|
<label class="block text-[11px] font-medium text-slate-500">Logo</label>
|
|
<input type="file" name="menu_logo" accept="image/*"
|
|
class="mt-1 block w-full text-xs text-slate-600 file:mr-2 file:rounded-lg file:border-0 file:bg-indigo-50 file:px-2 file:py-1 file:text-xs file:font-semibold file:text-indigo-700">
|
|
</div>
|
|
<div>
|
|
<label class="block text-[11px] font-medium text-slate-500">Cover Image</label>
|
|
<input type="file" name="menu_cover" accept="image/*"
|
|
class="mt-1 block w-full text-xs text-slate-600 file:mr-2 file:rounded-lg file:border-0 file:bg-indigo-50 file:px-2 file:py-1 file:text-xs file:font-semibold file:text-indigo-700">
|
|
<x-qr.cover-image-hint />
|
|
</div>
|
|
<div>
|
|
<label class="block text-[11px] font-medium text-slate-500">Brand Color</label>
|
|
<input type="color" name="brand_color" value="{{ old('brand_color', $content['brand_color'] ?? '#7c3aed') }}"
|
|
class="mt-1 h-10 w-full cursor-pointer rounded-xl border border-slate-200 p-1">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4 grid gap-3 sm:grid-cols-2">
|
|
<input type="text" name="shop_title" value="{{ old('shop_title', $content['title'] ?? 'Our Shop') }}" placeholder="Shop name"
|
|
class="rounded-xl border border-slate-200 px-3.5 py-2.5 text-sm">
|
|
<select name="currency" class="rounded-xl border border-slate-200 px-3.5 py-2.5 text-sm text-slate-700">
|
|
@foreach(['GHS' => 'GHS (Ghanaian Cedi)', 'USD' => 'USD (US Dollar)', 'NGN' => 'NGN (Nigerian Naira)', 'KES' => 'KES (Kenyan Shilling)'] as $code => $clabel)
|
|
<option value="{{ $code }}" @selected(old('currency', $content['currency'] ?? 'GHS') === $code)>{{ $clabel }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
@include('merchant.storefronts.partials.payment-shipping', ['content' => $content, 'noun' => 'products', 'word' => 'shipping'])
|
|
|
|
<template x-for="(section, sIdx) in sections" :key="sIdx">
|
|
<div class="mb-4 overflow-hidden rounded-2xl border border-slate-200 bg-slate-50/50">
|
|
<div class="flex items-center gap-2 border-b border-slate-200 bg-white px-4 py-3">
|
|
<input type="text" :name="'sections[' + sIdx + '][name]'" x-model="section.name" placeholder="Category name"
|
|
class="flex-1 rounded-xl border border-slate-200 px-3 py-2 text-sm font-semibold">
|
|
<button type="button" x-show="sections.length > 1" @click="removeSection(sIdx)"
|
|
class="ml-auto flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-slate-200 text-slate-400 hover:border-red-300 hover:text-red-500">
|
|
<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="space-y-3 p-4">
|
|
<template x-for="(item, iIdx) in section.items" :key="iIdx">
|
|
<div class="rounded-xl border border-slate-200 bg-white p-3">
|
|
<input type="hidden" :name="'sections['+sIdx+'][items]['+iIdx+'][image_path]'" :value="item.image_path || ''">
|
|
<div class="grid gap-2 sm:grid-cols-[1fr_1fr_auto]">
|
|
<input type="text" :name="'sections[' + sIdx + '][items][' + iIdx + '][name]'" x-model="item.name" placeholder="Product name *"
|
|
class="rounded-lg border border-slate-200 px-3 py-2 text-sm">
|
|
<input type="text" :name="'sections[' + sIdx + '][items][' + iIdx + '][price]'" x-model="item.price" placeholder="Price (e.g. 25.00)"
|
|
class="rounded-lg border border-slate-200 px-3 py-2 text-sm">
|
|
<button type="button" x-show="section.items.length > 1" @click="removeItem(sIdx, iIdx)"
|
|
class="flex h-9 w-9 items-center justify-center rounded-lg border border-slate-200 text-slate-400 hover:border-red-300 hover:text-red-500">
|
|
<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
|
|
</button>
|
|
</div>
|
|
<input type="text" :name="'sections[' + sIdx + '][items][' + iIdx + '][description]'" x-model="item.description" placeholder="Description (optional)"
|
|
class="mt-2 w-full rounded-lg border border-slate-200 px-3 py-2 text-sm">
|
|
<div class="mt-2">
|
|
<label class="block text-[11px] font-medium text-slate-500">Product photo (optional)</label>
|
|
<input type="file" :name="'item_images[' + sIdx + '][' + iIdx + ']'" accept="image/*"
|
|
class="mt-1 block w-full text-xs text-slate-600 file:mr-2 file:rounded-lg file:border-0 file:bg-slate-100 file:px-2 file:py-1 file:text-xs file:font-medium file:text-slate-600">
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<button type="button" @click="addItem(sIdx)" class="inline-flex items-center gap-1 text-xs font-semibold text-indigo-600 hover:text-indigo-800">
|
|
<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
|
|
Add product
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<button type="button" @click="addSection()" class="inline-flex items-center gap-1.5 rounded-xl border border-indigo-200 bg-indigo-50 px-3.5 py-2 text-xs font-semibold text-indigo-700 hover:bg-indigo-100">
|
|
<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
|
|
Add category
|
|
</button>
|
|
</div>
|
|
</template>
|