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.

1170 — 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.

Sorting can be done by pressing on the Sort by button and choosing either by Price or by ETA. Available only for ASAP rides.

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

1440 — 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

2160 — Android version of the no results error

No coverage

No internet connection

No results after filtering

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. see the documentation for that here

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>