@wayke-se/components-react 5.2.0 → 6.0.0-beta.0

package/README.md

@@ -2,6 +2,8 @@
 
 Vehicle search and vehicle pages from Wayke, ready to add to a dealer or partner website. Visitors can search and filter the vehicles, open a vehicle, contact the dealer and buy the vehicle online.
 
+Upgrading from 5.x? See [Migrating from 5.x to 6.0](#migrating-from-5x-to-60).
+
 ## Quick start
 
 Add this where the vehicles should be shown, for example in an HTML block in your CMS, such as WordPress:
@@ -9,16 +11,9 @@ Add this where the vehicles should be shown, for example in an HTML block in you
 ```html
 <div id="wayke"></div>
 <script type="module">
-  import { mount } from 'https://cdn.wayke.se/public-assets/wayke-components-react/5.2.0/index.js';
-
-  mount('#wayke', {
-    provider: {
-      graphQlUrl: 'https://gql.wayke.se/query',
-      url: 'https://api.wayke.se/vehicles',
-      urlMlt: 'https://api.wayke.se/vehicles-mlt-ext',
-      ecomSettings: { url: 'https://ecom.wayke.se' },
-    },
-  });
+  import { mount } from 'https://cdn.wayke.se/public-assets/wayke-components-react/6.0.0/index.js';
+
+  mount('#wayke');
 </script>
 ```
 
@@ -37,6 +32,7 @@ That is all you need on most sites. The rest of this page covers other ways to a
 * [Routing](#routing)
 * [Events](#events)
 * [Reference](#reference)
+* [Migrating from 5.x to 6.0](#migrating-from-5x-to-60)
 
 ## Add to your site
 
@@ -48,7 +44,7 @@ That is all you need on most sites. The rest of this page covers other ways to a
 
 ### CDN
 
-Every release from `5.2.0` is published to the Wayke CDN with everything included: React, the styles and the buy online flow. Nothing needs to be installed.
+Every release is published to the Wayke CDN with everything included: React, the styles and the buy online flow. Nothing needs to be installed.
 
 ```
 https://cdn.wayke.se/public-assets/wayke-components-react/<version>/index.js
@@ -64,16 +60,11 @@ There are two ways to load the script. They show the same thing and take the sam
 
 ```html
 <div id="wayke"></div>
-<script type="module" src="https://cdn.wayke.se/public-assets/wayke-components-react/5.2.0/index.js"></script>
+<script type="module" src="https://cdn.wayke.se/public-assets/wayke-components-react/6.0.0/index.js"></script>
 <script>
   window.addEventListener('DOMContentLoaded', () => {
     WaykeComponents.mount('#wayke', {
-      provider: {
-        graphQlUrl: 'https://gql.wayke.se/query',
-        url: 'https://api.wayke.se/vehicles',
-        urlMlt: 'https://api.wayke.se/vehicles-mlt-ext',
-        ecomSettings: { url: 'https://ecom.wayke.se' },
-      },
+      provider: { ecomSettings: {} },
     });
   });
 </script>
@@ -81,14 +72,14 @@ There are two ways to load the script. They show the same thing and take the sam
 
 #### Functions
 
-| Function      | Settings                                  | Shows                                     |
-|---------------|-------------------------------------------|-------------------------------------------|
-| `mount`       | `{ provider, composite? }`                | Search, and the vehicle page when a vehicle is opened ([WaykeComposite](#waykecomposite)) |
-| `mountSearch` | `{ provider, search? }`                   | Only the search ([WaykeSearch](#waykesearch)) |
-| `mountItem`   | `{ provider, item }`                      | Only one vehicle page, `item.id` is required ([WaykeSearchItem](#waykesearchitem)) |
+| Function      | Settings                       | Shows                                     |
+|---------------|--------------------------------|-------------------------------------------|
+| `mount`       | `{ provider?, composite? }`    | Search, and the vehicle page when a vehicle is opened ([WaykeComposite](#waykecomposite)) |
+| `mountSearch` | `{ provider?, search? }`       | Only the search ([WaykeSearch](#waykesearch)) |
+| `mountItem`   | `{ provider?, item }`          | Only one vehicle page, `item.id` is required ([WaykeSearchItem](#waykesearchitem)) |
 
 * The first argument is a CSS selector, such as `'#wayke'`, or an element.
-* `provider` is [WaykeProviderSettings](#waykeprovidersettings) (for `mountItem`: [WaykeItemProviderSettings](#waykeitemprovidersettings)).
+* `provider` is [WaykeProviderSettings](#waykeprovidersettings), the same for all three.
 * Each function returns `{ unmount }`, which removes the components again.
 * `WaykePubSub` is exported too, and is available as `WaykeComponents.WaykePubSub` in option B. See [Events](#events).
 
@@ -99,13 +90,13 @@ The script adds its stylesheet, `index.css` in the same folder, to the top of `<
 To load the stylesheet yourself, add a `<link>` to it with the same URL. The script finds it and does not add it again. This works with both options.
 
 ```html
-<link rel="stylesheet" href="https://cdn.wayke.se/public-assets/wayke-components-react/5.2.0/index.css">
+<link rel="stylesheet" href="https://cdn.wayke.se/public-assets/wayke-components-react/6.0.0/index.css">
 ```
 
 To not load the stylesheet at all, add `disablecssinjection` to the script tag in option B. The image carousel, the 360 viewer and buy online are then unstyled.
 
 ```html
-<script type="module" src="https://cdn.wayke.se/public-assets/wayke-components-react/5.2.0/index.js" disablecssinjection></script>
+<script type="module" src="https://cdn.wayke.se/public-assets/wayke-components-react/6.0.0/index.js" disablecssinjection></script>
 ```
 
 ### React
@@ -124,10 +115,7 @@ import '@wayke-se/components-react/dist/assets/default.css';
 import '@wayke-se/ecom-web/dist/index.css'; // Only with ecomSettings
 
 const ProviderSettings: WaykeProviderSettings = {
-  graphQlUrl: 'https://gql.wayke.se/query',
-  url: 'https://api.wayke.se/vehicles',
-  urlMlt: 'https://api.wayke.se/vehicles-mlt-ext',
-  ecomSettings: { url: 'https://ecom.wayke.se' },
+  ecomSettings: {},
 };
 
 const App = () => <WaykeComposite provider={ProviderSettings} />;
@@ -160,12 +148,7 @@ import '@wayke-se/ecom-web/dist/index.css'; // Only with ecomSettings
 
 createRoot(document.getElementById('wayke')).render(
   createElement(WaykeComposite, {
-    provider: {
-      graphQlUrl: 'https://gql.wayke.se/query',
-      url: 'https://api.wayke.se/vehicles',
-      urlMlt: 'https://api.wayke.se/vehicles-mlt-ext',
-      ecomSettings: { url: 'https://ecom.wayke.se' },
-    },
+    provider: { ecomSettings: {} },
   })
 );
 ```
@@ -174,14 +157,18 @@ createRoot(document.getElementById('wayke')).render(
 
 ## Environments
 
-The examples on this page use production. Use test while you develop, to work with test data.
+The components use production by default. Set `environment: 'test'` while you develop, to work with test data:
 
-| Setting            | Test                                        | Production                              |
-|--------------------|---------------------------------------------|-----------------------------------------|
-| `graphQlUrl`       | `https://gql.wayketech.se/query`            | `https://gql.wayke.se/query`            |
-| `url`              | `https://api.wayketech.se/vehicles`         | `https://api.wayke.se/vehicles`         |
-| `urlMlt`           | `https://api.wayketech.se/vehicles-mlt-ext` | `https://api.wayke.se/vehicles-mlt-ext` |
-| `ecomSettings.url` | `https://ecom.wayketech.se`                 | `https://ecom.wayke.se`                 |
+```javascript
+mount('#wayke', {
+  provider: { environment: 'test' },
+});
+```
+
+| `environment`          | Vehicles and loans                          | Leads                           | Buy online                  |
+|------------------------|---------------------------------------------|---------------------------------|-----------------------------|
+| `production` (default) | `https://public-api.wayke.com/graphql`      | `https://api.wayke.se/lead`     | `https://ecom.wayke.se`     |
+| `test`                 | `https://public-test-api.wayke.com/graphql` | `https://api.wayketech.se/lead` | `https://ecom.wayketech.se` |
 
 Each environment shows the vehicles of the domain the request comes from, so the domain has to be registered in that environment. To develop on `localhost` or a staging domain, have it registered in test. Instead of the domain, a site can be identified with `apiKey`, see [WaykeProviderSettings](#waykeprovidersettings).
 
@@ -278,9 +265,9 @@ composite: {
 
 | type          | Button                | Default style | Shown when                                         |
 |---------------|-----------------------|---------------|----------------------------------------------------|
-| `ecom`        | Buy online            | primary       | `ecomSettings` is set and the vehicle can be bought online |
-| `leadMessage` | Send message (form)   | primary       | The vehicle belongs to a branch                    |
-| `leadCallMe`  | Get a callback (form) | primary       | The vehicle belongs to a branch                    |
+| `ecom`        | Buy online            | primary       | `ecomSettings` is set and the dealer sells the vehicle online |
+| `leadMessage` | Send message (form)   | primary       | Always                                             |
+| `leadCallMe`  | Get a callback (form) | primary       | Always                                             |
 | `email`       | Show email address    | secondary     | The branch or contact has an email address         |
 | `phone`       | Show phone number     | secondary     | The branch or contact has a phone number           |
 
@@ -308,7 +295,7 @@ Both can be changed, as a text or a function of the vehicle. The vehicle has `id
 
 ### Filters
 
-Choose which filters are shown, in the order they are listed. `displayName` changes the title of a filter. See [SearchFilterTypes](#searchfiltertypes) for all filters.
+Choose which filters are shown, in the order they are listed. `displayName` changes the title of a filter. See [SearchFilterTypes](#searchfiltertypes) for all filters. A filter with nothing to pick, such as business leasing on a site without leasing cars, is left out.
 
 ```javascript
 composite: {
@@ -319,7 +306,7 @@ composite: {
 }
 ```
 
-To set the filters that are applied when the search loads, use `initialQueryParams`. See [WaykeSearch](#waykesearch) for the available parameters.
+To set the filters that are applied when the search loads, use `initialQueryParams`. It takes the same parameters as the url, see [Search parameters](#search-parameters).
 
 ```javascript
 const initialQueryParams = new URLSearchParams();
@@ -332,16 +319,18 @@ composite: {
 }
 ```
 
+The search field suggests makes and models while the visitor types. Picking one, or typing one exactly, such as "volvo v60", filters on it instead of searching the text.
+
 ### Language
 
-The components are in Swedish by default. For Norwegian, set `marketCode: 'NO'` in `composite`.
+The components are in Swedish by default. For Norwegian, set `marketCode: 'NO'` in `provider`.
 
-* The mileage filter is shown in Swedish miles (`mileage`, 1 mil = 10 km) in Swedish, and in kilometers (`odometerValueAsKm`) in Norwegian, unless `filterList` is set.
-* The language is set once, by the first component that is shown.
+* The mileage filter is in Swedish miles (1 mil = 10 km) in Swedish, and in kilometers in Norwegian.
+* The language is set once, by the first provider that is shown.
 
 ### Search or vehicle page only
 
-To show only the search or only one vehicle page, use `mountSearch` or `mountItem` on the CDN, see [Functions](#functions). In React, use the component with its provider. Place the provider close to the root of your app, so that its cache is kept.
+To show only the search or only one vehicle page, use `mountSearch` or `mountItem` on the CDN, see [Functions](#functions). In React, use the component with `WaykeProvider`. Place the provider close to the root of your app, so that its cache is kept.
 
 Search only:
 
@@ -350,50 +339,79 @@ import React from 'react';
 import { WaykeProvider, WaykeSearch } from '@wayke-se/components-react';
 
 const App = () => (
-  <WaykeProvider {...ProviderSettings}>
-    <WaykeSearch onClickSearchItem={(data) => console.log(data.id, data.branchId, data.branchName)} />
+  <WaykeProvider {...ProviderSettings} routing={{ mode: 'none' }}>
+    <WaykeSearch />
   </WaykeProvider>
 );
 ```
 
-Without `hashRoute` or `pathRoute`, the vehicles in the search are not links. Use `onClickSearchItem` to open the vehicle yourself.
+With `routing.mode: 'none'`, the vehicles in the search are not links. Subscribe to the `ItemClicked` [event](#events) to open the vehicle yourself.
 
 Vehicle page only:
 
 ```tsx
 import React from 'react';
-import { WaykeItemProvider, WaykeSearchItem } from '@wayke-se/components-react';
+import { WaykeProvider, WaykeSearchItem } from '@wayke-se/components-react';
 
 const App = () => (
-  <WaykeItemProvider {...ProviderSettings}>
-    <WaykeSearchItem
-      id="d01f79a3-7552-49c4-9d4d-deb3aa581c31"
-      onClickSearchItem={(id) => console.log(id)} // A related vehicle is clicked
-    />
-  </WaykeItemProvider>
+  <WaykeProvider {...ProviderSettings}>
+    <WaykeSearchItem id="019cd398-f71a-7ee6-893f-4684c0104a60" />
+  </WaykeProvider>
 );
 ```
 
+Older vehicle ids still work: the vehicle is found and the id in the url is replaced with the current one.
+
 ## Routing
 
-`mount` and `WaykeComposite` show the search, and switch to the vehicle page when a vehicle is opened. By default the vehicle is added to the url after a `#`, such as `/vehicles#01a09074-dfab-7e61-9b78-b816c8233b27`. This works on any page, without any server setup, and the url can be shared. Other hashes, such as `#content`, are ignored and show the search.
+Routing is set in `provider.routing`.
+
+`mount` and `WaykeComposite` show the search, and switch to the vehicle page when a vehicle is opened. By default the vehicle is added to the url after a `#`, such as `/vehicles#019cd398-f71a-7ee6-893f-4684c0104a60`. This works on any page, without any server setup, and the url can be shared. Other hashes, such as `#content`, are ignored and show the search.
 
-To use a path instead, such as `/vehicles/01a09074-dfab-7e61-9b78-b816c8233b27`, set `pathRoute`:
+To use a path instead, such as `/vehicles/019cd398-f71a-7ee6-893f-4684c0104a60`, set `mode: 'path'` and `basePath`:
 
 ```javascript
-composite: {
-  pathRoute: '/vehicles',
+provider: {
+  routing: { mode: 'path', basePath: '/vehicles' },
+}
+```
+
+Your server then has to show the same page for `/vehicles` and `/vehicles/<vehicle id>`, so that a vehicle page still works when it is reloaded or shared. The vehicle id is added after a `/`, so `basePath` should not end with a `/`. A relative `basePath` is resolved from the page the components are shown on, and an absolute url is used as it is. With the page at `/search/vehicles`:
+
+| `basePath`                     | Vehicle url                                    |
+|--------------------------------|------------------------------------------------|
+| `/search/vehicles`             | `yoursite.com/search/vehicles/<vehicle id>`    |
+| `/item`                        | `yoursite.com/item/<vehicle id>`               |
+| `item`                         | `yoursite.com/search/item/<vehicle id>`        |
+| `https://www.example.se/bilar` | `https://www.example.se/bilar/<vehicle id>`    |
+
+Links on the same site open without reloading the page. Ctrl- or cmd-click opens them in a new tab.
+
+To keep the filters in the url, so that a search can be shared and the back button returns to it, set `syncUrl: true`. The filters in the url then win over `initialQueryParams`, which only add what the url doesn't have.
+
+```javascript
+provider: {
+  routing: { syncUrl: true },
 }
 ```
 
-Your server then has to show the same page for `/vehicles` and `/vehicles/<vehicle id>`, so that a vehicle page still works when it is reloaded or shared. The vehicle id is added after a `/`, so `pathRoute` should not end with a `/`. A relative `pathRoute` is resolved from the current page, and an absolute url is used as it is. With the page at `/search/vehicles`:
+### Search parameters
+
+The url, `initialQueryParams` and the `onFilterUpdate` action use the same parameters as wayke.se:
+
+| Parameter | Example | Filters on |
+|-----------|---------|------------|
+| `q` | `q=drag` | Free text |
+| `manufacturer`, `model`, `modelSeries`, `fuelType`, `gearboxType`, `branchDisplayName`, `branchCity`, `colorName`, `environmentClass`, `segment`, `bodyStyle`, `trimLevel`, `inventoryStatus`, `drivetrainType`, `engineBaseType` | `manufacturer=Volvo&manufacturer=Audi` | One or more values |
+| `price.min`, `price.max` | `price.max=300000` | Price in kr |
+| `odometer.min`, `odometer.max` | `odometer.max=8000` | Mileage, in mil in Swedish and in km in Norwegian |
+| `modelYear.min`, `modelYear.max` | `modelYear.min=2018` | Model year |
+| `privateLease.min`, `privateLease.max` | `privateLease.max=5000` | Private leasing per month |
+| `businessLease.min`, `businessLease.max` | `businessLease.max=5000` | Business leasing per month |
+| `certifiedPreOwned`, `isDemoVersion`, `deductibleVat`, `ecom`, `leasing`, `businessLeasing` | `ecom=true` | Yes or no |
+| `sort` | `sort=price-asc` | `published-desc` (default), `published-asc`, `price-asc`, `price-desc`, `modelYear-desc`, `modelYear-asc`, `odometer-asc`, `odometer-desc` |
 
-| `pathRoute`                   | Vehicle url                                    |
-|-------------------------------|------------------------------------------------|
-| `/search/vehicles`            | `yoursite.com/search/vehicles/<vehicle id>`    |
-| `/item`                       | `yoursite.com/item/<vehicle id>`               |
-| `item`                        | `yoursite.com/search/item/<vehicle id>`        |
-| `https://www.example.se/bilar` | `https://www.example.se/bilar/<vehicle id>`   |
+The parameters from before 6.0, such as `query`, `color`, `mileage.max` and `sort=mileage-asc`, still work: they are translated, a warning in the console names the new ones, and with `syncUrl` the url is updated to them.
 
 ## Events
 
@@ -403,14 +421,14 @@ On the CDN:
 
 ```html
 <script type="module">
-  import { mount, WaykePubSub } from 'https://cdn.wayke.se/public-assets/wayke-components-react/5.2.0/index.js';
+  import { mount, WaykePubSub } from 'https://cdn.wayke.se/public-assets/wayke-components-react/6.0.0/index.js';
 
   WaykePubSub.subscribe({
     eventName: 'ItemClicked',
     callback: (data) => console.log('ItemClicked', data),
   });
 
-  mount('#wayke', { provider: { /* ... */ } });
+  mount('#wayke');
 </script>
 ```
 
@@ -430,6 +448,12 @@ WaykePubSub.unsubscribe(event); // The same object that was passed to subscribe
 
 Use `eventName: 'All'` to get every event, with the callback `(eventName, data) => void`.
 
+To change the filters from your own code, publish the `onFilterUpdate` action with the [search parameters](#search-parameters):
+
+```javascript
+WaykePubSub.publishAction('onFilterUpdate', 'manufacturer=Volvo&sort=price-asc');
+```
+
 | Event                   | When                                                           | Data                                   |
 |-------------------------|----------------------------------------------------------------|----------------------------------------|
 | `View`                  | The search or a vehicle page is shown                          | [ViewData](#viewdata)                  |
@@ -450,14 +474,14 @@ Use `eventName: 'All'` to get every event, with the callback `(eventName, data)
 | `InsuranceOpen`         | The insurance details are opened                               | [ItemData](#itemdata)                  |
 | `InsuranceClose`        | The insurance details are closed                               | [ItemData](#itemdata)                  |
 | `InsuranceInterest`     | Insurance prices are requested                                 | [ItemData](#itemdata)                  |
-| `Search`                | A search text is submitted                                     | [SearchData](#searchdata)              |
+| `Search`                | A search text or a suggestion is submitted                     | [SearchData](#searchdata)              |
 | `SearchInitiated`       | A search starts: when the search loads, and after the search text or a filter changes | [SearchData](#searchdata) |
 | `SearchCompleted`       | A search has returned its results                              | [SearchCompletedData](#searchcompleteddata) |
 | `SearchClearQuery`      | The search text is cleared                                     | [SearchClearQueryData](#searchclearquerydata) |
 | `SearchClearAllFilters` | All filters are cleared                                        | [SearchData](#searchdata)              |
 | `FilterApply`           | A filter is changed                                            | [FilterApplyData](#filterapplydata)    |
 
-The data types below describe the payloads. They are not exported from the package.
+The data types below describe the payloads. In TypeScript they are exported with the events, as `CallbackItem`, `CallbackLeadData`, `CallbackSearchCompletedData` and so on. Every `query` uses the [search parameters](#search-parameters).
 
 #### ViewData
 | Property | Type                 |
@@ -521,7 +545,7 @@ The data types below describe the payloads. They are not exported from the packa
 | Property | Type                                  |
 |----------|---------------------------------------|
 | type     | `"checkbox" \| "range"`               |
-| filter   | string                                |
+| filter   | string, a [filter name](#searchfiltertypes) |
 | value    | string \| undefined (checkbox only)   |
 | checked  | boolean \| undefined (checkbox only)  |
 | min      | number \| undefined (range only)      |
@@ -533,73 +557,68 @@ The data types below describe the payloads. They are not exported from the packa
 
 The search, and the vehicle page when a vehicle is opened. This is what `mount` shows on the CDN.
 
-| Property  | Type                                          | Required |
-|-----------|-----------------------------------------------|----------|
-| provider  | [WaykeProviderSettings](#waykeprovidersettings) | Yes    |
-| composite | WaykeCompositeProps                           | No       |
+| Property  | Type                                            | Required |
+|-----------|-------------------------------------------------|----------|
+| provider  | [WaykeProviderSettings](#waykeprovidersettings) | No       |
+| composite | WaykeCompositeProps                             | No       |
 
-`WaykeCompositeProps` takes the settings of [WaykeSearch](#waykesearch) and [WaykeSearchItem](#waykesearchitem), except `id`. `hashRoute` and `onClickSearchItem` have no effect here, since `WaykeComposite` handles the routing itself. To know when a vehicle is clicked, subscribe to the `ItemClicked` [event](#events).
+`WaykeCompositeProps` takes the settings of [WaykeSearch](#waykesearch) and [WaykeSearchItem](#waykesearchitem), except `id`.
 
 ### WaykeSearch
 
-| Property                  | Type                                    | Description |
-|---------------------------|-----------------------------------------|-------------|
-| marketCode                | `'SE' \| 'NO'`                          | Language, see [Language](#language). Default `'SE'`. |
-| filterList                | [SearchFilterTypes](#searchfiltertypes)[] | The filters to show, in this order. By default all filters, with the mileage filter depending on [Language](#language). |
-| initialQueryParams        | URLSearchParams \| string               | Filters applied when the search loads, see below. |
-| removeSearchBar           | boolean                                 | Hides the search field. |
-| removeFilterOptions       | boolean                                 | Hides the filters. |
-| placeholderImage          | string                                  | Url to an image for vehicles without images. |
-| pathRoute                 | string                                  | Makes the vehicles links to `pathRoute/<vehicle id>`, see [Routing](#routing). |
-| hashRoute                 | boolean                                 | Makes the vehicles links to `#<vehicle id>`. Not used if `pathRoute` is set. |
-| onClickSearchItem         | `(data: { id, branchId?, branchName? }) => void` | Called when a vehicle is clicked. |
-| modifyDocumentTitleSearch | string                                  | Sets the page title. |
-| displayBranchName         | boolean                                 | Shows the branch name on the vehicles. |
-
-`initialQueryParams` is passed on to the search API. The parameters are `query`, `manufacturer`, `modelSeries`, `fuelType`, `gearboxType`, `branch`, `color`, `environmentClass`, `properties.segment`, `drivingWheel`, `price.min`, `price.max`, `mileage.min`, `mileage.max`, `odometerValueAsKm.min`, `odometerValueAsKm.max`, `modelYear.min`, `modelYear.max`, `leasingPrice.min`, `leasingPrice.max`, `businessLeasingPrice.min`, `businessLeasingPrice.max`, `sort` (default `published-desc`) and `hits` (default `30`).
+| Property                  | Type                                      | Description |
+|---------------------------|-------------------------------------------|-------------|
+| filterList                | [SearchFilterTypes](#searchfiltertypes)[] | The filters to show, in this order. By default all filters. |
+| initialQueryParams        | URLSearchParams \| string                 | Filters applied when the search loads, see [Search parameters](#search-parameters). |
+| removeSearchBar           | boolean                                   | Hides the search field. |
+| removeFilterOptions       | boolean                                   | Hides the filters. |
+| placeholderImage          | string                                    | Url to an image for vehicles without images. |
+| modifyDocumentTitleSearch | string                                    | Sets the page title. |
+| displayBranchName         | boolean                                   | Shows the branch name on the vehicles. |
 
 ### WaykeSearchItem
 
 | Property                 | Type                       | Description |
 |--------------------------|----------------------------|-------------|
-| id                       | string                     | **Required.** The id of the vehicle. |
-| marketCode               | `'SE' \| 'NO'`             | Language, see [Language](#language). Default `'SE'`. |
+| id                       | string                     | **Required.** The id of the vehicle. Older ids work too. |
 | conversionOptions        | ConversionOption[]         | The buttons on the vehicle page, see [Contact buttons](#contact-buttons). |
 | modifyDocumentTitleItem  | boolean                    | Sets the page title to the vehicle (registration number, title and short description). |
 | displayBranchName        | boolean                    | Shows the branch name on related vehicles and where the vehicle is located. |
 | placeholderImage         | string                     | Url to an image for vehicles without images. |
 | disableResetScrollOnInit | boolean                    | Keeps the scroll position when the vehicle page opens. By default it scrolls to the top. |
-| pathRoute                | string                     | Makes related vehicles links to `pathRoute/<vehicle id>`, see [Routing](#routing). |
-| hashRoute                | boolean                    | Makes related vehicles links to `#<vehicle id>`. Not used if `pathRoute` is set. |
-| onClickSearchItem        | `(id: string) => void`     | Called when a related vehicle is clicked. |
 
 ### WaykeProviderSettings
 
-| Property              | Type                          | Description |
-|-----------------------|-------------------------------|-------------|
-| url                   | string                        | **Required.** The vehicle search API, see [Environments](#environments). |
-| graphQlUrl            | string                        | **Required.** The GraphQL API, see [Environments](#environments). |
-| urlMlt                | string                        | The API for related vehicles. Without it, the latest vehicles are shown as related vehicles. |
-| ecomSettings          | [EcomSettings](#ecomsettings) | Turns on buy online. |
-| apiKey                | string                        | Identifies the site instead of its domain. Sent as `x-api-key`. |
-| googleMapsApiKey      | string                        | A Google Maps Static API key. With it, the map button on the vehicle page shows a map. Without it, the button opens Google Maps. |
-| googleMapsMarker      | string                        | Url to a custom marker for the map. |
-| useQueryParamsFromUrl | boolean                       | Reads and writes the search filters in the url. Values in `initialQueryParams` are added unless the url already has them. |
-| pathRoute             | string                        | Used with `useQueryParamsFromUrl`: the part of the path from `pathRoute` is removed when the filters are written to the url. `composite.pathRoute` is not passed on, so set it here as well. |
-
-### WaykeItemProviderSettings
-
-The same as [WaykeProviderSettings](#waykeprovidersettings), without `useQueryParamsFromUrl` and `pathRoute`. Used with `WaykeItemProvider` and `mountItem`.
+All settings are optional.
+
+| Property         | Type                                  | Description |
+|------------------|---------------------------------------|-------------|
+| environment      | `'production' \| 'test'`              | Which Wayke environment to use, see [Environments](#environments). Default `'production'`. |
+| marketCode       | `'SE' \| 'NO'`                        | Language and market, see [Language](#language). Default `'SE'`. |
+| routing          | [RoutingSettings](#routingsettings)   | How vehicles are opened, see [Routing](#routing). |
+| ecomSettings     | [EcomSettings](#ecomsettings)         | Turns on buy online. `{}` is enough. |
+| apiKey           | string                                | Identifies the site instead of its domain. Sent as `x-api-key`. |
+| branchGroupId    | string                                | Limits the vehicles to a group of branches. By default the domain or `apiKey` decides which vehicles are shown. |
+| googleMapsApiKey | string                                | A Google Maps Static API key. With it, the map button on the vehicle page shows a map. Without it, the button opens Google Maps. |
+| googleMapsMarker | string                                | Url to a custom marker for the map. |
+| publicApiUrl     | string                                | Replaces the vehicle API of `environment`. |
+| leadUrl          | string                                | Replaces the lead API of `environment`. |
+
+### RoutingSettings
+
+| Property | Type                         | Description |
+|----------|------------------------------|-------------|
+| mode     | `'hash' \| 'path' \| 'none'` | `hash` (default) opens a vehicle at `#<id>`, `path` at `<basePath>/<id>`, `none` makes the vehicles plain cards that only publish `ItemClicked`. |
+| basePath | string                       | **Required for `path`.** Where the vehicle pages are, see [Routing](#routing). |
+| syncUrl  | boolean                      | Reads and writes the search filters in the url. |
 
 ### EcomSettings
 
 | Property           | Type    | Description |
 |--------------------|---------|-------------|
-| url                | string  | **Required.** The ecom API, see [Environments](#environments). |
+| url                | string  | Replaces the ecom API of `environment`. |
 | serviceLogotypeUrl | string  | Url to the logo shown in buy online, as an image file (not a `data:` url). The logo of the make is used by default. |
 | bankIdThumbprint   | string  | A custom BankID certificate thumbprint. |
-| useBankId          | boolean | Deprecated, has no effect since 3.0.0. |
-| displayBankIdAlert | boolean | Deprecated, has no effect since 3.0.0. |
 
 See [wayke-ecom-web](https://github.com/wayke-se/wayke-ecom-web) for more about buy online.
 
@@ -607,5 +626,86 @@ See [wayke-ecom-web](https://github.com/wayke-se/wayke-ecom-web) for more about
 
 | Property    | Type   | Description |
 |-------------|--------|-------------|
-| filterName  | string | **Required.** One of `manufacturer`, `modelSeries`, `fuelType`, `gearboxType`, `branch`, `color`, `environmentClass`, `properties.segment`, `drivingWheel`, `price`, `mileage`, `odometerValueAsKm`, `modelYear`, `leasingPrice`, `businessLeasingPrice`. |
+| filterName  | string | **Required.** One of `manufacturer`, `model`, `modelSeries`, `fuelType`, `gearboxType`, `branchDisplayName`, `branchCity`, `colorName`, `environmentClass`, `segment`, `bodyStyle`, `trimLevel`, `inventoryStatus`, `drivetrainType`, `engineBaseType`, `price`, `odometer`, `modelYear`, `privateLease`, `businessLease`. |
 | displayName | string | The title of the filter. The translated title by default. |
+
+By default the list is `manufacturer`, `modelSeries`, `fuelType`, `gearboxType`, `branchDisplayName`, `colorName`, `environmentClass`, `segment`, `drivetrainType`, `price`, `privateLease`, `businessLease`, `odometer` and `modelYear`.
+
+## Migrating from 5.x to 6.0
+
+6.0 gets the vehicles from Wayke's public API (`public-api.wayke.com`) instead of `api.wayke.se` and `gql.wayke.se`, and has fewer settings: most sites only set what is different from the defaults. Leads and buy online work as before.
+
+The old filter names, url parameters and vehicle ids keep working, with a warning in the console, so a site that only changes its settings keeps its links and saved searches.
+
+### 1. Provider settings
+
+Remove the API urls. Production is the default; set `environment: 'test'` for test.
+
+```javascript
+// 5.x
+provider: {
+  url: 'https://api.wayke.se/vehicles',
+  graphQlUrl: 'https://gql.wayke.se/query',
+  urlMlt: 'https://api.wayke.se/vehicles-mlt-ext',
+  ecomSettings: { url: 'https://ecom.wayke.se' },
+},
+
+// 6.0
+provider: {
+  ecomSettings: {},
+},
+```
+
+| 5.x | 6.0 |
+|-----|-----|
+| `url`, `graphQlUrl`, `urlMlt` | Removed. Use `environment` (`publicApiUrl` and `leadUrl` replace single urls if you need to) |
+| `ecomSettings.url` | Optional, follows `environment` |
+| `ecomSettings.useBankId`, `ecomSettings.displayBankIdAlert` | Removed, no effect since 3.0.0 |
+| `useQueryParamsFromUrl` | `routing.syncUrl` |
+| `pathRoute` (provider and composite) | `routing: { mode: 'path', basePath }` |
+| `marketCode` (composite, search, item) | `provider.marketCode` |
+| `apiKey` | Unchanged; now also identifies the site to the vehicle API |
+| `WaykeItemProvider`, `WaykeItemProviderSettings` | `WaykeProvider`, `WaykeProviderSettings` |
+
+### 2. Routing and clicks
+
+| 5.x | 6.0 |
+|-----|-----|
+| Hash routing (`#<id>`) by default in `mount` and `WaykeComposite` | Unchanged |
+| `hashRoute` | Removed; hash is the default |
+| `WaykeSearch` alone without `hashRoute` or `pathRoute`: plain cards | Set `routing: { mode: 'none' }`; the default is now hash links |
+| `onClickSearchItem` (search and item) | Removed; subscribe to the `ItemClicked` event |
+
+### 3. Filters and parameters
+
+`filterList`, `initialQueryParams`, the `onFilterUpdate` action and the url take the names in [Search parameters](#search-parameters). The old names are translated:
+
+| 5.x | 6.0 |
+|-----|-----|
+| `query` | `q` |
+| `branch` | `branchDisplayName` |
+| `color` | `colorName` |
+| `properties.segment` | `segment` |
+| `drivingWheel` | `drivetrainType` |
+| `mileage`, `odometerValueAsKm` | `odometer` (mil in Swedish, km in Norwegian) |
+| `leasingPrice` | `privateLease` |
+| `businessLeasingPrice` | `businessLease` |
+| `sort=model-asc`, `model-desc`, `mileage-asc`, `mileage-desc` | `modelYear-asc`, `modelYear-desc`, `odometer-asc`, `odometer-desc` |
+| `hits`, `offset` | Removed; 30 vehicles per page, "Show more" loads the next |
+
+The search field now suggests makes and models. A free text that is exactly a make or model, such as "audi", filters on it.
+
+### 4. Events
+
+The event names and data are the same. What changes:
+
+* `query` in `Search`, `SearchInitiated`, `SearchCompleted`, `SearchClearAllFilters` uses the new parameter names.
+* `filter` in `FilterApply` is the new filter name, for example `colorName` instead of `color`.
+* `id` is the vehicle's id in the public API. New vehicles have new ids; older ones mostly keep theirs.
+
+### 5. Removed
+
+* Central storage (switching to another branch on the vehicle page).
+* The campaign filter. Dealer packages are still shown on the vehicle page.
+* Related vehicles are now the latest vehicles of the same make.
+* A vehicle without a cash price, such as a leasing-only car, shows no price instead of 0 kr.