Making Reservations

Overview

AndanDo provides a streamlined, multi-step reservation process that guides you from tour discovery to confirmed booking. This guide covers the entire booking workflow, payment options, and what to expect after completing your reservation.

Starting a Reservation

Browse and Select

Navigate to /marketplace or use /search to find tours. Click any tour card to view details at /tours/details/{TourId}.

Review Tour Details

The tour details page (TourDetails.razor) displays:

High-resolution image gallery with lightbox
Complete tour information (duration, location, capacity)
Owner/provider details with ratings
Available ticket types and pricing
Customer reviews

Open Booking Panel

On desktop, the booking card is sticky on the right side. On mobile, tap the floating CTA button to reveal the booking panel.

The booking interface is responsive: desktop users see a sticky sidebar (booking-sticky), while mobile users access a slide-up panel (mobile-booking-panel).

Ticket Selection

Understanding Ticket Types

Tours can offer multiple ticket types with different pricing:

Standard Tickets

Regular admission with base pricing

VIP/Premium

Enhanced experiences with additional amenities

Group Rates

Discounted pricing for larger parties

Date-Specific

Tickets available only for certain dates or times

Ticket Status Indicators

Tickets may display status badges:

Próximamente (Upcoming)

Tickets not yet on sale. Displayed when VentaInicioUtc is in the future:

var isUpcoming = ticket.VentaInicioUtc.HasValue && 
                 ticket.VentaInicioUtc.Value > DateTime.UtcNow;

These tickets are disabled and cannot be selected.

Agotado (Sold Out)

Tickets that have reached capacity. Selection is disabled.

Disponible (Available)

Active tickets within their sale period. Ready for purchase.

Selecting Quantities

For each available ticket type:

Click the minus/plus buttons to adjust quantity
Quantity spinners show when processing changes
Price updates automatically in the summary panel
Maximum capacity is enforced per ticket type

The ticket selection interface uses real-time validation to prevent over-booking and enforces minimum/maximum order quantities.

Clicking “Reservar Ahora” opens the premium reservation modal (rmodal), which uses a 4-step wizard:

Step 1: Booking Information

Tour Summary

Review selected tickets and quantities in the sticky right-side summary card:

<div class="rmodal__summary-card">
    <div class="rmodal__summary-card__label">Resumen de Reserva</div>
    @foreach (var item in SelectedTickets)
    {
        <div class="rmodal__summary-row">
            <span>@item.Name <span class="rmodal__qty">×@item.Qty</span></span>
            <span>@FormatPrice(item.Total)</span>
        </div>
    }
</div>

Contact Information

Fill in required fields:

Nombre completo (Full name with person icon)
Correo electrónico (Email with envelope icon)
Teléfono (Phone with phone icon)
Comentarios (Optional notes in textarea)

All inputs feature focus states with orange accent color (#eb662b).

Currency Conversion

Select your preferred currency from the dropdown:

DOP (Dominican Peso) - default
USD (US Dollar)
EUR (Euro)

The converted price displays below in real-time using CurrencyConversionService.

If you’re logged in, your contact information may be pre-filled from your profile using the UserSession service.

Step 2: Review Order

Confirm your reservation details:

Order list showing all selected tickets with quantities
Optional extras with descriptions and pricing
Total amount prominently displayed in a gradient card
Service fee note (if applicable)

<div class="rmodal__order-total">
    <span>Total</span>
    <span>@FormatDop(CalculateTotal())</span>
</div>

Step 3: Payment Method Selection

Choose how you’d like to pay:

Pago Completo

Pay the full amount upfront

50% Inicial

Pay 50% now, remainder later

Reserva (10%)

Secure with 10% deposit

The selected payment card highlights with:

Orange gradient background
Animated checkmark icon
Box shadow for emphasis

.rmodal__pay-card.-active {
    border-color: #eb662b;
    background: linear-gradient(135deg, #fff4ef, #fffaf7);
    box-shadow: 0 4px 16px rgba(235,102,43,.12);
}

Step 4: Payment & Confirmation

The final step shows:

Payment Amount

Large display of the amount due now in a dark gradient callout:

<div class="rmodal__pay-callout">
    <div class="rmodal__pay-callout__label">Monto a Pagar Ahora</div>
    <div class="rmodal__pay-callout__amount">@FormatDop(AmountDue)</div>
</div>

Pending Balance

If using partial payment, remaining balance and due date are shown.

Confirm Reservation

Click “Confirmar Reserva” to process the booking. A spinner indicates processing.

Reservation Timer

When the modal is open, a floating timer pill appears in the bottom-right corner:

The timer gives you a limited time to complete your reservation. This ensures ticket availability for other users.

Timer features:

Countdown display (e.g., “4:32 remaining”)
Progress bar showing time remaining visually
Urgent state when under 1 minute (red background with pulse animation)
Auto-close when time expires

.rmodal__timer-pill.-urgent {
    background: rgba(185, 28, 28, 0.92);
    animation: timerPulse 0.85s ease-in-out infinite;
}

If your timer expires, simply start a new reservation. Your ticket selection won’t be saved.

Success Confirmation

After successful booking, you’ll see:

Success Animation

Animated checkmark icon in an orange gradient circle with pulse effect:

@keyframes rmodalPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(235,102,43,.3); }
    50%       { box-shadow: 0 0 0 12px rgba(235,102,43,0); }
}

Reservation Summary Card

Displays:

Confirmation number
Tour name
Reservation date
Amount paid (highlighted in orange)
Payment status

Email Confirmation

A confirmation email is sent to your registered address using IEmailService.

Next Actions

Options to:

Close modal and return to tour details
View your reservations
Browse more tours

Tour Details Features

The tour details page offers several interactive features:

Image Gallery

Click any tour image to open the fullscreen lightbox:

Navigation arrows to browse images
Counter showing current image number
Close button (X) in top-right
Keyboard support for Esc and arrow keys

.tour-lightbox-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
}

Location Map

Integrated Google Maps showing:

Tour starting location with marker
“Cómo llegar” button to open directions in Google Maps
Map type controls for satellite/street view

Route Modal

Share button with popover menu for:

Copy link to clipboard
WhatsApp share
Facebook share
Twitter share

<div class="share-menu__popover">
    <button class="share-menu__item share-menu__item--button" @onclick="CopyLink">
        <i class="icon-copy"></i> Copiar enlace
    </button>
    <a class="share-menu__item" href="@WhatsAppShareUrl" target="_blank">
        <i class="icon-whatsapp"></i> WhatsApp
    </a>
</div>

Mobile Booking Flow

On screens under 992px, the booking experience adapts:

Floating CTA Button

A sticky button appears at the bottom of the screen:

.mobile-booking-cta {
    position: fixed;
    bottom: 18px;
    background: #0c0c3d;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

Slide-Up Panel

Tapping the CTA reveals a bottom sheet with ticket selection and booking controls.

Backdrop Overlay

Semi-transparent overlay prevents interaction with page content while panel is open.

Payment Processing

While the UI shows the payment flow, actual payment gateway integration depends on your AndanDo configuration. The reservation system supports:

Multiple currencies via ICurrencyConversionService
Partial payment plans (full, 50%, 10%)
Payment tracking in the database
Email notifications for confirmations and reminders

Always verify the final amount before confirming. Currency conversions use live exchange rates and may fluctuate.

Tour Availability

Upcoming Tours

Tours marked as “Próximamente” (IsUpcoming = true):

Display placeholder instead of image
Show availability date
Disable booking until start date
Cannot be clicked for details

Logic from Marketplace.razor:974:

var isUpcoming = !muestra && start.HasValue && start.Value > now;

Visibility Window

Tours only appear if:

Current date is before EndDate (if set)
Either MuestraInstantanea is true, OR current date is within 3 days of StartDate
Status is not “I” (inactive)

Owner Information

Each tour details page displays the tour provider:

Owner Profile

Avatar, name, and “Tour Provider” subtitle

Rating Chip

Aggregate rating from all the owner’s tours with review count

Owner ratings are calculated by IReviewService.GetOwnerRatingAsync():

public async Task<(double? AvgRating, int RatingCount)> GetOwnerRatingAsync(
    int ownerUserId,
    CancellationToken cancellationToken = default)

Get Started

Core Features

User Guides

Making Reservations

Overview

Starting a Reservation

Ticket Selection

Understanding Ticket Types

Standard Tickets

VIP/Premium

Group Rates

Date-Specific

Ticket Status Indicators

Selecting Quantities

Step 1: Booking Information

Step 2: Review Order

Step 3: Payment Method Selection

Pago Completo

50% Inicial

Reserva (10%)

Step 4: Payment & Confirmation

Reservation Timer

Success Confirmation

Tour Details Features

Image Gallery

Location Map

Mobile Booking Flow

Payment Processing

Tour Availability

Upcoming Tours

Visibility Window

Owner Information

Owner Profile

Rating Chip

Next Steps

Browsing Tours

Reviews & Likes

Build docs developers (and LLMs) love

Get Started

Core Features

User Guides

​Overview

​Starting a Reservation

​Ticket Selection

​Understanding Ticket Types

Standard Tickets

VIP/Premium

Group Rates

Date-Specific

​Ticket Status Indicators

​Selecting Quantities

​The Reservation Modal

​Step 1: Booking Information

​Step 2: Review Order

​Step 3: Payment Method Selection

Pago Completo

50% Inicial

Reserva (10%)

​Step 4: Payment & Confirmation

​Reservation Timer

​Success Confirmation

​Tour Details Features

​Image Gallery

​Location Map

​Share Tour

​Mobile Booking Flow

​Payment Processing

​Tour Availability

​Upcoming Tours

​Visibility Window

​Owner Information

Owner Profile

Rating Chip

​Next Steps

Browsing Tours

Reviews & Likes

Build docs developers (and LLMs) love

Overview

Starting a Reservation

Ticket Selection

Understanding Ticket Types

Ticket Status Indicators

Selecting Quantities

The Reservation Modal

Step 1: Booking Information

Step 2: Review Order

Step 3: Payment Method Selection

Step 4: Payment & Confirmation

Reservation Timer

Success Confirmation

Tour Details Features

Image Gallery

Location Map

Share Tour

Mobile Booking Flow

Payment Processing

Tour Availability

Upcoming Tours

Visibility Window

Owner Information

Next Steps