Building the AmendBookingOption Page at Viator

Timeline: Jun 2025 – Jul 2025

When travellers book experiences on Viator, they sometimes need to make changes afterwards—whether it’s updating the date, adjusting group size, or picking a new start time. To make that process seamless, I implemented the AmendBookingOption.tsx page in Viator’s production app.

What the Page Does

The Amend Booking Option page gives travellers a clear, interactive way to:

• View available amendment options based on their current booking.

• Select new times or options using a responsive React interface.

• See live price breakdowns (per traveller, per group, or discounted rates).

• Continue with their choice only when it’s valid and different from their existing booking.

This contributes to a smoother self-service flow, reducing support requests and improving customer satisfaction.

Technical Approach

Frontend (React + TypeScript)

• Built with React functional components and TypeScript types for safety and clarity.

• Used hooks (useState, useEffect, and custom hooks from the internal framework) to manage state, handle selections, and trigger GraphQL queries.

• Implemented responsive design with desktop and mobile layouts, ensuring consistent user experience.

• Added collapsible sections to keep the UI clean while still displaying descriptions and start time selectors.

• Used Viator’s design system components (Button, RadioButton, PriceCalendar, CollapsibleContent, etc.) for consistency.

API Integration

• Connected to GraphQL APIs to fetch booking options dynamically (useAmendBookingOptionsForDateSuspenseQuery).

• Integrated with Java Spring Boot microservices on the backend, which provide traveller eligibility, pricing data, and booking updates.

• Ensured real-time updates: when a user changes the date, the page re-queries GraphQL to fetch valid new options.

State & Validation Logic

• Maintained selected option and time via React state (selectedOption, selectedTime).

• Enabled the Continue button only when:

  • a valid option and start time are selected,

  • the choice differs from the current booking,

  • and loading is complete.

• This avoided unnecessary submissions and reduced errors.

Key Challenges

• Designing logic to differentiate current vs. new booking selections.

• Implementing “Show more” functionality for long option lists without overwhelming the user.

• Handling desktop vs. mobile differences in how pricing information and UI elements are displayed.

• Ensuring the page was fully accessible (a11y), including keyboard navigation and screen reader labels.

Impact

• Millions of Viator customers can now self-manage booking changes more easily.

• Reduced friction in the booking lifecycle and lowered dependency on customer support.

• Delivered a production-ready feature as part of Viator’s core platform.