MarinaLoop Dev Changelog

Elevated the "Just Book the Boat" experience to the top of the experience list and styled it as the flagship booking method. Added context and tags like “Most Flexible.”

Merged the private trip explainer block into the Featured Experiences section for cleaner layout and flow, reducing awkward spacing and improving UX.

Corrected an issue where `max-w-xl` was not applying as expected. Updated to `w-64` or flex container constraints for consistent button sizing.

Added a new activity via SQL: "Photo Cruise" optimized for aesthetic lighting, golden hour, and creators. Set tags and duration appropriately.

Created custom visuals for “Music & Mimosas,” “Photo Cruise,” “Island Hop,” “Sandbar Hang,” and “Morning Reset” using high-resolution AI-generated imagery.

Resolved malformed array literal in Supabase insert by updating from string to valid array format using `{tag1,tag2}`.

Resolved a critical bug where `Date.toISOString()` was throwing on modal open due to mismatched date-time inputs. Ensured full ISO strings are passed correctly.

Ensured that clicking a time slot now passes the correct date from the box instead of defaulting to today, fixing false date rendering in the modal.

Refactored the way slots are parsed and rendered in the modal, passing ISO-formatted start times directly from the calendar for seamless booking.

Refined the bottom-sheet style popover to include sunset gold borders, sticky headers, and full-width presentation for mobile UX clarity.

Eliminated the React "each child in a list should have a unique key" warning by assigning slot-specific keys in the calendar rendering loop.

Added sticky weekday headers, improved typography, and introduced spacing/borders for readability across available time blocks.

Redesigned the availability calendar to use a Dialog bottom sheet on mobile and Popover on desktop, making date selection intuitive across devices.

Integrated `public_events` into the boat availability view to visually distinguish between open slots, private reservations, and upcoming events.

Implemented backend logic to auto-generate `boat_reservations` when `public_events` or `activity_bookings` are created, preventing double bookings.

Rewrote and styled the privacy policy to align with A2P 10DLC compliance, explicitly covering consent, SMS opt-out, and data deletion rights.

Redesigned and reworded the Terms of Service with full brand styling and stronger disclaimers to limit MarinaLoop’s legal exposure.

Both Privacy and Terms pages were visually upgraded with MarinaLoop’s styling system, responsive spacing, and improved readability.

Created `public_events` table to support shared per-person boat charters and linked them to activities, boats, and marinas.

Implemented `/charter` route that displays all upcoming public events using server-side Supabase fetch for SEO benefits.

Converted event links to use SEO-friendly slugs and built `[slug]/page.tsx` with dynamic metadata rendering.

Wrote a Supabase RPC function to calculate remaining guest capacity for each public event, used for booking limits.

Added animated booking form with marine-styled theme, including input validation, toast alerts, and max guest enforcement.

After

Displayed event price per guest using `price_per_guest` from `public_events`, formatted with currency utilities.

Updated `formatTimeString` to convert event start time from military to 12-hour format for better readability.

Displayed forecast icon, temperature in Fahrenheit, and chance of rain for selected date using Open-Meteo’s daily weather API.

Before

After

Let users optionally load marine conditions (wave height, wind wave, and peak period) with a “Show Tide & Marine Conditions” button.

Reworked sunset logic to show accurate sunset time and highlight “Sunset View” slots. Sunset time now re-fetches on date change.

Resolved issues with stale or missing weather data by resetting marine and forecast states when changing dates.

Replaced “Unknown” weather description fallback with a more user-friendly “Forecast unavailable for this date.”

Streamlined the DateTimePicker UI by hiding marine details unless explicitly requested by the user, reducing visual overload.

Created a visually aligned Featured Experiences component to match Featured Boats, promoting activity-first browsing.

Added breakdowns for extra guests and extra hours, and displayed dynamic "Only $X per person!" callout for price clarity.

Improved feedback when no slots are available with styled alerts and animated input borders. Added a styled sunset badge with emoji gradients.

Centralized sunset fetching and formatting directly inside DateTimePicker to update in sync with selected date.

Created `isSunsetSlot()` utility to detect optimal sunset-aligned time slots, highlighting them in orange as suggested picks.

Refined slot styling to reduce perceived pre-selection and emphasize active state vs suggested (sunset) state.

Evaluated OpenWeatherMap, WeatherAPI, and Tomorrow.io for adding real-time weather guidance to booking flow.

Tracked down missing API key error in `experiences/[slug]/page.tsx` caused by unconfigured environment variable and enabled Mapbox API via Supabase Edge settings.

Confirmed and activated Mapbox style endpoint access to ensure tile assets load correctly in production without CORS issues.

Updated boat listing cards to use `/boats/[slug]` instead of ID-based routing, aligning with the new slug-based dynamic routing setup.

Refactored `boats/[slug]/page.tsx` to fetch data using `getBoatBySlug()` and correctly load associated activities by boat ID.

Validated consistency between filtered boat lists and detailed views, ensuring seamless routing and data hydration across pages.

Connected `useAvailableSlots` with `BookingModal` to validate time-based experiences like sunset cruises against available calendar slots.

Improved `getSunsetTime()` to fetch sunset for the selected date and subtract 1.5 hours, rounding to nearest 5 minutes for start time.

Displayed a fallback date picker if no slots matched sunset-based defaults, enabling user-controlled retries for booking.

Updated `getAvailableTimeSlotsJS` to extend the availability window up to 2 hours after sunset for sunset-based experiences.

Resolved mismatch between sunset start time and available slots by aligning ISO string comparison precision in `BookingModal.tsx`.

Prevented double booking and stale slot submissions by verifying user-selected start time is still in current slot list before proceeding.

Restructured boat detail pages to highlight available activities before showing boat info, shifting focus to user intent-driven discovery.

Created `activities` and `boat_activity_links` tables to support decoupled activity definitions with flexible many-to-many boat mapping and future location-based matching.

Populated new activity tables with seed data for party cruises, dolphin tours, and sunset rides, linked to real boats via `boat_activity_links`.

Updated activity cards with full-click booking interaction, updated styling, gallery image previews, and improved color harmony using custom design tokens.

Introduced `zod` schema to validate booking form inputs, ensuring better data hygiene and clearer feedback for end users.

Replaced legacy `boat_activities` query with dynamic join across `activities` and `boat_activity_links` for scalable activity assignment.

Resolved mismatches between `BoatActivityWithGlobal` types and legacy RPC payloads by restructuring selected activity fields and sanitizing data shapes.

Connected Stripe `CheckoutForm` with PaymentElement and `confirmPayment`, allowing users to submit payments without redirects and return a success status for booking updates.

Built `api/webhooks/bookings` to process `payment_intent.succeeded` events and update bookings with `is_paid = true` securely using Stripe signature verification.

Embedded unique booking `uuid_token` into Stripe metadata for use in the webhook handler, ensuring precise booking targeting on payment success.

Introduced Row Level Security policy on `activity_bookings` to permit updates from the webhook route for authenticated and secure writes.

Resolved silent webhook failures by syncing `STRIPE_WEBHOOK_SECRET_BOOKINGS` between Stripe CLI and production environment, ensuring signature verification passes.

Successfully confirmed that bookings are now updated as `is_paid: true` after real or test payments, completing the payment-to-database loop.

Removed redundant logic (like isActivity type guards) and restructured the state to rely purely on normalized data from the `boat_activities` table.

Integrated `min_hours` and `max_hours` fields into the booking flow to define flexible but bounded session durations.

Resolved float rounding and state reactivity issues that previously prevented users from selecting below the included hours.

Introduced reactive state updates using `useEffect` to dynamically reset duration and availability bounds when the activity or boat changes.

Replaced legacy `bookings` filtering with accurate `activity_bookings` overlap detection using composed datetime checks.

Resolved column mismatches and clarified datetime composition for the `book_activity_v2` Supabase RPC. Now fully respects duration, date, and time.

Fixed invalid date display bug by correcting the server-side datetime construction and feeding in proper ISO strings for the summary card.

Users can now book without logging in by entering their name, email, and phone number. Booking data is stored with a unique token and no auth required.

Booking confirmation, payment reminder, and session details now render directly inside the modal after submission — no redirect required.

Created bookings now include `uuid_token`, `guest_name`, `guest_email`, `guest_phone`, and `num_guests`, enabling post-booking access and communication.

Final cost, extra guest/hour charges, and per-person pricing now update live based on duration and guest count before confirmation.

Guest input fields added for full name, email, and phone. Modal now scrolls appropriately and disables background scrolling while open.

Integrated a smarter `DateTimePickerWithSlots` that dynamically generates slots based on boat availability, filters overlapping bookings, and adapts to duration.

Replaced military time with localized AM/PM format and displayed clear start-end time ranges. Selections now visually highlight the full session block.

Corrected booking end-time calculation and synced duration with slot selection. Now supports flexible multi-hour bookings.

Removed broken chain-filtering logic in favor of straightforward availability generation, unlocking stable UX for users selecting longer durations.

Reorganized booking form into structured cards for availability, guests, duration, and payment summary with better spacing and flow.

Added a friendly summary below the time picker showing start and end time clearly, improving trust and decision clarity.

Resolved issue where clicking a time slot would accidentally trigger modal close, maintaining session state as expected.

Consolidated flat-rate and per-hour booking logic into a single `BookingModal`, using conditional pricing logic based on whether an activity is selected.

Displayed base cost, extra guest and time charges, and calculated per-person rate. Logic adapts based on activity or open boat rental.

Activity cards now include a call-to-action that opens the unified booking modal with relevant activity data.

Initially split activity vs boat modals, then simplified the approach by dynamically adjusting props inside a single modal.

Fixed logic to only show extra hour charges on flat-rate activities, avoiding confusing UI on per-hour boat bookings.

Made duration editable even for flat-rate activities to allow optional time extensions and fee calculations.

Defaulted guest count based on boat or activity limits and enforced per-hour rate with UI feedback.

Captains are now shown with their name, bio, and image on the boat detail page. Includes a fallback icon if no profile photo exists.

Each boat now shows activities with duration, base price, and tiered guest/hour pricing displayed in responsive cards.

Fetched all active activities per boat and added UI section to render them with optional pricing rules.

export const getBoatActivities = async (supabase, boatId) => {
  return supabase.from('boat_activites').select('*').eq('boat_id', boatId).eq('is_active', true);
}

Outlined system to validate boat and captain availability with dual calendar logic and minimum heads-up rules.

Designed post-payment logic including instant confirmation, phone number exchange, and alerts to both captain and customer.

Architected future tables for weekly availability, custom blackouts, and slot validation using time overlap checks.

Resolved session issues by refreshing Supabase auth on reload.

Updated local form state and ensured image URLs were included in the database update payload.

Now using Supabase types via `type Boat = Database['public']['Tables']['boats']['Row']`.

Policy uses auth.uid() = boat_owner with a WITH CHECK to ensure safe updates.

USING (auth.uid() = boat_owner)
WITH CHECK (auth.uid() = boat_owner)