Step reorder (still 7 steps): Info (5) → Contract (6) → Payment (7)
- Client info moved to step 5 so it's available for the contract signature
name and the personalised Venmo note before the payment step
- Contract is now step 6 (initContractStep triggered on step 6 entry)
- Step 7 is the full payment step — no separate confirm step needed
Payment step (step 7):
- Compact summary table: date, session type, length, location
- Large price display from siteConfig.booking.pricing
- "Pay on Venmo" button linking to:
https://venmo.com/<username>?txn=pay&amount=<price>¬e=<encoded-note>
Note format: "LisiLou Booking - [SessionType] on [Date]"
- QR code rendered from GET /api/venmo-qr?url=<encoded> (server-side SVG
via qrcode package, site colours applied)
- "I've sent payment" checkbox gates the Submit button
- Clicking Submit creates booking with payment_status='pending_confirmation',
then signs the contract — success screen shown immediately
Configuration: venmoUsername lives in config/site.json under
booking.venmoUsername — change it there to point at any Venmo account with
no code change and no rebuild.
API additions:
- GET /api/venmo-qr?url= — validates url starts with venmo.com, returns SVG
- POST /api/bookings now accepts payment_status field
Closes#7
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Frontend (step 5):
- PDF.js 3.11.174 from CDN renders the contract inline in a scrollable viewer
- Next button logic stays unlocked; signature pad is visually locked (greyed +
pointer-events:none) until user scrolls to the bottom of the contract
- HTML5 canvas signature pad with mouse and touch support; Clear button resets
- Typed full name field required to confirm identity
- Fallback agreement text renders if /api/contracts/template returns 404,
auto-marks as scrolled — photographer adds PDF later with no code change
Backend:
- GET /api/contracts/template — serves api/contracts/model-release.pdf
- POST /api/bookings/:id/sign — stamps signature image + name/date/booking ID
onto the PDF via pdf-lib, saves to api/signed-contracts/<id>.pdf, updates
contract_signed_at and contract_pdf_path in the bookings table, fires n8n
webhook; gracefully skips PDF stamping if template is missing
- submitBooking() now calls POST /api/bookings then POST /api/bookings/:id/sign
sequentially before showing the success screen
Closes#6
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- site.json: add locations array (River Bottoms, City Park, Downtown, Studio)
with heroImage, galleryImages, tags, and description per location
- public/images/locations/: directory skeleton with .gitkeep; photographer
drops hero.jpg + numbered gallery images here without any rebuild
- Step 4: location-grid renders cards from config, each with hero image,
location name, and tag pills; missing images fall back to a styled placeholder
- Clicking a card selects it (shows checkmark overlay) and opens an inline
detail panel below the grid showing gallery images + full description + tags;
clicking the same card again collapses the detail panel
- populateSummary and submitBooking now resolve the location name from config
rather than storing the raw ID
Closes#5
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- site.json: add booking section with sessionTypes, pricing, venmoUsername
- Step 2: session type cards rendered from siteConfig.booking.sessionTypes;
"Other" option reveals a free-text field; validated before advancing
- Step 3: two large length cards with duration badge + price from config;
falls back to $75/$150 defaults if config missing
- selectOption shows/hides "Other" field; stores sessionTypeOther in state
- populateSummary uses config labels and shows price in length summary row
- submitBooking sends "other: <description>" for custom session types
Closes#4
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- 7-step booking flow modal: Date → Session → Length → Location →
Contract → Payment → Confirm
- Step indicator bar with completed/active states and connector lines
- Per-step validation with inline error messages
- Option card selection pattern for steps 2, 3, 4
- Summary panel on step 7 with client contact fields
- POSTs to POST /api/bookings on final submit with success screen
- Book a Session button added to nav, hero CTA, and mobile nav
- Pricing pulled from siteConfig.booking.pricing when available
- Steps 3-6 have stub UI with comments marking which issue fills them
Closes#2
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
jhodgkin