Quote List Screen
Deprecated
The quote list as part of the Booking Screen has been deprecated with the release of ui-sdk version 1.7.0 on Android and 1.9.0 on iOS. It is now a dedicated screen with more features than ever.
Quote list input/output
The quote list takes information on pickup, drop off and date and returns a bookable quote. This is the quote the user selects from the list UI.
The quote list listens for changes in pick-up / drop-off and pick-up time and automatically fetches quotes that the user may book. The screen contains both sorting and filtering sub-screens. Selecting a given quote will navigate the user to the Checkout screen.
Sandbox quotes returned inside the quote list screen on iOS
Using the Quote List Filter feature, a user can limit results to quotes that match their requirements.
iOS UI for the filter page
Sorting can be done by pressing on the Sort by button and choosing either by Price or by ETA. Available only for ASAP rides.
iOS UI for sorting
Error handling
Incorrect or missing pick-up or drop off
If the journeyDetails is null or partially completed, the component will launch in a default state shown below
Addresses/date can now be modified directly from the quotes screen
Android version of the no pick-up / drop off error
No results for ASAP bookings
When there are simply no quotes to show for the selected pick-up and drop off
Android version of the no results error
No coverage
Android version of the no coverage error
No internet connection
Android version of the no internet connection error
No results after filtering
Android version of the no results after filtering error
iOS Sample
The Quote List Screen is created using a Coordinator pattern. Please have that in mind if you need to add some navigation features. To show the screen on your navigation stack, just pass the navigation controller in the Coordinator initialiser and call start() afterwards.
// The Quote List screen uses a Coordinator pattern. Therefore you should not push view controller directly. Althought it is possible.
let quoteListCoordinator = KarhooComponents.shared.quoteList(
navigationController: self.navigationController,
journeyDetails: details,
onQuoteSelected: { [weak self] selectedQuote in
// TODO: handle selected quote
}
)
quoteListCoordinator.start()
The quote list booking details are either updated through the address bar component or they can be manually changed by manipulating the KarhooJourneyDetailsManager publisher (formerly named KarhooBookingStatus)
KarhooJourneyDetailsManager.shared.set(pickup: LocationInfo())
KarhooJourneyDetailsManager.shared.set(destination: LocationInfo())
KarhooJourneyDetailsManager.shared.set(prebookDate: Date?)
You can use latitude and longitude to construct a LocationInfo object.
Android Sample
The QuoteList is now part of the QuotesActivity and is hosted inside the QuotesFragment.
In order to launch the QuotesActivity, just add a pick-up and a destination address on the Booking Screen and it will be launched automatically
For standalone use, the QuotesActivity can be started by building the proper intent using the Builder object defined in the QuotesActivity.kt
It supports a configuration based on three parameters:
- journeyDetails - object containing the pick-up, destination and date information
- validityTimestamp - timestamp until previously retrieved quotes need refresh
- restorePreviousData - whether it should load previously retrieved data or not
val builder = QuotesActivity.Builder()
.restorePreviousData(restorePreviousData)
.validityTimestamp(validityTimestamp)
.bookingInfo(journeyDetails)
startActivityForResult(builder.build(this@BookingActivity), QUOTES_INFO_REQUEST_NUMBER)
From version 1.7.0, quotes are filterable also by various criteria depending on the current quotes capabilities and features
When pressing on a quote, the Checkout Component will be launched
The quote list items are fully customizable. Below you can find the styles attached to the various views inside the quote recycler view and the quotes activity
<style name="KhQuotesErrorTitle">
<item name="fontWeight">600</item>
<item name="lineHeight">22dp</item>
<item name="android:textSize">@dimen/kh_uisdk_text_size_large</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">@color/kh_uisdk_text_secondary</item>
</style>
<style name="KhQuotesErrorSubtitle">
<item name="fontWeight">400</item>
<item name="android:textSize">@dimen/kh_uisdk_text_size_small_medium</item>
<item name="lineHeight">18dp</item>
<item name="android:textColor">@color/kh_uisdk_text_secondary</item>
</style>
<style name="KhQuoteListSortBottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog">
<item name="bottomSheetStyle">@style/KhQuoteListSortModalStyle</item>
</style>
<style name="KhQuoteListSortModalStyle" parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">@drawable/uisdk_view_quotes_sort_background</item>
</style>
<style name="KhQuoteListSortRadioButton" parent="Widget.AppCompat.CompoundButton.RadioButton">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">match_parent</item>
<item name="android:layout_marginTop">@dimen/kh_uisdk_margin_medium</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:gravity">center_vertical</item>
<item name="android:textSize">14sp</item>
<item name="android:textColor">@color/textColor</item>
<item name="android:button">@drawable/kh_uisdk_quote_sort_radio_button</item>
</style>
<style name="KhQuoteListSortTitle" parent="Widget.MaterialComponents.TextView">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">match_parent</item>
<item name="android:textColor">@color/textColor</item>
<item name="android:textSize">@dimen/kh_uisdk_text_size_xxlarge</item>
</style>
<style name="KhQuoteListSortCloseButton" parent="Widget.AppCompat.ImageButton">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">match_parent</item>
<item name="android:layout_marginEnd">@dimen/kh_uisdk_spacing_xxxsmall</item>
<item name="android:background">@null</item>
<item name="android:src">@drawable/kh_uisdk_ic_close_cross</item>
</style>
<style name="KhQuoteListSortByButton" parent="Widget.MaterialComponents.Button">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_weight">1</item>
<item name="android:textAllCaps">false</item>
<item name="android:background">@drawable/kh_uisdk_quote_list_sort_by_button</item>
<item name="android:textColor">@color/textColor</item>
<item name="android:textSize">@dimen/kh_uisdk_text_size_small_medium</item>
<item name="backgroundTint">@null</item>
<item name="iconGravity">textStart</item>
<item name="iconTint">@color/textColor</item>
<item name="android:padding">0dp</item>
<item name="android:minHeight">0dp</item>
<item name="android:minWidth">0dp</item>
<item name="icon">@drawable/kh_uisdk_ic_arrow_down_tailed</item>
</style>
<style name="KhQuoteListFilterButton" parent="KhQuoteListSortByButton">
<item name="icon">@drawable/kh_uisdk_ic_filters</item>
</style>
<style name="KhFilterChipShape">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">10dp</item>
</style>
<style name="KhFilterChip" parent="Widget.MaterialComponents.Chip.Choice">
<item name="chipBackgroundColor">@color/kh_uisdk_quote_list_filter_chips</item>
<item name="chipStrokeColor">@color/kh_uisdk_quote_list_filter_chips_border</item>
<item name="chipStrokeWidth">@dimen/kh_uisdk_divider_height</item>
<item name="android:layout_width">wrap_content</item>
<item name="chipIconVisible">false</item>
<item name="shapeAppearanceOverlay">@style/KhFilterChipShape</item>
<item name="chipMinTouchTargetSize">0dp</item>
</style>
<style name="KhFilterNumberedViewLabel">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">match_parent</item>
<item name="android:layout_marginStart">@dimen/kh_uisdk_spacing_semi_small</item>
<item name="android:textSize">@dimen/kh_uisdk_text_size_medium</item>
<item name="android:gravity">center_vertical</item>
<item name="android:textColor">@color/textColor</item>
</style>
<style name="KhFilterNumberedViewValue" parent="KhFilterNumberedViewLabel">
<item name="android:textAlignment">center</item>
<item name="android:layout_marginEnd">@dimen/kh_uisdk_spacing_semi_small</item>
</style>
<style name="KhFilterViewResetFilters">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textSize">@dimen/kh_uisdk_text_size_small_medium</item>
<item name="android:gravity">end</item>
<item name="android:textColor">@color/kh_uisdk_accent</item>
</style>
<style name="KhFilterViewTitle">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">match_parent</item>
<item name="android:textSize">@dimen/kh_uisdk_text_size_xxlarge</item>
<item name="android:textColor">@color/textColor</item>
<item name="android:layout_weight">0.4</item>
</style>
<style name="KhFilterViewTitleExit" parent="KhFilterViewTitle">
<item name="android:gravity">end</item>
<item name="android:layout_gravity">end</item>
<item name="android:layout_weight">2</item>
</style>
<style name="KhFilterViewCheckBox" parent="Widget.MaterialComponents.CompoundButton.CheckBox">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_marginTop">@dimen/kh_uisdk_spacing_x6small</item>
<item name="android:textSize">@dimen/kh_uisdk_text_size_small_medium</item>
<item name="android:layoutDirection">rtl</item>
<item name="android:buttonTint">@color/kh_uisdk_accent</item>
</style>
<style name="QuotesFontTextAppearance" parent="TextAppearance.AppCompat.Body1">
<item name="fontFamily">sans-serif-light</item>
<item name="android:fontFamily">sans-serif-light</item>
</style>
<style name="QuotesFontTitleTextAppearance" parent="TextAppearance.AppCompat.Body1">
<item name="fontFamily">sans-serif-medium</item>
<item name="android:textColor">@color/kh_uisdk_text_secondary</item>
<item name="android:letterSpacing">0.05</item>
<item name="android:fontFamily">sans-serif-medium</item>
</style>
<style name="QuotesItemPriceText" parent="QuotesFontTextAppearance">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:gravity">center_vertical|end</item>
<item name="android:textStyle">bold</item>
<item name="android:maxLines">1</item>
<item name="android:textColor">@color/kh_uisdk_text_primary</item>
<item name="android:textSize">@dimen/kh_uisdk_text_size_large</item>
</style>
<style name="QuotesItemFareTypeText" parent="QuotesFontTextAppearance">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:gravity">bottom|end</item>
<item name="android:textStyle">normal</item>
<item name="android:maxLines">1</item>
<item name="android:textColor">@color/kh_uisdk_text_primary</item>
<item name="android:textSize">@dimen/kh_uisdk_text_size_small</item>
</style>
<style name="khIndeterminateProgressBar" parent="Widget.AppCompat.ProgressBar.Horizontal">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">@dimen/progress_bar_height</item>
<item name="android:indeterminate">true</item>
<item name="android:layout_gravity">center</item>
<item name="android:indeterminateTint">@color/kh_uisdk_secondary</item>
</style>
Updated over 1 year ago