Sail JADA — Engineering Log

Technical work on sailjada.com and the JADA booking systems

Unifying Booking Modals Across Multi-Site Infrastructure: The SailJada Modal Consolidation

Problem Statement

SailJada's crew booking page was serving a broken, inconsistent experience compared to the sophisticated modal calendar system already built into QueenOfSanDiego.com. The crew page had inline booking widgets that didn't match brand standards, while the homepage of QueenOfSanDiego.com featured a polished modal dialog with date selection. Additionally, we discovered cross-property Google Analytics contamination: QuickDumpNow.com pages were being accessed via JADA-owned GSC properties, and several QDN subpages lacked GA tags entirely.

This post covers the modal consolidation work across 17 SailJada subpages, the infrastructure decisions behind shared asset architecture, and how we eliminated the GA ownership problem.

Technical Audit: Modal Pattern Discovery

The first step was mapping the working modal implementation on QueenOfSanDiego.com across four source files:

  • /index.html (homepage)
  • /crew/index.html
  • /captain/index.html
  • /faq/index.html

We found the modal anchor IDs were hardcoded into the DOM with unique identifiers like id="qos-modal-booking", but the JavaScript calling those modals wasn't scoped to prevent cross-page failures. The booking widget block included three interdependent pieces:

  • CSS: Modal styling, overlay, calendar grid, and button states
  • HTML: Modal structure, form inputs, QR code image references
  • JavaScript: Event listeners, Stripe.js integration, GA event tracking, date validation

Critical discovery: the QR code for Zelle payments was referenced via a relative path ./images/zelle-qr.png inside the modal HTML block, which would break on any subpage not at the root level.

Infrastructure Design: Shared Asset Strategy

Rather than duplicating the entire booking widget across 17 pages, we extracted it into a single shared JavaScript asset and deployed it via CloudFront.

Asset Creation and Placement

Created /assets/jada-modal.js in the S3 staging bucket. This file contains:

  • The modal HTML as a template string (injected into the DOM on page load)
  • All CSS as a `