Build real shop/menu/booking storefronts (replace church giving UI).
Deploy Ladill Merchant / deploy (push) Successful in 1m1s
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>
This commit is contained in:
isaacclad
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
de5bd16219
commit
8b68fad82c
@@ -7,6 +7,7 @@ use App\Models\QrCode;
|
||||
use App\Services\Qr\QrCodeManagerService;
|
||||
use App\Services\Qr\QrImageGeneratorService;
|
||||
use App\Services\Qr\QrPdfExporter;
|
||||
use App\Support\Qr\QrTypeCatalog;
|
||||
use Illuminate\Http\RedirectResponse;
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Support\Facades\Storage;
|
||||
@@ -42,9 +43,14 @@ class StorefrontController extends Controller
|
||||
]);
|
||||
}
|
||||
|
||||
public function create(): View
|
||||
public function create(Request $request): View
|
||||
{
|
||||
return view('merchant.storefronts.create');
|
||||
$requestedType = (string) $request->query('type', QrCode::TYPE_SHOP);
|
||||
if (! QrTypeCatalog::isValid($requestedType)) {
|
||||
$requestedType = QrCode::TYPE_SHOP;
|
||||
}
|
||||
|
||||
return view('merchant.storefronts.create', ['requestedType' => $requestedType]);
|
||||
}
|
||||
|
||||
public function store(Request $request): RedirectResponse
|
||||
@@ -53,28 +59,17 @@ class StorefrontController extends Controller
|
||||
|
||||
$request->validate([
|
||||
'label' => ['required', 'string', 'max:120'],
|
||||
'name' => ['required', 'string', 'max:120'],
|
||||
'org_type' => ['required', 'in:church,school,mosque,ngo,club'],
|
||||
'denomination' => ['nullable', 'string', 'max:120'],
|
||||
'description' => ['nullable', 'string', 'max:2000'],
|
||||
'phone' => ['nullable', 'string', 'max:30'],
|
||||
'email' => ['nullable', 'email', 'max:200'],
|
||||
'website' => ['nullable', 'url', 'max:2048'],
|
||||
'address' => ['nullable', 'string', 'max:500'],
|
||||
'service_times' => ['nullable', 'string', 'max:200'],
|
||||
'brand_color' => ['nullable', 'string', 'max:20'],
|
||||
'collection_types' => ['nullable', 'array', 'min:1'],
|
||||
'collection_types.*' => ['string', 'max:80'],
|
||||
'church_logo' => ['nullable', 'image', 'mimes:jpeg,jpg,png,gif,webp', 'max:4096'],
|
||||
'church_cover' => ['nullable', 'image', 'mimes:jpeg,jpg,png,gif,webp', 'max:8192'],
|
||||
'type' => ['required', 'in:'.implode(',', QrTypeCatalog::storefrontTypes())],
|
||||
'menu_logo' => ['nullable', 'image', 'mimes:jpeg,jpg,png,gif,webp', 'max:4096'],
|
||||
'menu_cover' => ['nullable', 'image', 'mimes:jpeg,jpg,png,gif,webp', 'max:8192'],
|
||||
'item_images' => ['nullable', 'array'],
|
||||
'item_images.*' => ['array'],
|
||||
'item_images.*.*' => ['image', 'max:4096'],
|
||||
]);
|
||||
|
||||
$data = array_merge($request->all(), [
|
||||
'type' => QrCode::TYPE_SHOP,
|
||||
'currency' => 'GHS',
|
||||
'accepts_payment' => true,
|
||||
'church_logo' => $request->file('church_logo'),
|
||||
'church_cover' => $request->file('church_cover'),
|
||||
'menu_logo' => $request->file('menu_logo'),
|
||||
'menu_cover' => $request->file('menu_cover'),
|
||||
]);
|
||||
|
||||
try {
|
||||
@@ -83,7 +78,8 @@ class StorefrontController extends Controller
|
||||
return back()->withInput()->with('error', $e->getMessage());
|
||||
}
|
||||
|
||||
return redirect()->route('merchant.storefronts.show', $qrCode)->with('success', 'Storefront created.');
|
||||
return redirect()->route('merchant.storefronts.show', $qrCode)
|
||||
->with('success', QrTypeCatalog::label($qrCode->type).' storefront created.');
|
||||
}
|
||||
|
||||
public function show(QrCode $storefront): View
|
||||
@@ -102,28 +98,18 @@ class StorefrontController extends Controller
|
||||
|
||||
$request->validate([
|
||||
'label' => ['sometimes', 'string', 'max:120'],
|
||||
'name' => ['sometimes', 'string', 'max:120'],
|
||||
'org_type' => ['sometimes', 'in:church,school,mosque,ngo,club'],
|
||||
'denomination' => ['nullable', 'string', 'max:120'],
|
||||
'description' => ['nullable', 'string', 'max:2000'],
|
||||
'phone' => ['nullable', 'string', 'max:30'],
|
||||
'email' => ['nullable', 'email', 'max:200'],
|
||||
'website' => ['nullable', 'url', 'max:2048'],
|
||||
'address' => ['nullable', 'string', 'max:500'],
|
||||
'service_times' => ['nullable', 'string', 'max:200'],
|
||||
'brand_color' => ['nullable', 'string', 'max:20'],
|
||||
'collection_types' => ['nullable', 'array', 'min:1'],
|
||||
'collection_types.*' => ['string', 'max:80'],
|
||||
'is_active' => ['sometimes', 'boolean'],
|
||||
'church_logo' => ['nullable', 'image', 'mimes:jpeg,jpg,png,gif,webp', 'max:4096'],
|
||||
'church_cover' => ['nullable', 'image', 'mimes:jpeg,jpg,png,gif,webp', 'max:8192'],
|
||||
'menu_logo' => ['nullable', 'image', 'mimes:jpeg,jpg,png,gif,webp', 'max:4096'],
|
||||
'menu_cover' => ['nullable', 'image', 'mimes:jpeg,jpg,png,gif,webp', 'max:8192'],
|
||||
'item_images' => ['nullable', 'array'],
|
||||
'item_images.*' => ['array'],
|
||||
'item_images.*.*' => ['image', 'max:4096'],
|
||||
]);
|
||||
|
||||
$data = array_merge($request->all(), [
|
||||
'accepts_payment' => true,
|
||||
'is_active' => $request->boolean('is_active', $storefront->is_active),
|
||||
'church_logo' => $request->file('church_logo'),
|
||||
'church_cover' => $request->file('church_cover'),
|
||||
'menu_logo' => $request->file('menu_logo'),
|
||||
'menu_cover' => $request->file('menu_cover'),
|
||||
]);
|
||||
|
||||
try {
|
||||
|
||||
@@ -43,6 +43,10 @@ class QrScanController extends Controller
|
||||
return view('public.qr.booking-landing', ['qrCode' => $qrCode]);
|
||||
}
|
||||
|
||||
if ($qrCode->isShopType() || $qrCode->isMenuType()) {
|
||||
return view('public.qr.storefront', ['qrCode' => $qrCode]);
|
||||
}
|
||||
|
||||
if ($qrCode->usesLandingPage()) {
|
||||
return view('public.qr.landing', ['qrCode' => $qrCode]);
|
||||
}
|
||||
|
||||
@@ -37,12 +37,12 @@ class QrCodeManagerService
|
||||
$wallet = $this->walletFor($user);
|
||||
$type = (string) ($data['type'] ?? '');
|
||||
|
||||
if (! in_array($type, [QrCode::TYPE_PAYMENT, QrCode::TYPE_SHOP], true) && ! $wallet->canCreateQr()) {
|
||||
if (! in_array($type, [QrCode::TYPE_PAYMENT, QrCode::TYPE_SHOP, QrCode::TYPE_MENU, QrCode::TYPE_BOOKING], true) && ! $wallet->canCreateQr()) {
|
||||
throw new RuntimeException('Add at least GHS ' . number_format(QrWallet::pricePerQr(), 2) . ' to your QR wallet before creating codes.');
|
||||
}
|
||||
|
||||
$validated = $this->payloadValidator->validateForCreate($type, $data);
|
||||
$style = in_array($type, [QrCode::TYPE_PAYMENT, QrCode::TYPE_SHOP], true)
|
||||
$style = in_array($type, [QrCode::TYPE_PAYMENT, QrCode::TYPE_SHOP, QrCode::TYPE_MENU, QrCode::TYPE_BOOKING], true)
|
||||
? QrStyleDefaults::defaults()
|
||||
: QrStyleDefaults::merge($data['style'] ?? null);
|
||||
|
||||
@@ -155,7 +155,7 @@ class QrCodeManagerService
|
||||
'destination_updated_at' => now(),
|
||||
]);
|
||||
|
||||
if (! in_array($type, [QrCode::TYPE_PAYMENT, QrCode::TYPE_SHOP], true)) {
|
||||
if (! in_array($type, [QrCode::TYPE_PAYMENT, QrCode::TYPE_SHOP, QrCode::TYPE_MENU, QrCode::TYPE_BOOKING], true)) {
|
||||
$this->billing->debitForQrCreation($wallet, $qrCode);
|
||||
}
|
||||
$this->imageGenerator->generateAndStore($qrCode);
|
||||
@@ -352,7 +352,6 @@ class QrCodeManagerService
|
||||
QrCode::TYPE_LINK_LIST => ['links'],
|
||||
QrCode::TYPE_VCARD => ['first_name', 'last_name', 'phone', 'email', 'company', 'website', 'address', 'note', 'social'],
|
||||
QrCode::TYPE_BUSINESS => ['name', 'tagline', 'phone', 'email', 'website', 'address', 'hours'],
|
||||
QrCode::TYPE_SHOP => ['name', 'denomination', 'description', 'phone', 'email', 'website', 'address', 'service_times', 'org_type', 'accepts_payment', 'collection_types', 'brand_color'],
|
||||
QrCode::TYPE_EVENT => ['name', 'tagline', 'description', 'location', 'starts_at', 'ends_at', 'organizer', 'website', 'brand_color', 'tiers', 'badge_fields', 'badge_size', 'registration_open'],
|
||||
QrCode::TYPE_ITINERARY => ['title', 'subtitle', 'description', 'event_date', 'location', 'brand_color', 'days'],
|
||||
QrCode::TYPE_DOCUMENT => ['allow_download'],
|
||||
|
||||
@@ -1,98 +1,56 @@
|
||||
<x-user-layout>
|
||||
<x-slot name="title">Create Giving Page</x-slot>
|
||||
@php
|
||||
$giveOldTypes = old('collection_types', ['Offering','Tithe','Order','Harvest']);
|
||||
$giveOldOrg = old('org_type', 'shop');
|
||||
@endphp
|
||||
<div class="mx-auto max-w-2xl space-y-6" x-data="{
|
||||
orgType: @js($giveOldOrg),
|
||||
orgMeta: {
|
||||
church: { namePh: 'Church name *', descriptorLabel: 'Denomination', descriptorPh: 'e.g. Presbyterian', timesLabel: 'Service times', timesPh: 'e.g. Sundays 9am', presets: ['Offering','Tithe','Order','Harvest'] },
|
||||
school: { namePh: 'School name *', descriptorLabel: 'Motto', descriptorPh: 'School motto', timesLabel: 'School hours', timesPh: 'Mon–Fri 7:30am', presets: ['School Fees','PTA Levy','Development Fund'] },
|
||||
mosque: { namePh: 'Mosque name *', descriptorLabel: 'Community', descriptorPh: 'Jama\'ah', timesLabel: 'Prayer times', timesPh: 'Jumu\'ah 1pm', presets: ['Sadaqah','Zakat','Waqf'] },
|
||||
ngo: { namePh: 'Organisation name *', descriptorLabel: 'Mission', descriptorPh: 'Mission statement', timesLabel: 'Office hours', timesPh: 'Mon–Fri 9am', presets: ['General Order','Project Fund','Emergency Relief'] },
|
||||
club: { namePh: 'Club name *', descriptorLabel: 'Tagline', descriptorPh: 'Club tagline', timesLabel: 'Meeting times', timesPh: 'Fridays 5pm', presets: ['Membership Dues','Event Fund','Order'] },
|
||||
},
|
||||
get cfg() { return this.orgMeta[this.orgType]; },
|
||||
types: @js($giveOldTypes),
|
||||
addInput: '',
|
||||
setOrg(t) { this.orgType = t; this.types = [...this.orgMeta[t].presets]; },
|
||||
addType() { const v = this.addInput.trim(); if (v && !this.types.includes(v)) this.types.push(v); this.addInput = ''; },
|
||||
removeType(i) { this.types.splice(i, 1); }
|
||||
}">
|
||||
<x-slot name="title">Create storefront</x-slot>
|
||||
@php $createType = old('type', $requestedType ?? \App\Models\QrCode::TYPE_SHOP); @endphp
|
||||
|
||||
<div class="mx-auto max-w-2xl space-y-6" x-data="{ type: @js($createType) }">
|
||||
<div>
|
||||
<a href="{{ route('merchant.storefronts.index') }}" class="text-sm text-slate-500 hover:text-slate-700">← All storefronts</a>
|
||||
<a href="{{ route('merchant.storefronts.index') }}" class="inline-flex items-center gap-1 text-sm text-slate-500 hover:text-slate-700">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"/></svg>
|
||||
All storefronts
|
||||
</a>
|
||||
<h1 class="mt-2 text-xl font-semibold text-slate-900">Create storefront</h1>
|
||||
<p class="mt-1 text-sm text-slate-500">Set up your organisation, causes, and online merchant QR.</p>
|
||||
<p class="mt-1 text-sm text-slate-500">Pick what you're selling, then add your products, menu, or bookable services.</p>
|
||||
</div>
|
||||
|
||||
@if(session('error'))
|
||||
<div class="rounded-xl border border-red-100 bg-red-50 px-4 py-3 text-sm text-red-700">{{ session('error') }}</div>
|
||||
@endif
|
||||
@if($errors->any())
|
||||
<div class="rounded-xl border border-red-100 bg-red-50 px-4 py-3 text-sm text-red-700">
|
||||
<ul class="list-inside list-disc space-y-0.5">
|
||||
@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<form method="post" action="{{ route('merchant.storefronts.store') }}" enctype="multipart/form-data" class="space-y-5 rounded-2xl border border-slate-200 bg-white p-6">
|
||||
@csrf
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700">Dashboard label</label>
|
||||
<input type="text" name="label" value="{{ old('label') }}" required maxlength="120" placeholder="e.g. Main church merchant"
|
||||
class="mt-1 w-full rounded-xl border-slate-200 text-sm focus:border-indigo-500 focus:ring-indigo-500">
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2 text-xs font-semibold text-slate-600">Organisation type</p>
|
||||
<div class="grid grid-cols-3 gap-2 sm:grid-cols-5">
|
||||
@foreach(['shop'=>'Church','school'=>'School','mosque'=>'Mosque','ngo'=>'NGO','club'=>'Club'] as $key => $label)
|
||||
<button type="button" @click="setOrg('{{ $key }}')"
|
||||
:class="orgType === '{{ $key }}' ? 'border-indigo-500 bg-indigo-50 text-indigo-700' : 'border-slate-200 bg-white text-slate-500'"
|
||||
class="rounded-xl border-2 px-2 py-2 text-[11px] font-semibold">{{ $label }}</button>
|
||||
<p class="mb-2 text-xs font-semibold text-slate-600">Storefront type</p>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
@foreach(\App\Support\Qr\QrTypeCatalog::all() as $key => $meta)
|
||||
<button type="button" @click="type = '{{ $key }}'"
|
||||
:class="type === '{{ $key }}' ? 'border-indigo-500 bg-indigo-50 text-indigo-700' : 'border-slate-200 bg-white text-slate-500 hover:border-slate-300'"
|
||||
class="rounded-xl border-2 px-3 py-3 text-left transition">
|
||||
<span class="block text-sm font-semibold">{{ $meta['label'] }}</span>
|
||||
<span class="mt-0.5 block text-[11px] leading-tight opacity-80">{{ $meta['description'] }}</span>
|
||||
</button>
|
||||
@endforeach
|
||||
</div>
|
||||
<input type="hidden" name="org_type" :value="orgType">
|
||||
<input type="hidden" name="type" :value="type">
|
||||
</div>
|
||||
<input type="text" name="name" value="{{ old('name') }}" required :placeholder="cfg.namePh"
|
||||
class="w-full rounded-xl border-slate-200 text-sm focus:border-indigo-500 focus:ring-indigo-500">
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-slate-500" x-text="cfg.descriptorLabel">Descriptor</label>
|
||||
<input type="text" name="denomination" value="{{ old('denomination') }}" :placeholder="cfg.descriptorPh"
|
||||
<label class="block text-sm font-medium text-slate-700">Dashboard label</label>
|
||||
<input type="text" name="label" value="{{ old('label') }}" required maxlength="120"
|
||||
placeholder="e.g. Main shop"
|
||||
class="mt-1 w-full rounded-xl border-slate-200 text-sm focus:border-indigo-500 focus:ring-indigo-500">
|
||||
<p class="mt-1 text-xs text-slate-400">Private name to find this storefront in your dashboard.</p>
|
||||
</div>
|
||||
<textarea name="description" rows="2" placeholder="Short description"
|
||||
class="w-full rounded-xl border-slate-200 text-sm focus:border-indigo-500 focus:ring-indigo-500">{{ old('description') }}</textarea>
|
||||
<div class="grid gap-3 sm:grid-cols-2">
|
||||
<input type="text" name="phone" value="{{ old('phone') }}" placeholder="Phone" class="rounded-xl border-slate-200 text-sm">
|
||||
<input type="email" name="email" value="{{ old('email') }}" placeholder="Email" class="rounded-xl border-slate-200 text-sm">
|
||||
</div>
|
||||
<input type="text" name="service_times" value="{{ old('service_times') }}" :placeholder="cfg.timesPh"
|
||||
class="w-full rounded-xl border-slate-200 text-sm">
|
||||
<div class="grid gap-3 sm:grid-cols-2">
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-slate-500">Logo</label>
|
||||
<input type="file" name="church_logo" accept="image/*" class="mt-1 block w-full text-xs">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-slate-500">Cover image</label>
|
||||
<input type="file" name="church_cover" accept="image/*" class="mt-1 block w-full text-xs">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-slate-500">Brand color</label>
|
||||
<input type="color" name="brand_color" value="{{ old('brand_color', '#1a3a5c') }}" class="mt-1 h-10 w-full rounded-xl border border-slate-200">
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2 text-xs font-semibold text-slate-600">Giving categories</p>
|
||||
<template x-for="t in types" :key="t">
|
||||
<input type="hidden" name="collection_types[]" :value="t">
|
||||
</template>
|
||||
<div class="flex flex-wrap gap-2 mb-2">
|
||||
<template x-for="(t, i) in types" :key="t">
|
||||
<span class="inline-flex items-center gap-1 rounded-full border border-slate-200 px-3 py-1 text-xs font-semibold">
|
||||
<span x-text="t"></span>
|
||||
<button type="button" @click="removeType(i)" class="text-slate-400 hover:text-red-500">×</button>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<input type="text" x-model="addInput" @keydown.enter.prevent="addType()" placeholder="Add category…" class="flex-1 rounded-xl border-slate-200 text-sm">
|
||||
<button type="button" @click="addType()" class="rounded-xl bg-indigo-50 px-3 py-2 text-xs font-semibold text-indigo-600">Add</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@include('merchant.storefronts.partials.editor-fields', ['content' => []])
|
||||
|
||||
<button type="submit" class="btn-primary w-full">Create storefront</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,276 @@
|
||||
@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>
|
||||
@@ -0,0 +1,48 @@
|
||||
@php
|
||||
$content = $content ?? [];
|
||||
$noun = $noun ?? 'items';
|
||||
$word = $word ?? 'shipping';
|
||||
$hasFlat = old('shipping_type', $content['shipping_type'] ?? 'none') === 'flat';
|
||||
@endphp
|
||||
<label class="mb-4 flex cursor-pointer items-center justify-between rounded-xl border border-slate-200 bg-white px-4 py-3 shadow-sm">
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-slate-900">Accept payments</p>
|
||||
<p class="mt-0.5 text-xs text-slate-500">Customers can add {{ $noun }} to cart and pay online. Leave off for a display-only page.</p>
|
||||
</div>
|
||||
<div class="relative ml-4 shrink-0">
|
||||
<input type="hidden" name="accepts_payment" value="0">
|
||||
<input type="checkbox" name="accepts_payment" value="1" class="sr-only peer" @checked(old('accepts_payment', $content['accepts_payment'] ?? false))>
|
||||
<div class="h-6 w-11 rounded-full bg-slate-200 transition-colors duration-200 peer-checked:bg-indigo-600"></div>
|
||||
<div class="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform duration-200 peer-checked:translate-x-5"></div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<div x-data="{ hasFee: {{ $hasFlat ? 'true' : 'false' }} }" class="mb-4 overflow-hidden rounded-xl border border-slate-200 bg-white">
|
||||
<label class="flex cursor-pointer items-center justify-between px-4 py-3">
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-slate-900">Charge for {{ $word }}</p>
|
||||
<p class="mt-0.5 text-xs text-slate-500">Add a flat {{ $word }} fee to customer orders.</p>
|
||||
</div>
|
||||
<div class="relative ml-4 shrink-0">
|
||||
<input type="checkbox" x-model="hasFee" class="sr-only peer">
|
||||
<div class="h-6 w-11 rounded-full bg-slate-200 transition-colors duration-200 peer-checked:bg-indigo-600"></div>
|
||||
<div class="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform duration-200 peer-checked:translate-x-5"></div>
|
||||
</div>
|
||||
</label>
|
||||
<input type="hidden" name="shipping_type" :value="hasFee ? 'flat' : 'none'">
|
||||
<div x-show="hasFee" x-cloak class="border-t border-slate-100 px-4 pb-4 pt-3 space-y-3">
|
||||
<div>
|
||||
<label class="block text-[11px] font-medium text-slate-500">Flat {{ $word }} fee</label>
|
||||
<input type="number" name="shipping_fee" value="{{ old('shipping_fee', $content['shipping_fee'] ?? '0') }}"
|
||||
min="0" step="0.01" placeholder="e.g. 15.00"
|
||||
class="mt-1 w-full rounded-xl border border-slate-200 px-3.5 py-2.5 text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-[11px] font-medium text-slate-500">Free {{ $word }} above <span class="font-normal text-slate-400">(optional)</span></label>
|
||||
<input type="number" name="free_shipping_above" value="{{ old('free_shipping_above', $content['free_shipping_above'] ?? '0') }}"
|
||||
min="0" step="0.01" placeholder="e.g. 200.00"
|
||||
class="mt-1 w-full rounded-xl border border-slate-200 px-3.5 py-2.5 text-sm">
|
||||
<p class="mt-1 text-[10px] text-slate-400">Waive the fee when the cart reaches this amount. Enter 0 to always charge.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,82 +1,97 @@
|
||||
<x-user-layout>
|
||||
<x-slot name="title">{{ $qrCode->label }}</x-slot>
|
||||
@php $c = $qrCode->content(); @endphp
|
||||
<div class="mx-auto max-w-6xl space-y-6">
|
||||
@php
|
||||
$content = $qrCode->content();
|
||||
$publicUrl = route('qr.public.resolve', ['shortCode' => $qrCode->short_code]);
|
||||
$typeLabel = \App\Support\Qr\QrTypeCatalog::label($qrCode->type);
|
||||
@endphp
|
||||
|
||||
<div class="mx-auto max-w-5xl space-y-6" x-data="{ type: @js($qrCode->type) }">
|
||||
<div class="flex flex-wrap items-start justify-between gap-4">
|
||||
<div class="min-w-0 flex-1">
|
||||
<a href="{{ route('merchant.storefronts.index') }}" class="text-sm text-slate-500 hover:text-slate-700">← All storefronts</a>
|
||||
<div>
|
||||
<a href="{{ route('merchant.storefronts.index') }}" class="inline-flex items-center gap-1 text-sm text-slate-500 hover:text-slate-700">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"/></svg>
|
||||
All storefronts
|
||||
</a>
|
||||
<h1 class="mt-2 text-xl font-semibold text-slate-900">{{ $qrCode->label }}</h1>
|
||||
<p class="mt-1 text-sm text-slate-500">{{ $c['name'] ?? '' }}@if(!empty($c['denomination'])) · {{ $c['denomination'] }}@endif</p>
|
||||
<p class="mt-1 inline-flex items-center gap-2 text-sm text-slate-500">
|
||||
<span class="rounded-full bg-indigo-50 px-2 py-0.5 text-xs font-semibold text-indigo-700">{{ $typeLabel }}</span>
|
||||
@if($qrCode->is_active)
|
||||
<span class="text-emerald-600">● Live</span>
|
||||
@else
|
||||
<span class="text-slate-400">● Inactive</span>
|
||||
@endif
|
||||
</p>
|
||||
</div>
|
||||
@include('merchant.storefronts.partials.header-actions', ['qrCode' => $qrCode])
|
||||
<a href="{{ $publicUrl }}" target="_blank" rel="noopener"
|
||||
class="inline-flex items-center gap-1.5 rounded-xl border border-slate-200 bg-white px-3.5 py-2 text-sm font-semibold text-slate-700 shadow-sm hover:bg-slate-50">
|
||||
View live
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@if(session('success'))
|
||||
<div class="rounded-xl border border-emerald-100 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">{{ session('success') }}</div>
|
||||
@endif
|
||||
@if(session('error'))
|
||||
<div class="rounded-xl border border-red-100 bg-red-50 px-4 py-3 text-sm text-red-700">{{ session('error') }}</div>
|
||||
@endif
|
||||
@if($errors->any())
|
||||
<div class="rounded-xl border border-red-100 bg-red-50 px-4 py-3 text-sm text-red-700">
|
||||
<ul class="list-inside list-disc space-y-0.5">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="grid gap-6 lg:grid-cols-[380px_1fr]">
|
||||
<div class="lg:sticky lg:top-6 lg:self-start">
|
||||
@include('merchant.storefronts.partials.preview-card', [
|
||||
'qrCode' => $qrCode,
|
||||
'previewDataUri' => $previewDataUri,
|
||||
'showDownloads' => false,
|
||||
])
|
||||
<p class="mt-4 break-all text-center text-sm text-indigo-600">{{ $qrCode->publicUrl() }}</p>
|
||||
<div class="grid gap-6 lg:grid-cols-[320px_1fr]">
|
||||
{{-- QR + sharing --}}
|
||||
<div class="space-y-4 lg:sticky lg:top-6 lg:self-start">
|
||||
<div class="rounded-2xl border border-slate-200 bg-white p-5 text-center">
|
||||
@if($previewDataUri)
|
||||
<img src="{{ $previewDataUri }}" alt="QR code" class="mx-auto h-44 w-44">
|
||||
@endif
|
||||
<p class="mt-3 break-all text-xs text-slate-400">{{ $publicUrl }}</p>
|
||||
<div class="mt-4 flex justify-center gap-2">
|
||||
@foreach(['png' => 'PNG', 'svg' => 'SVG', 'pdf' => 'PDF'] as $fmt => $flabel)
|
||||
<a href="{{ route('merchant.storefronts.download', [$qrCode, $fmt]) }}"
|
||||
class="rounded-lg border border-slate-200 px-3 py-1.5 text-xs font-semibold text-slate-600 hover:bg-slate-50">{{ $flabel }}</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<form method="post" action="{{ route('merchant.storefronts.update', $qrCode) }}" enctype="multipart/form-data" class="space-y-4 rounded-2xl border border-slate-200 bg-white p-6">
|
||||
@csrf
|
||||
@method('PATCH')
|
||||
<h2 class="font-semibold text-slate-900">Settings</h2>
|
||||
<form method="post" action="{{ route('merchant.storefronts.destroy', $qrCode) }}"
|
||||
onsubmit="return confirm('Delete this storefront? This cannot be undone.');">
|
||||
@csrf @method('DELETE')
|
||||
<button type="submit" class="w-full rounded-xl border border-red-200 bg-white px-3.5 py-2 text-sm font-semibold text-red-600 hover:bg-red-50">Delete storefront</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{{-- Edit form --}}
|
||||
<form method="post" action="{{ route('merchant.storefronts.update', $qrCode) }}" enctype="multipart/form-data" class="space-y-5 rounded-2xl border border-slate-200 bg-white p-6">
|
||||
@csrf @method('PATCH')
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700">Dashboard label</label>
|
||||
<input type="text" name="label" value="{{ old('label', $qrCode->label) }}" class="mt-1 w-full rounded-xl border-slate-200 text-sm">
|
||||
<input type="text" name="label" value="{{ old('label', $qrCode->label) }}" required maxlength="120"
|
||||
class="mt-1 w-full rounded-xl border-slate-200 text-sm focus:border-indigo-500 focus:ring-indigo-500">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700">Organisation name</label>
|
||||
<input type="text" name="name" value="{{ old('name', $c['name'] ?? '') }}" class="mt-1 w-full rounded-xl border-slate-200 text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700">Description / denomination</label>
|
||||
<input type="text" name="denomination" value="{{ old('denomination', $c['denomination'] ?? '') }}" class="mt-1 w-full rounded-xl border-slate-200 text-sm">
|
||||
</div>
|
||||
<textarea name="description" rows="2" class="w-full rounded-xl border-slate-200 text-sm">{{ old('description', $c['description'] ?? '') }}</textarea>
|
||||
<div class="grid gap-3 sm:grid-cols-2">
|
||||
<input type="text" name="phone" value="{{ old('phone', $c['phone'] ?? '') }}" placeholder="Phone" class="rounded-xl border-slate-200 text-sm">
|
||||
<input type="email" name="email" value="{{ old('email', $c['email'] ?? '') }}" placeholder="Email" class="rounded-xl border-slate-200 text-sm">
|
||||
</div>
|
||||
<label class="flex items-center gap-2 text-sm text-slate-700">
|
||||
<input type="checkbox" name="is_active" value="1" @checked($qrCode->is_active) class="rounded border-slate-300 text-indigo-600">
|
||||
Page is active
|
||||
</label>
|
||||
<div class="grid gap-3 sm:grid-cols-2">
|
||||
<div>
|
||||
<label class="block text-xs text-slate-500">Replace logo</label>
|
||||
<input type="file" name="church_logo" accept="image/*" class="mt-1 block w-full text-xs">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs text-slate-500">Replace cover</label>
|
||||
<input type="file" name="church_cover" accept="image/*" class="mt-1 block w-full text-xs">
|
||||
</div>
|
||||
</div>
|
||||
@foreach($c['collection_types'] ?? ['Offering','Tithe','Order'] as $i => $type)
|
||||
<input type="hidden" name="collection_types[]" value="{{ $type }}">
|
||||
@endforeach
|
||||
<button type="submit" class="btn-primary">Save changes</button>
|
||||
</form>
|
||||
|
||||
<div class="rounded-2xl border border-red-100 bg-red-50/40 p-6">
|
||||
<h2 class="font-semibold text-red-700">Danger zone</h2>
|
||||
<p class="mt-1 text-sm text-slate-500">Remove this storefront and deactivate its QR.</p>
|
||||
<button type="button" @click="$dispatch('open-modal', 'delete-merchant-page')"
|
||||
class="mt-4 rounded-xl border border-red-200 bg-white px-4 py-2 text-sm font-semibold text-red-700 hover:bg-red-50">
|
||||
Delete storefront
|
||||
</button>
|
||||
<label class="flex cursor-pointer items-center justify-between rounded-xl border border-slate-200 bg-white px-4 py-3 shadow-sm">
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-slate-900">Storefront live</p>
|
||||
<p class="mt-0.5 text-xs text-slate-500">Turn off to take the public page offline without deleting it.</p>
|
||||
</div>
|
||||
@include('merchant.storefronts.partials.delete-modal', ['qrCode' => $qrCode])
|
||||
<div class="relative ml-4 shrink-0">
|
||||
<input type="hidden" name="is_active" value="0">
|
||||
<input type="checkbox" name="is_active" value="1" class="sr-only peer" @checked(old('is_active', $qrCode->is_active))>
|
||||
<div class="h-6 w-11 rounded-full bg-slate-200 transition-colors duration-200 peer-checked:bg-indigo-600"></div>
|
||||
<div class="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform duration-200 peer-checked:translate-x-5"></div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
@include('merchant.storefronts.partials.editor-fields', ['content' => $content])
|
||||
|
||||
<button type="submit" class="btn-primary w-full">Save changes</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</x-user-layout>
|
||||
|
||||
@@ -0,0 +1,202 @@
|
||||
@php
|
||||
$c = $qrCode->content();
|
||||
$sections = $c['sections'] ?? [];
|
||||
$title = $c['title'] ?? $qrCode->label ?? 'Storefront';
|
||||
$cur = $c['currency'] ?? 'GHS';
|
||||
$brand = $c['brand_color'] ?? '#4f46e5';
|
||||
$acceptsPayment = ! empty($c['accepts_payment']);
|
||||
$shippingType = $c['shipping_type'] ?? 'none';
|
||||
$shippingFee = (float) ($c['shipping_fee'] ?? 0);
|
||||
$freeAbove = (float) ($c['free_shipping_above'] ?? 0);
|
||||
$isShop = $qrCode->type === \App\Models\QrCode::TYPE_SHOP;
|
||||
$hasLogo = ! empty($c['logo_path']);
|
||||
$hasCover = ! empty($c['cover_path']);
|
||||
$logoUrl = $hasLogo ? route('qr.public.menu.logo', $qrCode->short_code) : null;
|
||||
$coverUrl = $hasCover ? route('qr.public.menu.cover', $qrCode->short_code) : null;
|
||||
$orderUrl = route('qr.public.order', $qrCode->short_code);
|
||||
@endphp
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{ $title }}</title>
|
||||
@include('partials.favicon')
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
</head>
|
||||
<body class="bg-slate-50 text-slate-900 antialiased">
|
||||
<div x-data="storefront({
|
||||
cur: @js($cur),
|
||||
acceptsPayment: {{ $acceptsPayment ? 'true' : 'false' }},
|
||||
shippingType: @js($shippingType),
|
||||
shippingFee: {{ $shippingFee }},
|
||||
freeAbove: {{ $freeAbove }},
|
||||
orderUrl: @js($orderUrl),
|
||||
csrf: @js(csrf_token()),
|
||||
})" class="mx-auto max-w-2xl px-4 pb-32 pt-0">
|
||||
|
||||
{{-- Cover + header --}}
|
||||
<div class="relative -mx-4 mb-4 h-36 sm:h-44" style="background:{{ $brand }}">
|
||||
@if($coverUrl)<img src="{{ $coverUrl }}" alt="" class="h-full w-full object-cover opacity-90">@endif
|
||||
</div>
|
||||
<div class="-mt-12 flex items-end gap-4 px-1">
|
||||
<div class="flex h-20 w-20 shrink-0 items-center justify-center overflow-hidden rounded-2xl bg-white shadow-md ring-4 ring-white" style="color:{{ $brand }}">
|
||||
@if($logoUrl)
|
||||
<img src="{{ $logoUrl }}" alt="{{ $title }}" class="h-full w-full object-cover">
|
||||
@else
|
||||
<span class="text-2xl font-black">{{ mb_substr($title, 0, 1) }}</span>
|
||||
@endif
|
||||
</div>
|
||||
<div class="pb-1">
|
||||
<h1 class="text-xl font-bold text-slate-900">{{ $title }}</h1>
|
||||
<p class="text-xs text-slate-500">{{ $isShop ? 'Shop' : 'Menu' }} · Powered by Ladill</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if(session('order_error'))
|
||||
<div class="mt-4 rounded-xl border border-red-100 bg-red-50 px-4 py-3 text-sm text-red-700">{{ session('order_error') }}</div>
|
||||
@endif
|
||||
|
||||
{{-- Catalogue --}}
|
||||
<div class="mt-6 space-y-7">
|
||||
@forelse($sections as $section)
|
||||
<div>
|
||||
<h2 class="mb-3 text-sm font-bold uppercase tracking-wide text-slate-500">{{ $section['name'] ?? '' }}</h2>
|
||||
<div class="space-y-3">
|
||||
@foreach(($section['items'] ?? []) as $iIdx => $item)
|
||||
@php
|
||||
$price = (float) ($item['price'] ?? 0);
|
||||
$key = ($section['name'] ?? 's').'-'.$iIdx;
|
||||
$img = ! empty($item['image_path']);
|
||||
@endphp
|
||||
<div class="flex items-center gap-3 rounded-2xl border border-slate-200 bg-white p-3">
|
||||
@if($img)
|
||||
<img src="{{ route('qr.public.item-image', [$qrCode->short_code, $loop->parent->index, $iIdx]) }}" alt="" class="h-16 w-16 shrink-0 rounded-xl object-cover">
|
||||
@endif
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="truncate text-sm font-semibold text-slate-900">{{ $item['name'] ?? '' }}</p>
|
||||
@if(!empty($item['description']))<p class="truncate text-xs text-slate-500">{{ $item['description'] }}</p>@endif
|
||||
<p class="mt-0.5 text-sm font-bold" style="color:{{ $brand }}">{{ $cur }} {{ number_format($price, 2) }}</p>
|
||||
</div>
|
||||
@if($acceptsPayment && $price > 0)
|
||||
<button type="button"
|
||||
@click="add(@js($item['name'] ?? ''), {{ $price }}, @js($key))"
|
||||
class="shrink-0 rounded-xl px-3 py-2 text-xs font-bold text-white shadow-sm" style="background:{{ $brand }}">Add</button>
|
||||
@endif
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<p class="rounded-xl border border-slate-200 bg-white px-4 py-8 text-center text-sm text-slate-500">This storefront has no items yet.</p>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
@if($acceptsPayment)
|
||||
{{-- Cart bar --}}
|
||||
<div x-show="count > 0" x-cloak class="fixed inset-x-0 bottom-0 z-30 border-t border-slate-200 bg-white/95 backdrop-blur">
|
||||
<div class="mx-auto flex max-w-2xl items-center justify-between gap-3 px-4 py-3">
|
||||
<div class="text-sm">
|
||||
<span class="font-semibold text-slate-900" x-text="count + (count === 1 ? ' item' : ' items')"></span>
|
||||
<span class="text-slate-500" x-text="'· ' + @js($cur) + ' ' + total.toFixed(2)"></span>
|
||||
</div>
|
||||
<button type="button" @click="open = true" class="rounded-xl px-5 py-2.5 text-sm font-bold text-white shadow-sm" style="background:{{ $brand }}">View cart</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Cart / checkout sheet --}}
|
||||
<div x-show="open" x-cloak class="fixed inset-0 z-40 flex items-end justify-center sm:items-center" @keydown.escape.window="open = false">
|
||||
<div class="absolute inset-0 bg-black/40" @click="open = false"></div>
|
||||
<div class="relative max-h-[90vh] w-full max-w-md overflow-y-auto rounded-t-3xl bg-white p-5 shadow-xl sm:rounded-3xl">
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<h3 class="text-lg font-bold text-slate-900">Your order</h3>
|
||||
<button type="button" @click="open = false" class="text-slate-400 hover:text-slate-600">✕</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<template x-for="(line, k) in cart" :key="k">
|
||||
<div class="flex items-center gap-2 rounded-xl border border-slate-200 px-3 py-2">
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="truncate text-sm font-semibold text-slate-800" x-text="line.name"></p>
|
||||
<p class="text-xs text-slate-500" x-text="@js($cur) + ' ' + line.price.toFixed(2)"></p>
|
||||
</div>
|
||||
<button type="button" @click="dec(k)" class="h-7 w-7 rounded-lg border border-slate-200 text-slate-600">−</button>
|
||||
<span class="w-6 text-center text-sm font-semibold" x-text="line.qty"></span>
|
||||
<button type="button" @click="inc(k)" class="h-7 w-7 rounded-lg border border-slate-200 text-slate-600">+</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 space-y-1 border-t border-slate-100 pt-3 text-sm">
|
||||
<div class="flex justify-between text-slate-600"><span>Subtotal</span><span x-text="@js($cur) + ' ' + subtotal.toFixed(2)"></span></div>
|
||||
<div x-show="shipping > 0" class="flex justify-between text-slate-600"><span>Delivery</span><span x-text="@js($cur) + ' ' + shipping.toFixed(2)"></span></div>
|
||||
<div class="flex justify-between text-base font-bold text-slate-900"><span>Total</span><span x-text="@js($cur) + ' ' + total.toFixed(2)"></span></div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 space-y-2">
|
||||
<input type="text" x-model="name" placeholder="Your name *" class="w-full rounded-xl border border-slate-200 px-3.5 py-2.5 text-sm">
|
||||
<input type="email" x-model="email" placeholder="Email *" class="w-full rounded-xl border border-slate-200 px-3.5 py-2.5 text-sm">
|
||||
<input type="tel" x-model="phone" placeholder="Phone *" class="w-full rounded-xl border border-slate-200 px-3.5 py-2.5 text-sm">
|
||||
</div>
|
||||
|
||||
<p x-show="errorMsg" x-cloak class="mt-3 rounded-xl border border-red-100 bg-red-50 px-3 py-2 text-sm text-red-600" x-text="errorMsg"></p>
|
||||
|
||||
<button type="button" @click="checkout()" :disabled="loading"
|
||||
class="mt-4 w-full rounded-xl py-3 text-sm font-bold text-white shadow-sm disabled:opacity-60" style="background:{{ $brand }}">
|
||||
<span x-text="loading ? 'Processing…' : ('Pay ' + @js($cur) + ' ' + total.toFixed(2))"></span>
|
||||
</button>
|
||||
<p class="mt-2 text-center text-[11px] text-slate-400">Secure payment · You'll get an order confirmation.</p>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function storefront(cfg) {
|
||||
return {
|
||||
...cfg,
|
||||
open: false,
|
||||
loading: false,
|
||||
errorMsg: '',
|
||||
name: '', email: '', phone: '',
|
||||
cart: {},
|
||||
add(name, price, key) {
|
||||
if (this.cart[key]) { this.cart[key].qty++; }
|
||||
else { this.cart[key] = { name, price, qty: 1 }; }
|
||||
},
|
||||
inc(k) { this.cart[k].qty++; },
|
||||
dec(k) { if (--this.cart[k].qty <= 0) delete this.cart[k]; if (Object.keys(this.cart).length === 0) this.open = false; },
|
||||
get count() { return Object.values(this.cart).reduce((n, l) => n + l.qty, 0); },
|
||||
get subtotal() { return Object.values(this.cart).reduce((s, l) => s + l.price * l.qty, 0); },
|
||||
get shipping() {
|
||||
if (this.shippingType !== 'flat' || this.subtotal <= 0) return 0;
|
||||
if (this.freeAbove > 0 && this.subtotal >= this.freeAbove) return 0;
|
||||
return this.shippingFee;
|
||||
},
|
||||
get total() { return this.subtotal + this.shipping; },
|
||||
async checkout() {
|
||||
this.errorMsg = '';
|
||||
if (!this.name.trim() || !this.email.trim() || !this.phone.trim()) { this.errorMsg = 'Please fill in your name, email and phone.'; return; }
|
||||
if (this.count === 0) { this.errorMsg = 'Your cart is empty.'; return; }
|
||||
this.loading = true;
|
||||
try {
|
||||
const items = Object.values(this.cart).map(l => ({ name: l.name, price: l.price, qty: l.qty }));
|
||||
const res = await fetch(this.orderUrl, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': this.csrf, 'Accept': 'application/json' },
|
||||
body: JSON.stringify({ customer_name: this.name, customer_email: this.email, customer_phone: this.phone, shipping_fee: this.shipping, items }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) { this.errorMsg = data.error || 'Could not start checkout.'; this.loading = false; return; }
|
||||
window.location = data.checkout_url;
|
||||
} catch (e) {
|
||||
this.errorMsg = 'Network error. Please try again.';
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user