HomeAPI ReferenceGuidesChangelogKarhoo.com

Quote List Screen

Suggest Edits

🚧

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.

11701170

Sandbox quotes returned inside the quote list screen on iOS

517517

Using the Quote List Filter feature, a user can limit results to quotes that match their requirements.

11701170

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.

11701170

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

14401440

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

21602160

Android version of the no results error

No coverage

21602160

Android version of the no coverage error

No internet connection

21602160

Android version of the no internet connection error

No results after filtering

21602160

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. see the documentation for that heresee 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([email protected]), QUOTES_INFO_REQUEST_NUMBER)

From version 1.7.0, quotes are filterable also by various criteria depending on the current quotes capabilities and features

14401440

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 about 1 month ago

What’s Next