Restaurant mode Phase 3: table-QR self-ordering into the kitchen
Deploy Ladill POS / deploy (push) Successful in 23s

The "links" slice — a guest scans a table's QR, browses the menu (with
modifiers), and submits an order that lands on that table's open tab and fires
straight to the Kitchen Display.

- Public, auth-free flow scoped by an unguessable table short_code:
  GET /t/{code} (menu + client cart), POST /t/{code}/order (throttled),
  GET /t/{code}/done. Orders open/append the table's dine-in tab, add lines as
  source=guest, and send to the kitchen.
- Staff print a per-table QR (Settings → table → QR; renders client-side to the
  public menu URL). short_code is generated lazily.
- Guest lines are badged on the ticket and the KDS so staff can tell them apart;
  staff still settle the tab as usual (cash / Ladill Pay).
- Extracted PosSaleService::buildProductLine as the single product+modifier
  price resolver, now shared by staff and guest ordering (client prices never
  trusted).

Schema additive: pos_tables.short_code, pos_sale_lines.source. New
PosRestaurantTest covers the guest order firing to the kitchen; suite green (12).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
isaacclad
2026-06-24 20:13:28 +00:00
co-authored by Claude Opus 4.8
parent 50b170b0af
commit d4f4821d96
17 changed files with 605 additions and 27 deletions
@@ -63,6 +63,7 @@ class KitchenController extends Controller
'course' => $l->course, 'course' => $l->course,
'station' => $l->station?->name, 'station' => $l->station?->name,
'station_id' => $l->station_id, 'station_id' => $l->station_id,
'source' => $l->source,
'modifiers' => $l->modifiers->map(fn ($m) => $m->name)->all(), 'modifiers' => $l->modifiers->map(fn ($m) => $m->name)->all(),
'state' => $l->kitchen_state, 'state' => $l->kitchen_state,
])->all(), ])->all(),
@@ -42,4 +42,14 @@ class TableController extends Controller
'openTickets' => $openTickets, 'openTickets' => $openTickets,
]); ]);
} }
public function qr(Request $request, PosTable $table): View
{
$this->authorizeOwner($request, $table);
return view('pos.tables.qr', [
'table' => $table,
'url' => route('pos.table.menu', $table->ensureShortCode()),
]);
}
} }
+11 -20
View File
@@ -107,29 +107,19 @@ class TicketController extends Controller
]; ];
if (! empty($data['product_id'])) { if (! empty($data['product_id'])) {
$product = PosProduct::owned($this->ownerRef($request)) $resolved = $this->sales->buildProductLine(
->with('modifierGroups.modifiers') $this->ownerRef($request),
->find($data['product_id']); (int) $data['product_id'],
$data['modifier_ids'] ?? [],
$payload['quantity'],
$payload['notes'],
$payload['course'],
);
if (! $product) { if ($resolved === null) {
return response()->json(['message' => 'Unknown product.'], 422); return response()->json(['message' => 'Unknown product.'], 422);
} }
$payload = $resolved;
// Only modifiers that belong to this product's groups count.
$allowed = $product->modifierGroups->flatMap->modifiers->keyBy('id');
$chosen = collect($data['modifier_ids'] ?? [])
->map(fn ($id) => $allowed->get((int) $id))
->filter()
->values();
$payload['product_id'] = $product->id;
$payload['name'] = $product->name;
$payload['station_id'] = $product->station_id;
$payload['course'] = $payload['course'] ?? $product->course;
$payload['unit_price_minor'] = max(1, $product->price_minor + (int) $chosen->sum('price_delta_minor'));
$payload['modifiers'] = $chosen->map(fn ($m) => [
'modifier_id' => $m->id, 'name' => $m->name, 'price_delta_minor' => $m->price_delta_minor,
])->all();
} else { } else {
// Custom (open-price) line. // Custom (open-price) line.
$payload['name'] = (string) ($data['name'] ?? ''); $payload['name'] = (string) ($data['name'] ?? '');
@@ -260,6 +250,7 @@ class TicketController extends Controller
'kitchen_state' => $l->kitchen_state, 'kitchen_state' => $l->kitchen_state,
'notes' => $l->notes, 'notes' => $l->notes,
'course' => $l->course, 'course' => $l->course,
'source' => $l->source,
'modifiers' => $l->modifiers->map(fn ($m) => $m->name)->all(), 'modifiers' => $l->modifiers->map(fn ($m) => $m->name)->all(),
'fired' => $l->kitchen_state !== PosSaleLine::KITCHEN_NEW, 'fired' => $l->kitchen_state !== PosSaleLine::KITCHEN_NEW,
])->all(); ])->all();
@@ -0,0 +1,139 @@
<?php
namespace App\Http\Controllers\Public;
use App\Http\Controllers\Controller;
use App\Models\PosLocation;
use App\Models\PosProduct;
use App\Models\PosSale;
use App\Models\PosTable;
use App\Models\User;
use App\Services\Pos\PosSaleService;
use Illuminate\Http\JsonResponse;
use Illuminate\Http\Request;
use Illuminate\View\View;
/**
* Public table-QR ordering: a guest scans a table's QR, browses the menu, and
* submits an order that lands on that table's open tab and fires to the kitchen.
* No auth scoped entirely by the table's unguessable short_code.
*/
class TableOrderController extends Controller
{
public function __construct(private PosSaleService $sales) {}
public function menu(string $code): View
{
$table = PosTable::where('short_code', $code)->firstOrFail();
$owner = (string) $table->owner_ref;
$location = PosLocation::owned($owner)->first();
$products = PosProduct::owned($owner)->active()
->with(['category', 'modifierGroups.modifiers'])
->orderBy('name')->get();
return view('public.table-menu', [
'table' => $table,
'storeName' => $location?->name ?: 'Menu',
'currency' => $location?->currency ?: config('pos.default_currency', 'GHS'),
'products' => $products->map(fn (PosProduct $p) => [
'id' => $p->id,
'name' => $p->name,
'price_minor' => $p->price_minor,
'category' => $p->category?->name,
'modifier_groups' => $p->modifierGroups->map(fn ($g) => [
'id' => $g->id, 'name' => $g->name, 'min' => $g->min_select, 'max' => $g->max_select,
'modifiers' => $g->modifiers->map(fn ($m) => [
'id' => $m->id, 'name' => $m->name, 'price_delta_minor' => $m->price_delta_minor,
])->values()->all(),
])->values()->all(),
])->values()->all(),
]);
}
public function store(Request $request, string $code): JsonResponse
{
$table = PosTable::where('short_code', $code)->firstOrFail();
$owner = (string) $table->owner_ref;
$data = $request->validate([
'items' => ['required', 'array', 'min:1', 'max:50'],
'items.*.product_id' => ['required', 'integer'],
'items.*.quantity' => ['required', 'integer', 'min:1', 'max:50'],
'items.*.modifier_ids' => ['nullable', 'array'],
'items.*.modifier_ids.*' => ['integer'],
'items.*.notes' => ['nullable', 'string', 'max:200'],
'customer_name' => ['nullable', 'string', 'max:120'],
]);
$sale = $this->resolveTab($table, $owner);
if ($sale === null) {
return response()->json(['message' => 'This table is not available for ordering right now.'], 422);
}
if (! empty($data['customer_name']) && ! $sale->customer_name) {
$sale->forceFill(['customer_name' => $data['customer_name']])->save();
}
$added = 0;
foreach ($data['items'] as $item) {
$payload = $this->sales->buildProductLine(
$owner,
(int) $item['product_id'],
$item['modifier_ids'] ?? [],
(int) $item['quantity'],
$item['notes'] ?? null,
null,
'guest',
);
if ($payload !== null) {
$this->sales->addLine($sale, $payload);
$added++;
}
}
if ($added === 0) {
return response()->json(['message' => 'Those items are no longer available.'], 422);
}
// Guest orders go straight to the kitchen.
$this->sales->sendToKitchen($sale);
return response()->json(['redirect' => route('pos.table.confirmed', $code)]);
}
public function confirmed(string $code): View
{
$table = PosTable::where('short_code', $code)->firstOrFail();
$location = PosLocation::owned((string) $table->owner_ref)->first();
return view('public.table-confirmed', [
'table' => $table,
'storeName' => $location?->name ?: 'Thanks',
]);
}
private function resolveTab(PosTable $table, string $owner): ?PosSale
{
if ($table->current_sale_id) {
$existing = PosSale::owned($owner)->openTickets()->find($table->current_sale_id);
if ($existing) {
return $existing;
}
}
$merchant = User::where('public_id', $owner)->first();
if (! $merchant) {
return null;
}
$location = PosLocation::owned($owner)->first();
return $this->sales->openTicket($merchant, [
'order_type' => PosSale::ORDER_DINE_IN,
'table_id' => $table->id,
'location_id' => $location?->id,
'currency' => $location?->currency,
]);
}
}
+1
View File
@@ -38,6 +38,7 @@ class PosSaleLine extends Model
'line_total_minor', 'line_total_minor',
'position', 'position',
'kitchen_state', 'kitchen_state',
'source',
'notes', 'notes',
'course', 'course',
]; ];
+16
View File
@@ -5,6 +5,7 @@ namespace App\Models;
use Illuminate\Database\Eloquent\Builder; use Illuminate\Database\Eloquent\Builder;
use Illuminate\Database\Eloquent\Model; use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\BelongsTo; use Illuminate\Database\Eloquent\Relations\BelongsTo;
use Illuminate\Support\Str;
class PosTable extends Model class PosTable extends Model
{ {
@@ -21,10 +22,25 @@ class PosTable extends Model
'label', 'label',
'seats', 'seats',
'status', 'status',
'short_code',
'current_sale_id', 'current_sale_id',
'position', 'position',
]; ];
/** Ensure the table has a unique public short code for QR ordering. */
public function ensureShortCode(): string
{
if (! $this->short_code) {
do {
$code = strtolower(Str::random(8));
} while (static::where('short_code', $code)->exists());
$this->forceFill(['short_code' => $code])->save();
}
return $this->short_code;
}
protected function casts(): array protected function casts(): array
{ {
return [ return [
+35 -1
View File
@@ -2,6 +2,7 @@
namespace App\Services\Pos; namespace App\Services\Pos;
use App\Models\PosProduct;
use App\Models\PosSale; use App\Models\PosSale;
use App\Models\PosSaleLine; use App\Models\PosSaleLine;
use App\Models\PosSaleLineModifier; use App\Models\PosSaleLineModifier;
@@ -114,7 +115,39 @@ class PosSaleService
} }
/** /**
* @param array{product_id?: ?int, station_id?: ?int, course?: ?string, name: string, unit_price_minor: int, quantity?: int, notes?: ?string, modifiers?: list<array{modifier_id?: ?int, name: string, price_delta_minor?: int}>} $line * Resolve a catalog product (owner-scoped) + chosen modifiers into an addLine
* payload. Effective price = base + modifier deltas; null if product unknown.
*
* @param list<int|string> $modifierIds
* @return array<string,mixed>|null
*/
public function buildProductLine(string $owner, int $productId, array $modifierIds = [], int $quantity = 1, ?string $notes = null, ?string $course = null, string $source = 'staff'): ?array
{
$product = PosProduct::owned($owner)->with('modifierGroups.modifiers')->find($productId);
if (! $product) {
return null;
}
$allowed = $product->modifierGroups->flatMap->modifiers->keyBy('id');
$chosen = collect($modifierIds)->map(fn ($id) => $allowed->get((int) $id))->filter()->values();
return [
'product_id' => $product->id,
'name' => $product->name,
'station_id' => $product->station_id,
'course' => $course ?: $product->course,
'quantity' => max(1, $quantity),
'notes' => $notes,
'source' => $source,
'unit_price_minor' => max(1, $product->price_minor + (int) $chosen->sum('price_delta_minor')),
'modifiers' => $chosen->map(fn ($m) => [
'modifier_id' => $m->id, 'name' => $m->name, 'price_delta_minor' => $m->price_delta_minor,
])->all(),
];
}
/**
* @param array{product_id?: ?int, station_id?: ?int, course?: ?string, source?: string, name: string, unit_price_minor: int, quantity?: int, notes?: ?string, modifiers?: list<array{modifier_id?: ?int, name: string, price_delta_minor?: int}>} $line
*/ */
public function addLine(PosSale $sale, array $line): PosSaleLine public function addLine(PosSale $sale, array $line): PosSaleLine
{ {
@@ -138,6 +171,7 @@ class PosSaleService
'line_total_minor' => $unit * $qty, 'line_total_minor' => $unit * $qty,
'position' => $position, 'position' => $position,
'kitchen_state' => PosSaleLine::KITCHEN_NEW, 'kitchen_state' => PosSaleLine::KITCHEN_NEW,
'source' => $line['source'] ?? 'staff',
'notes' => isset($line['notes']) ? trim((string) $line['notes']) ?: null : null, 'notes' => isset($line['notes']) ? trim((string) $line['notes']) ?: null : null,
'course' => $line['course'] ?? null, 'course' => $line['course'] ?? null,
]); ]);
@@ -0,0 +1,29 @@
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
public function up(): void
{
Schema::table('pos_tables', function (Blueprint $table) {
$table->string('short_code', 16)->nullable()->after('status')->index();
});
Schema::table('pos_sale_lines', function (Blueprint $table) {
$table->string('source')->default('staff')->after('kitchen_state'); // staff | guest
});
}
public function down(): void
{
Schema::table('pos_sale_lines', function (Blueprint $table) {
$table->dropColumn('source');
});
Schema::table('pos_tables', function (Blueprint $table) {
$table->dropColumn('short_code');
});
}
};
+114
View File
@@ -485,6 +485,120 @@ Alpine.data('posKitchen', (config = {}) => ({
}, },
})); }));
// Render a QR code into the element. config: { data, size }.
Alpine.data('posQr', (config = {}) => ({
init() {
if (! window.QRCodeStyling || ! config.data) return;
const qr = new window.QRCodeStyling({
width: config.size || 220, height: config.size || 220, margin: 6,
data: config.data,
dotsOptions: { type: 'rounded', color: '#0f172a' },
backgroundOptions: { color: '#ffffff' },
});
qr.append(this.$el);
},
}));
// Public table-QR ordering — a client-side cart that submits a guest order.
// config: { products, currency, orderUrl }.
Alpine.data('posTableOrder', (config = {}) => ({
products: config.products || [],
currency: config.currency || 'GHS',
orderUrl: config.orderUrl || '',
csrf: config.csrf || document.querySelector('meta[name="csrf-token"]')?.content || '',
search: '',
activeCategory: '',
cart: [],
cartOpen: false,
busy: false,
flash: '',
customerName: '',
picker: { open: false, product: null, groups: [], notes: '' },
money(minor) { return this.currency + ' ' + ((minor || 0) / 100).toFixed(2); },
get categories() {
const set = [];
this.products.forEach((p) => { if (p.category && ! set.includes(p.category)) set.push(p.category); });
return set;
},
get filteredProducts() {
const q = this.search.trim().toLowerCase();
return this.products.filter((p) =>
(! this.activeCategory || p.category === this.activeCategory)
&& (! q || p.name.toLowerCase().includes(q)));
},
get cartCount() { return this.cart.reduce((n, i) => n + i.quantity, 0); },
get cartTotal() { return this.cart.reduce((s, i) => s + i.unit_minor * i.quantity, 0); },
tap(p) {
if (p.modifier_groups && p.modifier_groups.length) this.openPicker(p);
else this.addToCart(p, { ids: [], names: [] });
},
openPicker(p) {
this.flash = '';
this.picker = { open: true, product: p, notes: '', groups: p.modifier_groups.map((g) => ({ ...g, selected: [] })) };
},
closePicker() { this.picker.open = false; },
isSelected(g, m) { return g.selected.includes(m.id); },
toggleModifier(g, m) {
const i = g.selected.indexOf(m.id);
if (i >= 0) { g.selected.splice(i, 1); return; }
if (g.max === 1) { g.selected = [m.id]; return; }
if (g.max && g.selected.length >= g.max) return;
g.selected.push(m.id);
},
get pickerPrice() {
if (! this.picker.product) return 0;
let total = this.picker.product.price_minor;
this.picker.groups.forEach((g) => g.modifiers.forEach((m) => { if (g.selected.includes(m.id)) total += m.price_delta_minor; }));
return total;
},
get pickerValid() { return this.picker.groups.every((g) => g.selected.length >= (g.min || 0)); },
confirmPicker() {
if (! this.pickerValid) { this.flash = 'Choose the required options.'; return; }
const ids = this.picker.groups.flatMap((g) => g.selected);
const names = this.picker.groups.flatMap((g) => g.modifiers.filter((m) => g.selected.includes(m.id)).map((m) => m.name));
this.addToCart(this.picker.product, { ids, names, notes: this.picker.notes });
this.closePicker();
},
addToCart(p, opts) {
let unit = p.price_minor;
(opts.ids || []).forEach((id) => p.modifier_groups.forEach((g) => g.modifiers.forEach((m) => { if (m.id === id) unit += m.price_delta_minor; })));
this.cart.push({
key: Date.now() + '-' + Math.random(),
product_id: p.id, name: p.name, quantity: 1,
modifier_ids: opts.ids || [], modifier_names: opts.names || [],
notes: opts.notes || '', unit_minor: unit,
});
this.cartOpen = true;
},
inc(i) { i.quantity++; },
dec(i) { i.quantity--; if (i.quantity <= 0) this.remove(i); },
remove(i) { this.cart = this.cart.filter((x) => x.key !== i.key); if (! this.cart.length) this.cartOpen = false; },
async submit() {
if (! this.cart.length || this.busy) return;
this.busy = true;
this.flash = '';
try {
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.customerName || null,
items: this.cart.map((i) => ({ product_id: i.product_id, quantity: i.quantity, modifier_ids: i.modifier_ids, notes: i.notes || null })),
}),
});
const data = await res.json().catch(() => ({}));
if (! res.ok) { this.flash = data.message || 'Could not place the order.'; this.busy = false; return; }
window.location.href = data.redirect;
} catch (e) {
this.flash = 'Network error — try again.';
this.busy = false;
}
},
}));
window.Alpine = Alpine; window.Alpine = Alpine;
registerLadillConfirmStore(Alpine); registerLadillConfirmStore(Alpine);
@@ -54,6 +54,7 @@
<div class="mt-0.5 flex items-center gap-1.5"> <div class="mt-0.5 flex items-center gap-1.5">
<span x-show="line.course" x-cloak class="rounded bg-slate-100 px-1.5 text-[10px] font-medium text-slate-500" x-text="line.course"></span> <span x-show="line.course" x-cloak class="rounded bg-slate-100 px-1.5 text-[10px] font-medium text-slate-500" x-text="line.course"></span>
<span x-show="line.station" x-cloak class="rounded bg-indigo-50 px-1.5 text-[10px] font-medium text-indigo-600" x-text="line.station"></span> <span x-show="line.station" x-cloak class="rounded bg-indigo-50 px-1.5 text-[10px] font-medium text-indigo-600" x-text="line.station"></span>
<span x-show="line.source === 'guest'" x-cloak class="rounded bg-violet-50 px-1.5 text-[10px] font-medium text-violet-700">guest</span>
<span class="text-[11px] uppercase tracking-wide text-slate-400" x-text="line.state"></span> <span class="text-[11px] uppercase tracking-wide text-slate-400" x-text="line.state"></span>
</div> </div>
</div> </div>
+9 -6
View File
@@ -83,12 +83,15 @@
<span class="font-medium text-slate-900">{{ $table->label }}</span> <span class="font-medium text-slate-900">{{ $table->label }}</span>
<span class="text-slate-400">· {{ $table->area ?: 'Floor' }} · {{ $table->seats }} seats · {{ $table->isFree() ? 'free' : 'occupied' }}</span> <span class="text-slate-400">· {{ $table->area ?: 'Floor' }} · {{ $table->seats }} seats · {{ $table->isFree() ? 'free' : 'occupied' }}</span>
</span> </span>
<form method="POST" action="{{ route('pos.settings.tables.destroy', $table) }}" <div class="flex items-center gap-3">
onsubmit="return confirm('Remove this table?');"> <a href="{{ route('pos.tables.qr', $table) }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">QR</a>
@csrf <form method="POST" action="{{ route('pos.settings.tables.destroy', $table) }}"
@method('DELETE') onsubmit="return confirm('Remove this table?');">
<button class="text-sm font-medium text-red-500 hover:text-red-700">Remove</button> @csrf
</form> @method('DELETE')
<button class="text-sm font-medium text-red-500 hover:text-red-700">Remove</button>
</form>
</div>
</li> </li>
@endforeach @endforeach
</ul> </ul>
+20
View File
@@ -0,0 +1,20 @@
<x-app-layout title="Table QR">
<div class="mx-auto max-w-md space-y-4">
<a href="{{ route('pos.floor') }}" class="inline-flex items-center gap-1 text-sm text-slate-500 hover:text-slate-700 print:hidden">
<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>
Floor
</a>
<div class="rounded-2xl border border-slate-200 bg-white p-8 text-center">
<p class="text-xs font-semibold uppercase tracking-widest text-slate-400">Scan to order</p>
<h1 class="mt-1 text-2xl font-bold text-slate-900">{{ $table->label }}</h1>
<div x-data="posQr(@js(['data' => $url, 'size' => 240]))" class="mt-5 flex justify-center"></div>
<p class="mt-4 break-all text-xs text-slate-400">{{ $url }}</p>
</div>
<div class="flex justify-center gap-2 print:hidden">
<button type="button" onclick="window.print()" class="btn-primary">Print</button>
<a href="{{ $url }}" target="_blank" rel="noopener" class="rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Open menu</a>
</div>
</div>
</x-app-layout>
@@ -68,6 +68,7 @@
<p x-show="line.notes" x-cloak class="text-xs text-rose-600" x-text="line.notes"></p> <p x-show="line.notes" x-cloak class="text-xs text-rose-600" x-text="line.notes"></p>
<div class="mt-1 flex items-center gap-1.5"> <div class="mt-1 flex items-center gap-1.5">
<span x-show="line.course" x-cloak class="rounded-full bg-slate-100 px-1.5 py-0.5 text-[10px] font-medium text-slate-500" x-text="courseLabel(line.course)"></span> <span x-show="line.course" x-cloak class="rounded-full bg-slate-100 px-1.5 py-0.5 text-[10px] font-medium text-slate-500" x-text="courseLabel(line.course)"></span>
<span x-show="line.source === 'guest'" x-cloak class="rounded-full bg-violet-50 px-1.5 py-0.5 text-[10px] font-medium text-violet-700">Guest</span>
<span x-show="line.fired" x-cloak class="rounded-full bg-amber-50 px-1.5 py-0.5 text-[10px] font-medium text-amber-700">In kitchen</span> <span x-show="line.fired" x-cloak class="rounded-full bg-amber-50 px-1.5 py-0.5 text-[10px] font-medium text-amber-700">In kitchen</span>
</div> </div>
</div> </div>
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en" class="h-full bg-slate-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="robots" content="noindex">
<title>Order received · {{ $storeName }}</title>
@include('partials.favicon')
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600,700&display=swap" rel="stylesheet" />
@vite(['resources/css/app.css'])
</head>
<body class="flex min-h-screen items-center justify-center px-4 font-sans antialiased">
<div class="w-full max-w-sm rounded-3xl bg-white p-8 text-center shadow-xl shadow-slate-200/70">
<div class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-emerald-50 text-emerald-600">
<svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke-width="1.6" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/></svg>
</div>
<h1 class="mt-5 text-xl font-semibold text-slate-900">Order sent to the kitchen</h1>
<p class="mt-2 text-sm leading-relaxed text-slate-500">Thanks! Your order for {{ $table->label }} is being prepared. Pay at the table when you're done.</p>
<a href="{{ route('pos.table.menu', $table->short_code) }}"
class="mt-6 inline-block rounded-xl border border-slate-200 px-5 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50">
Order more
</a>
</div>
</body>
</html>
+154
View File
@@ -0,0 +1,154 @@
<!DOCTYPE html>
<html lang="en" class="h-full bg-slate-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="robots" content="noindex">
<title>{{ $storeName }} · {{ $table->label }}</title>
@include('partials.favicon')
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600,700&display=swap" rel="stylesheet" />
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="min-h-screen font-sans antialiased">
<div x-data="posTableOrder(@js([
'products' => $products,
'currency' => $currency,
'orderUrl' => route('pos.table.order', $table->short_code),
]))" class="mx-auto max-w-lg px-4 pb-28 pt-5">
<header class="mb-4">
<h1 class="text-xl font-bold text-slate-900">{{ $storeName }}</h1>
<p class="text-sm text-slate-500">{{ $table->label }} · order &amp; we'll bring it over</p>
</header>
<input type="search" x-model="search" placeholder="Search the menu…"
class="mb-3 w-full rounded-xl border-slate-200 text-sm focus:border-indigo-500 focus:ring-indigo-500">
<div x-show="categories.length" class="mb-3 flex flex-wrap gap-1.5">
<button type="button" @click="activeCategory = ''" :class="activeCategory === '' ? 'bg-indigo-600 text-white' : 'bg-white text-slate-600 border border-slate-200'"
class="rounded-full px-3 py-1 text-xs font-medium">All</button>
<template x-for="c in categories" :key="c">
<button type="button" @click="activeCategory = c" :class="activeCategory === c ? 'bg-indigo-600 text-white' : 'bg-white text-slate-600 border border-slate-200'"
class="rounded-full px-3 py-1 text-xs font-medium" x-text="c"></button>
</template>
</div>
<p x-show="flash" x-text="flash" x-cloak class="mb-3 rounded-xl border border-red-100 bg-red-50 px-4 py-2 text-sm text-red-700"></p>
<div class="space-y-2">
<template x-for="p in filteredProducts" :key="p.id">
<button type="button" @click="tap(p)"
class="flex w-full items-center justify-between gap-3 rounded-2xl border border-slate-200 bg-white p-4 text-left transition active:scale-[.99]">
<span class="min-w-0">
<span class="block text-sm font-semibold text-slate-900" x-text="p.name"></span>
<span x-show="p.modifier_groups.length" class="text-[11px] font-medium text-indigo-500">choose options</span>
</span>
<span class="shrink-0 text-sm font-semibold text-slate-700" x-text="money(p.price_minor)"></span>
</button>
</template>
<template x-if="filteredProducts.length === 0">
<p class="py-10 text-center text-sm text-slate-400">Nothing on the menu yet.</p>
</template>
</div>
{{-- Floating cart bar --}}
<div x-show="cartCount > 0" x-cloak class="fixed inset-x-0 bottom-0 z-30 border-t border-slate-200 bg-white/95 p-3 backdrop-blur">
<div class="mx-auto max-w-lg">
<button type="button" @click="cartOpen = true"
class="flex w-full items-center justify-between rounded-xl bg-indigo-600 px-4 py-3 text-sm font-semibold text-white">
<span><span x-text="cartCount"></span> item(s)</span>
<span>View order · <span x-text="money(cartTotal)"></span></span>
</button>
</div>
</div>
{{-- Modifier picker --}}
<div x-show="picker.open" x-cloak class="fixed inset-0 z-50 flex items-end justify-center bg-slate-900/40 sm:items-center sm:p-4" @click.self="closePicker()">
<div class="w-full max-w-md overflow-hidden rounded-t-2xl bg-white shadow-xl sm:rounded-2xl">
<div class="flex items-center justify-between border-b border-slate-100 px-5 py-3">
<p class="text-sm font-semibold text-slate-900" x-text="picker.product?.name"></p>
<button @click="closePicker()" class="rounded-lg p-1.5 text-slate-400 hover:bg-slate-100">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
</button>
</div>
<div class="max-h-[60vh] space-y-4 overflow-y-auto px-5 py-4">
<template x-for="g in picker.groups" :key="g.id">
<div>
<p class="text-xs font-semibold text-slate-600">
<span x-text="g.name"></span>
<span class="font-normal text-slate-400" x-text="'(choose ' + g.min + (g.max ? '' + g.max : '+') + ')'"></span>
</p>
<div class="mt-2 flex flex-wrap gap-2">
<template x-for="m in g.modifiers" :key="m.id">
<button type="button" @click="toggleModifier(g, m)"
:class="isSelected(g, m) ? 'border-indigo-500 bg-indigo-50 text-indigo-700' : 'border-slate-200 text-slate-600'"
class="rounded-lg border px-3 py-1.5 text-sm font-medium">
<span x-text="m.name"></span>
<span x-show="m.price_delta_minor" class="text-xs opacity-70"
x-text="(m.price_delta_minor > 0 ? ' +' : ' ') + money(m.price_delta_minor).replace(currency + ' ', '')"></span>
</button>
</template>
</div>
</div>
</template>
<div>
<label class="text-xs font-semibold text-slate-600">Notes</label>
<input type="text" x-model="picker.notes" maxlength="200" placeholder="e.g. no onions"
class="mt-1 w-full rounded-xl border-slate-200 text-sm focus:border-indigo-500 focus:ring-indigo-500">
</div>
</div>
<div class="flex items-center justify-between gap-3 border-t border-slate-100 px-5 py-3">
<span class="text-sm font-semibold text-slate-900" x-text="money(pickerPrice)"></span>
<button type="button" @click="confirmPicker()" :disabled="! pickerValid" class="btn-primary disabled:opacity-40">Add</button>
</div>
</div>
</div>
{{-- Cart sheet --}}
<div x-show="cartOpen" x-cloak class="fixed inset-0 z-50 flex items-end justify-center bg-slate-900/40 sm:items-center sm:p-4" @click.self="cartOpen = false">
<div class="flex max-h-[85vh] w-full max-w-md flex-col overflow-hidden rounded-t-2xl bg-white shadow-xl sm:rounded-2xl">
<div class="flex items-center justify-between border-b border-slate-100 px-5 py-3">
<p class="text-sm font-semibold text-slate-900">Your order · {{ $table->label }}</p>
<button @click="cartOpen = false" class="rounded-lg p-1.5 text-slate-400 hover:bg-slate-100">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
</button>
</div>
<div class="flex-1 space-y-2 overflow-y-auto px-5 py-4">
<template x-for="i in cart" :key="i.key">
<div class="rounded-xl border border-slate-100 p-2.5">
<div class="flex items-start justify-between gap-2">
<div class="min-w-0">
<p class="truncate text-sm font-medium text-slate-900" x-text="i.name"></p>
<p x-show="i.modifier_names.length" x-cloak class="text-xs text-slate-500" x-text="i.modifier_names.join(', ')"></p>
<p x-show="i.notes" x-cloak class="text-xs text-rose-600" x-text="i.notes"></p>
</div>
<div class="text-right">
<p class="text-sm font-semibold text-slate-900" x-text="money(i.unit_minor * i.quantity)"></p>
<div class="mt-1 flex items-center justify-end gap-1.5">
<button type="button" @click="dec(i)" class="flex h-6 w-6 items-center justify-center rounded-md border border-slate-200 text-slate-600"></button>
<span class="w-5 text-center text-sm" x-text="i.quantity"></span>
<button type="button" @click="inc(i)" class="flex h-6 w-6 items-center justify-center rounded-md border border-slate-200 text-slate-600">+</button>
</div>
</div>
</div>
</div>
</template>
</div>
<div class="border-t border-slate-100 p-4">
<input type="text" x-model="customerName" placeholder="Your name (optional)"
class="mb-2 w-full rounded-xl border-slate-200 text-sm focus:border-indigo-500 focus:ring-indigo-500">
<div class="mb-3 flex items-center justify-between text-base font-semibold text-slate-900">
<span>Total</span><span x-text="money(cartTotal)"></span>
</div>
<button type="button" @click="submit()" :disabled="busy || cart.length === 0" class="btn-primary btn-primary-lg w-full disabled:opacity-40">
Send order to kitchen
</button>
<p class="mt-2 text-center text-[11px] text-slate-400">Pay at the table when you're done.</p>
</div>
</div>
</div>
</div>
</body>
</html>
+7
View File
@@ -12,6 +12,7 @@ use App\Http\Controllers\Pos\SettingsController;
use App\Http\Controllers\Pos\TableController; use App\Http\Controllers\Pos\TableController;
use App\Http\Controllers\Pos\TicketController; use App\Http\Controllers\Pos\TicketController;
use App\Http\Controllers\NotificationController; use App\Http\Controllers\NotificationController;
use App\Http\Controllers\Public\TableOrderController;
use App\Http\Controllers\WalletBalanceController; use App\Http\Controllers\WalletBalanceController;
use Illuminate\Support\Facades\Route; use Illuminate\Support\Facades\Route;
@@ -30,6 +31,11 @@ Route::get('/signed-out', fn () => auth()->check() ? redirect()->route('pos.dash
Route::get('/sales/{sale}/callback', [SaleController::class, 'callback'])->name('pos.sales.callback'); Route::get('/sales/{sale}/callback', [SaleController::class, 'callback'])->name('pos.sales.callback');
// Public table-QR ordering (no auth — scoped by the table short_code).
Route::get('/t/{code}', [TableOrderController::class, 'menu'])->name('pos.table.menu');
Route::post('/t/{code}/order', [TableOrderController::class, 'store'])->middleware('throttle:20,1')->name('pos.table.order');
Route::get('/t/{code}/done', [TableOrderController::class, 'confirmed'])->name('pos.table.confirmed');
Route::middleware(['auth', 'platform.session'])->group(function () { Route::middleware(['auth', 'platform.session'])->group(function () {
Route::get('/wallet/balance', [WalletBalanceController::class, 'balance'])->name('wallet.balance'); Route::get('/wallet/balance', [WalletBalanceController::class, 'balance'])->name('wallet.balance');
@@ -50,6 +56,7 @@ Route::middleware(['auth', 'platform.session'])->group(function () {
// Restaurant mode — floor, open tickets (tabs), and the kitchen display. // Restaurant mode — floor, open tickets (tabs), and the kitchen display.
Route::get('/floor', [TableController::class, 'index'])->name('pos.floor'); Route::get('/floor', [TableController::class, 'index'])->name('pos.floor');
Route::get('/floor/tables/{table}/qr', [TableController::class, 'qr'])->name('pos.tables.qr');
Route::post('/tickets', [TicketController::class, 'open'])->name('pos.tickets.open'); Route::post('/tickets', [TicketController::class, 'open'])->name('pos.tickets.open');
Route::get('/tickets/{sale}', [TicketController::class, 'show'])->name('pos.tickets.show'); Route::get('/tickets/{sale}', [TicketController::class, 'show'])->name('pos.tickets.show');
Route::post('/tickets/{sale}/lines', [TicketController::class, 'addLine'])->name('pos.tickets.lines.add'); Route::post('/tickets/{sale}/lines', [TicketController::class, 'addLine'])->name('pos.tickets.lines.add');
+31
View File
@@ -156,6 +156,37 @@ class PosRestaurantTest extends TestCase
->assertJsonPath('tickets.0.lines.0.modifiers.0', 'Large'); ->assertJsonPath('tickets.0.lines.0.modifiers.0', 'Large');
} }
public function test_guest_table_qr_order_fires_to_kitchen(): void
{
$user = $this->user();
[, $table, $product] = $this->restaurant($user);
$code = $table->ensureShortCode();
// Public menu loads with no auth.
$this->get(route('pos.table.menu', $code))->assertOk()->assertSee($product->name);
// Guest submits an order from the table.
$this->postJson(route('pos.table.order', $code), [
'customer_name' => 'Ama',
'items' => [
['product_id' => $product->id, 'quantity' => 2, 'modifier_ids' => [], 'notes' => 'extra hot'],
],
])->assertOk()->assertJsonStructure(['redirect']);
$sale = PosSale::where('owner_ref', $user->public_id)->firstOrFail();
$this->assertSame(PosSale::ORDER_DINE_IN, $sale->order_type);
$this->assertSame($table->id, $sale->table_id);
$this->assertSame('Ama', $sale->customer_name);
$this->assertSame(PosSale::KITCHEN_ACTIVE, $sale->kitchen_status);
$this->assertSame(PosTable::STATUS_OCCUPIED, $table->fresh()->status);
$line = $sale->lines()->firstOrFail();
$this->assertSame('guest', $line->source);
$this->assertSame(2, $line->quantity);
$this->assertSame('extra hot', $line->notes);
$this->assertSame(PosSaleLine::KITCHEN_QUEUED, $line->kitchen_state);
}
public function test_cannot_open_two_tabs_on_one_table(): void public function test_cannot_open_two_tabs_on_one_table(): void
{ {
$user = $this->user(); $user = $this->user();