> For the complete documentation index, see [llms.txt](https://docs.guestlogix.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.guestlogix.io/traveler/mobile-sdks/stripe-payment-sdk/booking-item-search/booking-item-search.md).

# Booking Item Search UI

{% tabs %}
{% tab title="iOS" %}
There is a complete flow in the UI layer of our SDK that deals with search. Like all of our flows it is designed using the Model-View-Controller architecture. To combat the problem of massive view controllers, this implementation makes heavy use of state machines and delegation. 

### Storyboard

An image of the search storyboard can be found below. The flow of information is color coded with blue arrows being information transmitted through segues and green arrows being information transmitted through delegates

![](https://1567453499-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La1LLlqdqbG_qfZs0kr%2F-LrAF-Z5qSxtPnJuKYmM%2F-LrAUyhl8MlAvCj78LEP%2FBookingFlow.svg?alt=media\&token=491f19df-5aae-4360-b9d8-08fe5972dd91)

### ViewControllers

#### BookingItemSearchViewController

This is the first view controller in the storyboard and it is the entry view controller. This controller performs as a state machine. The complete source code for this view controller can be found [here](https://github.com/Guestlogix/traveler-ios/blob/master/traveler-ios-ui/TravelerKitUI/ViewControllers/BookingItemSearchViewController.swift).

The main responsibility of this view controller is to receive the text input from the user and execute a query from that text. 

* This view controller instantiates a [`UISearchController`](https://developer.apple.com/documentation/uikit/uisearchcontroller) and conforms to the [`UISearchBarDelegate`](https://developer.apple.com/documentation/uikit/uisearchbardelegate) protocol to handle search inputs
* Once the search is executed, this controller executes a search by calling the [searchBookingItems](/traveler/mobile-sdks/stripe-payment-sdk/booking-item-search.md) method. 
* While the search is being execute it performs a segue to the loading screen so a loading spinner renders
* In the delegate methods for search, if the error function executes then this view controller will trigger a segue to the `RetryViewController`. If the success function executes then the controller will trigger a segue to the `BookingItemSearchResultViewController`
* When executing a segue to the `BookingItemSearchResultViewController`, this controller will pass the search query and the search results in the `prepare(for segue: UIStoryboardSegue, sender: Any?)` method.
* This view controller also conforms to the `RetryViewControllerDelegate` protocol which has a function that executes when the retry button is pressed. Should this function execute, then this view controller will make the search call again. 

#### BookingItemSearchResultViewController

This view controller displays the items contained in the [`BookingItemSearchResult`](https://ios.guestlogix.io/Structs/BookingItemSearchResult.html) the complete source code for this view controller can be found [here](https://github.com/Guestlogix/traveler-ios/blob/master/traveler-ios-ui/TravelerKitUI/ViewControllers/BookingItemSearchResultViewController.swift).

The main responsibility of this view controller is to display the paginated results of a text search into a collection view.

Whenever the user taps into one of the items, this view controller will trigger a segue to a [`CatalogItem`](https://ios.guestlogix.io/Protocols/CatalogItem.html) flow that will display the details of that particular item. That flow is represented as a storyboard reference in the diagram above. 

#### RetryViewController

This view controller displays an error message and a retry button that will trigger a delegate function to inform its parent view controller that a retry was requested.
{% endtab %}

{% tab title="Android" %}

{% endtab %}
{% endtabs %}

###