Queen of San Diego — Tech Blog

Under the hood at queenofsandiego.com

Rebuilding the Queen of San Diego Booking Platform: Multi-Service Payment Integration & CloudFront Distribution Strategy

Overview: The Problem

The Queen of San Diego website was serving broken styling and non-functional booking experiences. The session involved multiple coordinated infrastructure changes: fixing the homepage UI, integrating three payment methods (Stripe, Zelle, Venmo), wiring direct booking shortcuts, deploying a private P&L calculator behind basic auth, and reorganizing operational dashboards across CloudFront distributions.

What Was Done

  • Fixed malformed HTML/CSS in /Users/cb/Documents/repos/sites/queenofsandiego.com/index.html (removed orphaned closing </style> tag at line 3090)
  • Replaced broken Google Maps iframe with a payment QR code panel supporting three payment methods
  • Enhanced booking modal with duration selection (2hr/3hr options) and corrected asset filename references (zelle-qr.jpeg)
  • Deployed P&L calculator to private subdomain pnl.queenofsandiego.com with CloudFront basic auth
  • Reorganized ops/HELM dashboards with updated financial tool hierarchy
  • Provisioned new CloudFront distribution and S3 infrastructure for P&L service

Technical Details: Homepage Fixes

HTML/CSS Repair

The initial rendering failure stemmed from a malformed style block. A closing </style> tag existed at line 3090 without a corresponding opening tag, causing CSS cascade breaks. The solution involved:

  • Identifying all opening <style> tags in the document
  • Verifying closing tag pairs matched opening tags
  • Removing the orphaned closing tag
  • Testing HTTP response against CloudFront to confirm delivery of corrected HTML

Payment Integration Pattern

The original broken Google Maps embed was replaced with a multi-payment QR panel. This decision prioritized user conversion by presenting payment options directly on the homepage rather than forcing navigation to external booking systems. The implementation uses three parallel payment channels:

Payment Method | QR Code Asset | Fallback Link
Stripe         | stripe-qr.jpg | Hosted payment link
Zelle          | zelle-qr.jpeg | Bank transfer details
Venmo          | venmo-qr.jpg  | Venmo handle

The correction from zelle-qr.jpg to zelle-qr.jpeg was necessary because the actual asset filename used the .jpeg extension. This demonstrates why asset inventory and deployment verification matter—file references must match server-side reality.

Booking Modal Enhancement

The jadaOpenBook() function in index.html was modified to accept a duration parameter, enabling direct 2-hour and 3-hour booking shortcuts from the hero CTA. The modal now:

  • Accepts duration as an optional parameter: jadaOpenBook(120) for 2 hours, jadaOpenBook(180) for 3 hours
  • Pre-populates duration selection in the booking interface
  • Maintains backwards compatibility with parameterless calls

The Reserve button in the navigation was updated to trigger the date picker directly, reducing friction for returning users.

Infrastructure: Private P&L Calculator Deployment

Multi-Stage Provisioning

Deploying a password-protected financial dashboard required orchestrating multiple AWS services:

  1. S3 Bucket Creation: Private bucket (no public access) at queenofsandiego-pnl to store the P&L calculator HTML
  2. ACM Certificate: Requested for pnl.queenofsandiego.com with DNS validation via Route 53 CNAME records
  3. CloudFront Function: Deployed to LIVE stage with base64-encoded basic auth credentials to gate all requests
  4. Origin Access Control (OAC): Created to restrict S3 access exclusively to CloudFront, eliminating direct bucket URL access
  5. CloudFront Distribution: Created with the P&L bucket as origin, restricted to HTTPS-only
  6. Route 53 DNS: Added A and AAAA alias records pointing to CloudFront distribution domain
  7. Bucket Policy: Modified to deny all access except from the CloudFront OAC

Basic Auth Implementation

Rather than managing auth within the application, basic auth was implemented at the CloudFront edge. This approach:

  • Protects all static assets without application changes
  • Executes at the CDN edge, minimizing latency
  • Uses CloudFront Functions (not Lambdas) for sub-millisecond execution
  • Credentials stored in repos.env (never in source control)

The function validates incoming Authorization headers and returns 401 Unauthorized if missing or invalid before any S3 request occurs.

Google Apps Script Modifications

The booking automation backend required additions to support date availability queries. The BookingAutomation.gs file was extended with:

  • A booked_dates endpoint returning iCalendar format dates from the JADA calendar system
  • CalendarApp integration to fetch event data from the configured calendar ID (stored in project secrets)
  • Integration with the live Google Apps Script web app deployment

Changes were deployed via clasp push and the deployment ID was updated to expose the new endpoint at the web app URL.

Operational Dashboard Reorganization

The ops and HELM dashboards were restructured to reflect current tool hierarchy. Changes included:

  • Downloading current index.html files from ops and HELM S3 buckets
  • Locating the ROOT_NODES array in HELM configuration
  • Adding the P&L calculator as a financial/ledger node within the tool structure
  • Uploading updated indices back to S3
  • Invalidating CloudFront cache distributions to force edge refresh

Deployment Verification

After infrastructure provisioning, validation steps included:

// Test unauthorized access (should return 401)
curl -v https://pnl.queenofsandiego.com/

// Test authorized access (should return 200)
curl -v -H "Authorization: Basic [base64_credentials]" \
  https://pnl.queenofsandiego.com/

// Verify CloudFront distribution is DEPLOYED (not InProgress)
aws cloudfront list-distributions --query \
  "DistributionList.Items[?Aliases.Items[0]=='pnl.queenofsandiego.com']"

All three verification steps passed, confirming the P&L calculator was accessible only to authenticated users and properly cached at CloudFront edge locations.

Key Architectural Decisions

  • Multi-Payment QR