isaaccladandClaude Opus 4.8
d4f4821d96
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>
606 lines
22 KiB
JavaScript
606 lines
22 KiB
JavaScript
import './bootstrap';
|
|
|
|
import { registerLadillConfirmStore, registerLadillModalHelpers } from './ladill-modals';
|
|
import { registerLadillSearchShortcut } from './ladill-search-shortcut';
|
|
|
|
registerLadillModalHelpers();
|
|
registerLadillSearchShortcut();
|
|
|
|
|
|
import Alpine from 'alpinejs';
|
|
import collapse from '@alpinejs/collapse';
|
|
import QRCodeStyling from 'qr-code-styling';
|
|
window.QRCodeStyling = QRCodeStyling;
|
|
import qrcode from 'qrcode-generator';
|
|
window.qrcode = qrcode;
|
|
|
|
Alpine.plugin(collapse);
|
|
|
|
Alpine.data('notificationDropdown', (config = {}) => ({
|
|
open: false,
|
|
loading: false,
|
|
notifications: [],
|
|
unreadCount: 0,
|
|
unreadUrl: config.unreadUrl || '/notifications/unread',
|
|
markReadUrl: config.markReadUrl || '/notifications/__ID__/read',
|
|
markAllReadUrl: config.markAllReadUrl || '/notifications/mark-all-read',
|
|
indexUrl: config.indexUrl || '/notifications',
|
|
csrfToken: config.csrfToken || document.querySelector('meta[name="csrf-token"]')?.content || '',
|
|
|
|
init() {
|
|
this.fetchUnread();
|
|
setInterval(() => this.fetchUnread(), 60000);
|
|
},
|
|
|
|
async fetchUnread() {
|
|
try {
|
|
const res = await fetch(this.unreadUrl, {
|
|
headers: { Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
|
|
});
|
|
const data = await res.json();
|
|
this.notifications = data.notifications || [];
|
|
this.unreadCount = data.unread_count || 0;
|
|
} catch (e) {
|
|
console.error('Failed to fetch notifications', e);
|
|
}
|
|
},
|
|
|
|
toggle() {
|
|
this.open = !this.open;
|
|
if (this.open) {
|
|
this.loading = true;
|
|
this.fetchUnread().finally(() => { this.loading = false; });
|
|
}
|
|
},
|
|
|
|
async markRead(id) {
|
|
const url = this.markReadUrl.replace('__ID__', id);
|
|
try {
|
|
await fetch(url, {
|
|
method: 'POST',
|
|
headers: {
|
|
Accept: 'application/json',
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': this.csrfToken,
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
},
|
|
});
|
|
this.notifications = this.notifications.filter(n => n.id !== id);
|
|
this.unreadCount = Math.max(0, this.unreadCount - 1);
|
|
} catch (e) {
|
|
console.error('Failed to mark notification as read', e);
|
|
}
|
|
},
|
|
|
|
async markAllRead() {
|
|
try {
|
|
await fetch(this.markAllReadUrl, {
|
|
method: 'POST',
|
|
headers: {
|
|
Accept: 'application/json',
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': this.csrfToken,
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
},
|
|
});
|
|
this.notifications = [];
|
|
this.unreadCount = 0;
|
|
} catch (e) {
|
|
console.error('Failed to mark all notifications as read', e);
|
|
}
|
|
},
|
|
|
|
getIconBg(icon) {
|
|
const map = { domain: 'bg-emerald-50', hosting: 'bg-violet-50', email: 'bg-pink-50', billing: 'bg-amber-50', success: 'bg-green-50' };
|
|
return map[icon] || 'bg-slate-100';
|
|
},
|
|
|
|
getIconColor(icon) {
|
|
const map = { domain: 'text-emerald-600', hosting: 'text-violet-600', email: 'text-pink-600', billing: 'text-amber-600', success: 'text-green-600' };
|
|
return map[icon] || 'text-slate-500';
|
|
},
|
|
}));
|
|
|
|
// Afia — Ladill in-app AI assistant (slide-over chat). Opened via the topbar AI button
|
|
// which dispatches a window 'afia-open' event. Greeting/suggestions are passed from Blade.
|
|
Alpine.data('afia', (config = {}) => ({
|
|
open: false,
|
|
input: '',
|
|
loading: false,
|
|
messages: [
|
|
{ role: 'assistant', text: config.greeting || "Hi, I'm Afia 👋 How can I help?" },
|
|
],
|
|
suggestions: config.suggestions || [],
|
|
init() {
|
|
window.addEventListener('afia-open', () => {
|
|
this.open = true;
|
|
this.$nextTick(() => this.$refs.input && this.$refs.input.focus());
|
|
});
|
|
},
|
|
close() { this.open = false; },
|
|
useSuggestion(s) { this.input = s; this.send(); },
|
|
scrollDown() {
|
|
this.$nextTick(() => { const el = this.$refs.scroll; if (el) el.scrollTop = el.scrollHeight; });
|
|
},
|
|
async send() {
|
|
const text = this.input.trim();
|
|
if (!text || this.loading) return;
|
|
const history = this.messages.map((m) => ({ role: m.role, text: m.text }));
|
|
this.messages.push({ role: 'user', text });
|
|
this.input = '';
|
|
this.loading = true;
|
|
this.scrollDown();
|
|
try {
|
|
const res = await fetch(config.chatUrl, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': config.csrf, 'Accept': 'application/json' },
|
|
body: JSON.stringify({ message: text, history }),
|
|
});
|
|
const data = await res.json();
|
|
this.messages.push({ role: 'assistant', text: data.reply || data.message || 'Sorry, I could not respond.' });
|
|
} catch (e) {
|
|
this.messages.push({ role: 'assistant', text: 'Network error — please try again.' });
|
|
}
|
|
this.loading = false;
|
|
this.scrollDown();
|
|
},
|
|
}));
|
|
|
|
function mobileKeyboardBottomOffset() {
|
|
const viewport = window.visualViewport;
|
|
if (!viewport) {
|
|
return 0;
|
|
}
|
|
|
|
return Math.max(0, Math.round(window.innerHeight - viewport.height - viewport.offsetTop));
|
|
}
|
|
|
|
Alpine.data('miniPaymentLanding', (config = {}) => ({
|
|
amount: config.amount ?? '',
|
|
loading: false,
|
|
errorMsg: config.errorMsg ?? '',
|
|
showSheet: false,
|
|
checkoutUrl: '',
|
|
paymentSheetStyle: '',
|
|
sheetBleedStyle: '',
|
|
|
|
init() {
|
|
this._syncSheet = () => {
|
|
if (window.innerWidth >= 768) {
|
|
this.paymentSheetStyle = '';
|
|
this.sheetBleedStyle = '';
|
|
return;
|
|
}
|
|
|
|
const offset = mobileKeyboardBottomOffset();
|
|
const safePad = offset > 0 ? '1.25rem' : 'max(1.25rem, env(safe-area-inset-bottom))';
|
|
this.paymentSheetStyle = `bottom: ${offset}px; padding-bottom: ${safePad};`;
|
|
this.sheetBleedStyle = `bottom: ${offset}px;`;
|
|
};
|
|
|
|
this._onViewportChange = () => this._syncSheet();
|
|
this._onFocusChange = () => {
|
|
requestAnimationFrame(this._syncSheet);
|
|
setTimeout(this._syncSheet, 150);
|
|
setTimeout(this._syncSheet, 350);
|
|
};
|
|
|
|
window.visualViewport?.addEventListener('resize', this._onViewportChange);
|
|
window.visualViewport?.addEventListener('scroll', this._onViewportChange);
|
|
document.addEventListener('focusin', this._onFocusChange);
|
|
document.addEventListener('focusout', this._onFocusChange);
|
|
|
|
if (window.innerWidth < 768) {
|
|
document.documentElement.classList.add('mini-payment-page');
|
|
}
|
|
|
|
this._syncSheet();
|
|
},
|
|
|
|
destroy() {
|
|
window.visualViewport?.removeEventListener('resize', this._onViewportChange);
|
|
window.visualViewport?.removeEventListener('scroll', this._onViewportChange);
|
|
document.removeEventListener('focusin', this._onFocusChange);
|
|
document.removeEventListener('focusout', this._onFocusChange);
|
|
document.documentElement.classList.remove('mini-payment-page');
|
|
},
|
|
|
|
async submitPay() {
|
|
const value = parseFloat(this.amount);
|
|
if (!value || value <= 0) {
|
|
this.errorMsg = 'Enter an amount greater than zero.';
|
|
return;
|
|
}
|
|
|
|
this.errorMsg = '';
|
|
this.loading = true;
|
|
|
|
try {
|
|
const res = await fetch(config.payUrl, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
Accept: 'application/json',
|
|
'X-CSRF-TOKEN': config.csrf,
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
},
|
|
body: JSON.stringify({ amount: value }),
|
|
});
|
|
const data = await res.json().catch(() => ({}));
|
|
if (!res.ok || data.error || data.message) {
|
|
this.errorMsg = data.error || data.message || 'Could not start payment. Please try again.';
|
|
this.loading = false;
|
|
return;
|
|
}
|
|
if (!data.checkout_url) {
|
|
this.errorMsg = 'Could not start payment. Please try again.';
|
|
this.loading = false;
|
|
return;
|
|
}
|
|
if (window.innerWidth < 768) {
|
|
this.checkoutUrl = data.checkout_url;
|
|
this.showSheet = true;
|
|
this.loading = false;
|
|
} else {
|
|
window.location.href = data.checkout_url;
|
|
}
|
|
} catch (e) {
|
|
this.errorMsg = 'Network error. Please try again.';
|
|
this.loading = false;
|
|
}
|
|
},
|
|
}));
|
|
|
|
Alpine.data('topbarSearch', (config = {}) => ({
|
|
query: config.initialQuery || '',
|
|
results: Array.isArray(config.initialResults) ? config.initialResults : [],
|
|
open: !!config.openOnInit,
|
|
loading: false,
|
|
active: 0,
|
|
_abort: null,
|
|
searchUrl: config.searchUrl || '/search',
|
|
|
|
init() {
|
|
if (config.autoFocus) {
|
|
this.$nextTick(() => this.$refs.input?.focus());
|
|
}
|
|
},
|
|
|
|
onFocus() {
|
|
if (this.results.length > 0 || this.query.trim().length >= 2) this.open = true;
|
|
},
|
|
|
|
async search() {
|
|
const q = this.query.trim();
|
|
if (q.length < 2) { this.results = []; this.open = false; return; }
|
|
|
|
this.loading = true;
|
|
this.open = true;
|
|
this.active = 0;
|
|
|
|
if (this._abort) this._abort.abort();
|
|
this._abort = new AbortController();
|
|
|
|
try {
|
|
const res = await fetch(`${this.searchUrl}?q=${encodeURIComponent(q)}`, {
|
|
signal: this._abort.signal,
|
|
headers: { Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
|
|
});
|
|
const data = await res.json();
|
|
this.results = data.results || [];
|
|
} catch (e) {
|
|
if (e.name !== 'AbortError') this.results = [];
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
|
|
moveDown() { if (this.active < this.results.length - 1) this.active++; },
|
|
moveUp() { if (this.active > 0) this.active--; },
|
|
go() {
|
|
if (this.results[this.active]) window.location.href = this.results[this.active].url;
|
|
},
|
|
}));
|
|
|
|
|
|
// Wallet balance peek for the avatar dropdown.
|
|
Alpine.data('walletWidget', (config = {}) => ({
|
|
display: '…',
|
|
async load() {
|
|
if (! config.url) {
|
|
this.display = 'View wallet';
|
|
|
|
return;
|
|
}
|
|
try {
|
|
const res = await fetch(config.url, { headers: { Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest' } });
|
|
const data = await res.json();
|
|
this.display = data.available ? data.formatted : 'View wallet';
|
|
} catch (e) {
|
|
this.display = 'View wallet';
|
|
}
|
|
},
|
|
}));
|
|
|
|
// Restaurant ticket (open tab) — persists every change to the server and
|
|
// re-renders from the authoritative response. config: { base, lines, products, totalMinor, currency }.
|
|
Alpine.data('posTicket', (config = {}) => ({
|
|
lines: config.lines || [],
|
|
products: config.products || [],
|
|
totalMinor: config.totalMinor || 0,
|
|
currency: config.currency || 'GHS',
|
|
base: config.base || '',
|
|
csrf: config.csrf || document.querySelector('meta[name="csrf-token"]')?.content || '',
|
|
search: '',
|
|
busy: false,
|
|
flash: '',
|
|
|
|
activeCategory: '',
|
|
picker: { open: false, product: null, groups: [], notes: '', course: '' },
|
|
courseLabels: config.courseLabels || {},
|
|
|
|
money(minor) { return this.currency + ' ' + ((minor || 0) / 100).toFixed(2); },
|
|
get hasNew() { return this.lines.some((l) => ! l.fired); },
|
|
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 newCourses() {
|
|
const s = [];
|
|
this.lines.forEach((l) => { if (! l.fired) { const c = l.course || ''; if (! s.includes(c)) s.push(c); } });
|
|
return s;
|
|
},
|
|
courseLabel(c) { return this.courseLabels[c] || 'No course'; },
|
|
|
|
// Modifier picker
|
|
tap(p) {
|
|
if (p.modifier_groups && p.modifier_groups.length) this.openPicker(p);
|
|
else this.addProduct(p, {});
|
|
},
|
|
openPicker(p) {
|
|
this.flash = '';
|
|
this.picker = {
|
|
open: true, product: p, notes: '', course: '',
|
|
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);
|
|
this.addProduct(this.picker.product, { modifier_ids: ids, notes: this.picker.notes, course: this.picker.course });
|
|
this.closePicker();
|
|
},
|
|
|
|
async req(method, url, body) {
|
|
if (this.busy) return null;
|
|
this.busy = true;
|
|
this.flash = '';
|
|
try {
|
|
const res = await fetch(url, {
|
|
method,
|
|
headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': this.csrf, Accept: 'application/json' },
|
|
body: body ? JSON.stringify(body) : undefined,
|
|
});
|
|
if (! res.ok) {
|
|
const e = await res.json().catch(() => ({}));
|
|
this.flash = e.message || 'Something went wrong.';
|
|
return null;
|
|
}
|
|
return await res.json();
|
|
} catch (e) {
|
|
this.flash = 'Network error — try again.';
|
|
return null;
|
|
} finally {
|
|
this.busy = false;
|
|
}
|
|
},
|
|
apply(data) { if (data) { this.lines = data.lines; this.totalMinor = data.total_minor; } },
|
|
|
|
async addProduct(p, opts = {}) {
|
|
this.apply(await this.req('POST', this.base + '/lines', {
|
|
product_id: p.id,
|
|
quantity: 1,
|
|
modifier_ids: opts.modifier_ids || [],
|
|
notes: opts.notes || null,
|
|
course: opts.course || null,
|
|
}));
|
|
},
|
|
async setQty(line, qty) { this.apply(await this.req('PATCH', this.base + '/lines/' + line.id, { quantity: qty })); },
|
|
inc(line) { this.setQty(line, line.quantity + 1); },
|
|
dec(line) { this.setQty(line, line.quantity - 1); },
|
|
async remove(line) { this.apply(await this.req('DELETE', this.base + '/lines/' + line.id)); },
|
|
async send(course = null) {
|
|
const data = await this.req('POST', this.base + '/send', { course });
|
|
this.apply(data);
|
|
if (data) this.flash = data.fired > 0 ? ('Sent ' + data.fired + ' item(s) to the kitchen.') : 'Nothing new to send.';
|
|
},
|
|
}));
|
|
|
|
// Kitchen Display (KDS) — polls the active-ticket feed and bumps line states.
|
|
// config: { feedUrl, bumpUrl } where bumpUrl contains __ID__.
|
|
Alpine.data('posKitchen', (config = {}) => ({
|
|
tickets: [],
|
|
feedUrl: config.feedUrl || '/kitchen/feed',
|
|
bumpUrl: config.bumpUrl || '/kitchen/lines/__ID__/bump',
|
|
csrf: config.csrf || document.querySelector('meta[name="csrf-token"]')?.content || '',
|
|
now: Date.now(),
|
|
loaded: false,
|
|
activeStation: '',
|
|
|
|
init() {
|
|
this.load();
|
|
setInterval(() => this.load(), 4000);
|
|
setInterval(() => { this.now = Date.now(); }, 1000);
|
|
},
|
|
get visibleTickets() {
|
|
if (! this.activeStation) return this.tickets;
|
|
const sid = String(this.activeStation);
|
|
return this.tickets
|
|
.map((t) => ({ ...t, lines: t.lines.filter((l) => String(l.station_id || '') === sid) }))
|
|
.filter((t) => t.lines.length);
|
|
},
|
|
async load() {
|
|
try {
|
|
const res = await fetch(this.feedUrl, { headers: { Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest' } });
|
|
const data = await res.json();
|
|
this.tickets = data.tickets || [];
|
|
} catch (e) { /* keep last view on transient errors */ }
|
|
this.loaded = true;
|
|
},
|
|
elapsed(iso) {
|
|
if (! iso) return '';
|
|
return Math.max(0, Math.floor((this.now - new Date(iso).getTime()) / 60000)) + 'm';
|
|
},
|
|
nextLabel(state) { return ({ queued: 'Start', preparing: 'Ready', ready: 'Served' })[state] || 'Bump'; },
|
|
async bump(line) {
|
|
try {
|
|
await fetch(this.bumpUrl.replace('__ID__', line.id), {
|
|
method: 'POST', headers: { 'X-CSRF-TOKEN': this.csrf, Accept: 'application/json' },
|
|
});
|
|
await this.load();
|
|
} catch (e) { /* ignore */ }
|
|
},
|
|
}));
|
|
|
|
// 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;
|
|
registerLadillConfirmStore(Alpine);
|
|
|
|
Alpine.start();
|