Sail JADA — Engineering Log

Technical work on sailjada.com and the JADA booking systems

Multi-Domain Infrastructure Overhaul: Booking Automation, Payment Integration, and Secure Admin Dashboards

What Was Done

This session involved a comprehensive infrastructure and application update spanning three distinct domains under the queenofsandiego.com umbrella: the main booking site, an operational tools dashboard (ops), a HELM navigation system, and a new private P&L calculator requiring authentication. The work included fixing broken UI components on the public site, integrating payment QR codes, implementing booking automation via Google Apps Script, and provisioning a new CloudFront-backed private S3 bucket with HTTP Basic Auth protection.

Homepage UI Fixes and Payment Integration

The primary site at /Users/cb/Documents/repos/sites/queenofsandiego.com/index.html had accumulated several issues:

  • A broken Google Maps iframe embed that rendered blank
  • Missing direct booking duration options (2-hour and 3-hour quicklinks) in the hero CTA
  • Incorrect file references (zelle-qr.jpg vs actual zelle-qr.jpeg)
  • Incomplete payment method display

Rather than relying on a single embedded map, the solution replaced the broken iframe with a QR code payment panel displaying three payment options: Stripe (for card payments), Zelle (bank transfer), and Venmo. This approach:

  • Eliminates the Google Maps API dependency
  • Provides direct payment pathways without additional clicks
  • Reduces page complexity and improves performance
  • Uses static assets (QR code images) rather than dynamic embeds

The booking modal (jadaOpenBook() function) was updated to accept a duration parameter, allowing the hero section buttons to pass either 2 or 3 hours directly:

// Before: jadaOpenBook() with no parameters
// After: jadaOpenBook(120) or jadaOpenBook(180) for 2hr/3hr bookings

The Reserve button in the navigation was wired to open the booking modal with a date picker interface, improving navigation consistency across the site.

Google Apps Script Booking Automation

The file /Users/cb/Documents/repos/sites/queenofsandiego.com/BookingAutomation.gs was extended with new calendar integration logic. The existing CalendarSync system was enhanced to expose a booked_dates endpoint that returns iCal-formatted busy times from the JADA calendar.

Key architectural decision: Rather than storing booking state in a separate database, the system treats Google Calendar as the source of truth. The GAS web app deployment was updated (via clasp push) to include this endpoint, allowing the frontend to query available slots without maintaining duplicate state.

Commands used for deployment:

clasp push  # Deploy BookingAutomation.gs changes
clasp deployments list  # Verify deployment ID

The script ID is stored in the clasp config within the project root, and the web app URL is injected into index.html as a data attribute for frontend fetch calls.

Private Admin Dashboard Infrastructure

A new subdomain pnl.queenofsandiego.com was created to serve a private P&L (Profit & Loss) calculator requiring authentication. This required a multi-step AWS infrastructure setup:

S3 and CloudFront Setup

A private S3 bucket was created (exact name withheld) to host the P&L HTML file as index.html. The bucket was configured for object ownership and versioning, but NOT for static website hosting. Instead, access is exclusively through CloudFront, which provides:

  • HTTPS termination with ACM certificate
  • Origin Access Control (OAC) for secure bucket communication
  • CloudFront Functions for request/response manipulation
  • Cache invalidation capabilities

An Origin Access Control (OAC) was created for the pnl bucket, and the bucket policy was updated to deny all S3 public access while allowing only the CloudFront OAC principal:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Deny",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::BUCKET_NAME/*"
    },
    {
      "Effect": "Allow",
      "Principal": {
        "Service": "cloudfront.amazonaws.com"
      },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::BUCKET_NAME/*",
      "Condition": {
        "StringEquals": {
          "AWS:SourceArn": "arn:aws:cloudfront::ACCOUNT_ID:distribution/DIST_ID"
        }
      }
    }
  ]
}

ACM and Route 53 Configuration

An ACM certificate was requested for pnl.queenofsandiego.com. AWS ACM provides automatic renewal and is free for CloudFront use. The certificate was validated via DNS CNAME entry added to Route 53 (the authoritative nameserver for queenofsandiego.com):

# Route 53 change batch (conceptual)
Name: _VALIDATION_STRING.pnl.queenofsandiego.com
Type: CNAME
Value: _ACM_VALIDATION_TARGET.acm-validations.aws.

# After validation, add alias records
Name: pnl.queenofsandiego.com
Type: A (IPv4) and AAAA (IPv6)
Alias Target: CloudFront distribution domain

HTTP Basic Authentication via CloudFront Functions

Rather than implementing auth in the application layer, HTTP Basic Auth was implemented at the edge using CloudFront Functions. The credentials are base64-encoded and checked before forwarding requests to the origin:

# Generate credentials
echo -n "username:password" | base64
# Output: dXNlcm5hbWU6cGFzc3dvcmQ=

A CloudFront Function at /tmp/ops-basic-auth.js validates the Authorization header:

function handler(request) {
  const authHeader = request.headers.authorization;
  const expectedAuth = "Basic " + EXPECTED_BASE64_CREDS;
  
  if (!authHeader || authHeader.value !== expectedAuth) {
    return {
      statusCode: 401,
      headers: {
        "www-authenticate": { value: "Basic" }
      }
    };
  }
  return request;
}

This function is deployed to the LIVE stage and attached as a viewer request behavior for all paths under pnl.queenofsandiego.com.

Ops and HELM Dashboard Updates

The existing ops and HELM navigation systems were updated to include links to the new P&L calculator. The ops site index was modified to add P&L under the Financial/Ledger section:

// In /tmp/helm-index.html
ROOT_NODES: [
  // ... existing nodes ...
  {
    name: "pnl",
    label: "P&L Calculator",
    href: "https://pnl.queenofsandiego.com",
    category: "financial"
  }
]

Both ops and helm CloudFront distributions were invalidated to clear cached versions:

aws cloud