+ Your session is reserved once we confirm receipt — usually within 24 hours.
+ No Venmo? Send the exact amount and session note via any method and check the box below.
+
+
Please confirm you've sent payment to continue.
+
-
-
-
Almost There!
-
Review your details and enter your contact information.
-
-
Date—
-
Session Type—
-
Length—
-
Location—
-
-
-
-
+
+
+
+
+
+
-
-
-
-
-
-
@@ -1993,6 +2068,44 @@ A complete service agreement and model release will be provided at your session
bookingState.signatureDrawn = false;
}
+ function initPaymentStep() {
+ const pricing = window.siteConfig?.booking?.pricing || { mini: 75, full: 150 };
+ const username = window.siteConfig?.booking?.venmoUsername || 'LisiLouPhoto';
+ const types = window.siteConfig?.booking?.sessionTypes || [];
+ const locations = window.siteConfig?.locations || [];
+
+ const amount = bookingState.sessionLength === 'mini' ? pricing.mini : pricing.full;
+ const typeLabel = (bookingState.sessionType === 'other' && bookingState.sessionTypeOther)
+ ? `Other — ${bookingState.sessionTypeOther}`
+ : types.find(t => t.id === bookingState.sessionType)?.label || bookingState.sessionType;
+ const locLabel = locations.find(l => l.id === bookingState.sessionLocation)?.name || bookingState.sessionLocation;
+ const lenLabel = bookingState.sessionLength === 'mini' ? 'Mini — 30 min' : 'Full — 60 min';
+
+ document.getElementById('pay-summary-date').textContent = bookingState.sessionDate || '—';
+ document.getElementById('pay-summary-type').textContent = typeLabel || '—';
+ document.getElementById('pay-summary-length').textContent = lenLabel;
+ document.getElementById('pay-summary-location').textContent = locLabel || '—';
+ document.getElementById('payment-amount').textContent = `$${amount}`;
+
+ const note = `LisiLou Booking - ${typeLabel} on ${bookingState.sessionDate}`;
+ const venmoUrl = `https://venmo.com/${username}?txn=pay&amount=${amount}¬e=${encodeURIComponent(note)}`;
+
+ document.getElementById('venmo-link').href = venmoUrl;
+ renderVenmoQr(venmoUrl);
+ }
+
+ async function renderVenmoQr(venmoUrl) {
+ const container = document.getElementById('venmo-qr');
+ container.innerHTML = '';
+ try {
+ const res = await fetch(`/api/venmo-qr?url=${encodeURIComponent(venmoUrl)}`);
+ if (!res.ok) throw new Error('qr failed');
+ container.innerHTML = await res.text();
+ } catch {
+ // Silent — the button still works without the QR
+ }
+ }
+
function openBooking() {
document.getElementById('booking-overlay').classList.add('active');
document.body.style.overflow = 'hidden';
@@ -2050,8 +2163,8 @@ A complete service agreement and model release will be provided at your session
btnNext.disabled = false;
counter.textContent = 'Step ' + step + ' of ' + BOOKING_STEPS;
- if (step === BOOKING_STEPS) populateSummary();
- if (step === 5) initContractStep();
+ if (step === 6) initContractStep();
+ if (step === 7) initPaymentStep();
}
function selectOption(card, field) {
@@ -2115,6 +2228,25 @@ A complete service agreement and model release will be provided at your session
case 4:
return !!bookingState.sessionLocation;
case 5: {
+ // Your Info step
+ const name = document.getElementById('client-name').value.trim();
+ const email = document.getElementById('client-email').value.trim();
+ const errEl = document.getElementById('info-error');
+ if (!name || !email) {
+ errEl.textContent = 'Please enter your name and email address.';
+ errEl.style.display = 'block';
+ return false;
+ }
+ if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+ errEl.textContent = 'Please enter a valid email address.';
+ errEl.style.display = 'block';
+ return false;
+ }
+ errEl.style.display = 'none';
+ return true;
+ }
+ case 6: {
+ // Contract step
const errEl = document.getElementById('contract-error');
if (!bookingState.contractScrolled) {
errEl.textContent = 'Please scroll through the full agreement.';
@@ -2126,8 +2258,8 @@ A complete service agreement and model release will be provided at your session
errEl.style.display = 'block';
return false;
}
- const name = document.getElementById('contract-name').value.trim();
- if (!name) {
+ const sigName = document.getElementById('contract-name').value.trim();
+ if (!sigName) {
errEl.textContent = 'Please type your full name to confirm.';
errEl.style.display = 'block';
document.getElementById('contract-name').focus();
@@ -2136,77 +2268,60 @@ A complete service agreement and model release will be provided at your session
errEl.style.display = 'none';
return true;
}
- case 6: {
+ case 7: {
+ // Payment step — checkbox + submit
const ok = document.getElementById('payment-sent').checked;
document.getElementById('payment-error').style.display = ok ? 'none' : 'block';
return ok;
}
- case 7:
- return validateClientInfo();
default:
return true;
}
}
- function validateClientInfo() {
- const name = document.getElementById('client-name').value.trim();
- const email = document.getElementById('client-email').value.trim();
- const errEl = document.getElementById('confirm-error');
- if (!name || !email) {
- errEl.textContent = 'Please enter your name and email address.';
- errEl.style.display = 'block';
- return false;
- }
- if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
- errEl.textContent = 'Please enter a valid email address.';
- errEl.style.display = 'block';
- return false;
- }
- errEl.style.display = 'none';
- return true;
- }
-
async function submitBooking() {
- bookingState.sessionDate = document.getElementById('session-date').value;
- bookingState.clientName = document.getElementById('client-name').value.trim();
- bookingState.clientEmail = document.getElementById('client-email').value.trim();
- bookingState.clientPhone = document.getElementById('client-phone').value.trim();
+ // Client info is now collected in step 5
+ bookingState.sessionDate = document.getElementById('session-date').value;
+ bookingState.clientName = document.getElementById('client-name').value.trim();
+ bookingState.clientEmail = document.getElementById('client-email').value.trim();
+ bookingState.clientPhone = document.getElementById('client-phone').value.trim();
const btnNext = document.getElementById('btn-next');
btnNext.textContent = 'Submitting…';
btnNext.disabled = true;
try {
- // 1. Create booking record
+ // 1. Create booking — include payment_status since client confirmed sending
const res = await fetch('/api/bookings', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
- client_name: bookingState.clientName,
- client_email: bookingState.clientEmail,
- client_phone: bookingState.clientPhone,
- session_date: bookingState.sessionDate,
- session_type: bookingState.sessionType === 'other'
+ client_name: bookingState.clientName,
+ client_email: bookingState.clientEmail,
+ client_phone: bookingState.clientPhone,
+ session_date: bookingState.sessionDate,
+ session_type: bookingState.sessionType === 'other'
? 'other: ' + bookingState.sessionTypeOther
: bookingState.sessionType,
session_length: bookingState.sessionLength,
- location: (window.siteConfig?.locations || []).find(l => l.id === bookingState.sessionLocation)?.name
+ location: (window.siteConfig?.locations || []).find(l => l.id === bookingState.sessionLocation)?.name
|| bookingState.sessionLocation,
+ payment_status: 'pending_confirmation',
}),
});
if (!res.ok) throw new Error('server error');
const { id: bookingId } = await res.json();
- // 2. Submit signature if collected in step 5
+ // 2. Submit signature captured in step 6
if (bookingState.signatureDrawn && bookingId) {
- const sigCanvas = document.getElementById('sig-canvas');
+ const sigCanvas = document.getElementById('sig-canvas');
const contractName = document.getElementById('contract-name').value.trim();
await fetch(`/api/bookings/${bookingId}/sign`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
signature_png: sigCanvas.toDataURL('image/png'),
- full_name: contractName || bookingState.clientName,
+ full_name: contractName || bookingState.clientName,
}),
});
}