Full View

Gives travel advisors focused, distraction‐free control over their itinerary presentation.

In this page
Oct 25th, 2025

Default Landing State

What Advisors Always See First

This is crucial for consistency and user expectation. Every time a travel advisor enters the Preview & Share interface from the Quote Builder, they will consistently land on:

  • Full View pill tab ‐ selected and active
  • Sidebar collapsed ‐ configuration tools hidden by default
  • Full preview visible ‐ advisors see exactly what clients will see
See Design
Oct 26th, 2025

Why Sidebar Collapsed by Default?

Cross‐View Consistency

We're designing for consistency across views. In Phase 1, Traveler View is completely view‐only have nothing to configure. To create a consistent experience, we're applying the same 'preview‐first' approach to Full View.

The means:

  • All advisors see the clean itinerary first
  • Configuration is opt-in, not default
  • When advisors toggle between Full View. Invoice View and Traveler View, they experience consistent behavior
  • As we add interactivity to Traveler View in future phases, the pattern is already established

Bottom line: We're prioritizing the viewing experience as the default state, with configuration as a deliberate secondary action. This ensures advisors always evaluate the itinerary from the client's perspective first.

See Annotations
Oct 26th, 2025

Transformative Capability

The Expansion State

When the travel advisor clicks that dollar sign icon, they're crossing a threshold from passive viewing to active control. This is the moment where our platform evolves from a display tool to a configuration platform.

What Happens: When a travel advisor clicks the Price Display icon ($ symbol) on the collapsed sidebar:

  1. Visual Transformation
    • The configuration panel slides in from the left
    • The clicked icon highlights in aqua with a directional pointer
    • The Settings icon (gear) returns to default gray state
    • The preview area adapts to accommodate the configuration content panel
  2. Functional Transformation:
    • Travel Advisor transitions from viewing to configuring
    • Price display controls become immediately accessible
    • Advisor can now configure what the client sees
See Annotations
Oct 26th, 2025

Price Display Configuration

Strategic Control Over Pricing Visibility

With two independent toggles, advisors can choose to hide component card pricing (flights, hotels, excursions) or remove the entire payment summary section. This flexibility allows advisors to tailor their presentation approach—whether they want:

  • To lead with the travel experience before discussing costs
  • Present options without overwhelming clients with detailed breakdowns
  • Share itinerary details for planning purposes before finalizing pricing
View Design Specs

Action Bar Interaction

What Happens: When a travel advisor clicks either checkbox in the Price Display panel:

  1. Action bar slides up from the bottom of the configuration panel
  2. Two clear options appear: "Cancel" and "Save"
  3. Advisor must confirm their configuration choice before it takes effect
See Design
Oct 27th, 2025

Components Configuration

Visibility & Order Control

The Components configuration panel gives travel advisors precise control over which itinerary elements appear in the Full View. Advisors can selectively show or hide individual components‐flights, hotels, excursions, transfers, car rentals, and rail transport‐allowing them to curate exactly what clients see.

Presentation Toolkit

Whether simplifying a complex itinerary or focusing attention on premium experiences, advisors now have component‐level control. The drag‐and‐drop reordering capability combined with visibility toggles creates a flexible presentation toolkit that adapts to any sales approach.

Oct 27th, 2025

Visibility Interaction Flow

Granular Control Over Itinerary Elements

The Complete Workflow

Step 1: Initial State (0 Hidden)
  • Advisor opens the Components panel
  • Status badges show: "5 Visible" | "0 Hidden"
  • All seven itinerary components are visible with eye icons next to each
View Design Specs
Step 2: Hiding Components
  • Advisor clicks the eye icon next to "Flight" → icon changes to "crossed‐out eye"
  • Advisor clicks the eye icon next to "Car Rental" → icon changes to "crossed‐out eye"
  • Components remain in the list but are visually marked as hidden (grayed out text, different icon state)
  • Action bar slides up from the bottom with "Cancel" and "Save" options
View Design Specs
Step 3: Confirming Changes
  • Advisor clicks "Save" button
  • Toast notification appears: "Changes saved successfully"
  • Status badges update to: "5 Visible" | "2 Hidden"
  • Hidden components (Flight and Car Rental) remain in the list but are clearly marked as hidden
  • The itinerary preview immediately updates to exclude Flight and Car Rental componentsd
View Design Specs
Oct 27th, 2025

The Reordering Workflow

Drag‐and‐Drop Component Ordering

The Complete Workflow

Step 1: Initial State
  • Advisor opens the Components panel
  • Components are listed in their current order: Flight → Transfer → Hotel → Car Rental → Excursion → Rail Transport → Excursion
  • Each component card displays a six‐dot drag handle icon (⋮⋮) on the left side
  • The drag handle is a universal affordance signaling "I can be moved"
View Design Specs
Step 2: Initiating the Drag
  • Advisor clicks and holds the drag handle on the "Hotel" component
  • Visual feedback begins:
    • The Hotel card lifts up with a subtle shadow/elevation change
    • A move cursor icon (✥) appears next to the component
    • The card may slightly scale or change opacity to indicate it's "picked up"
    • Other components remain in place, creating visual gaps where the Hotel could be dropped
View Design Specs
Step 3: Dragging to New Position
  • Advisor drags the Hotel component upward toward the top of the list
  • Real-time visual feedback:
    • The Hotel card follows the cursor smoothly
    • Other components shift and make space as the Hotel moves past them
    • A drop zone indicator may appear (subtle line or highlighting) showing where the component will land
    • The list dynamically reflows as the drag progresses
View Design Specs
Step 4: Dropping in New Position
  • Agent releases the Hotel component at the top of the list
  • Immediate visual changes:
    • Hotel card settles into first position
    • Other components animate into their new positions (Flight moves down to second, Transfer to third, etc.)
    • The reordered list now shows: Hotel → Flight → Transfer → Car Rental → Excursion → Rail Transport → Excursion
    • Action bar slides up from the bottom with "Cancel" and "Save" options
View Design Specs
Step 5: Confirming Changes
  • Agent reviews the new order in the panel
  • Agent clicks "Save" button
  • Toast notification appears: "Changes saved successfully"
  • Hotel now appears first in the client-facing itinerary