Eurotax
The Eurotax component allows users to search and select a vehicle from the Eurotax external data source. It provides a step-by-step selection process where users must select various vehicle attributes in sequence to narrow down to a specific car version.
The component consists of a button that opens a modal, within which users refine their search by selecting:
- Risk Type - Choose between "car" or "van"
- Brand - Select the vehicle brand
- Model - Based on the selected brand, choose the model
- Build Year - Select the year the vehicle was built
- Fuel Type - Choose the fuel type (e.g., petrol, diesel, electric, hybrid)
- Power - Select the engine power
- Version - Finally, select the specific vehicle version from the filtered results
Once all criteria have been selected, the user can choose the specific car version they want, which will be stored in the form.
Basic Usage
{
"vehicle": {
"component": "eurotax",
"label": "Select a vehicle"
}
}
Configuration Options
The Eurotax component supports various configuration options to customize the search behavior and display.
Custom Labels
{
"vehicle": {
"component": "eurotax",
"label": "Select your vehicle",
"placeholder": "Click to search",
"options": {
"labels": {
"select_car_button": "pls taek car",
"select_car_modal_title": "choose pls"
}
}
}
}
Default Value
{
"vehicle": {
"component": "eurotax",
"label": "Select a vehicle",
"placeholder": "Search for a vehicle",
"default": {
"from": "car"
}
}
}
Validations
{
"vehicle": {
"component": "eurotax",
"label": "Vehicle description",
"validations": [
{
"property": {
"from": "vehicle.version"
},
"assertion": "notEmpty",
"message": "Required"
}
]
}
}
Disabled State
{
"vehicle": {
"component": "eurotax",
"label": "Vehicle description",
"disabled": [
{
"property": "disable_selection",
"assertion": "isTrue"
}
],
"validations": ["required"]
}
}
Default brand
You can set the default brand to be selected by setting the defaultBrandId option.
{
"vehicle": {
"component": "eurotax",
"label": "Select a vehicle",
"defaultBrandId": "22"
}
}
or coming from other data
{
"vehicle": {
"component": "eurotax",
"label": "Select a vehicle",
"defaultBrandId": {
"from": "default_brand_id"
}
}
}
Brand Filtering
You can restrict the available brands in the selection by using the brandFilter option. This allows you to limit users to selecting vehicles from specific brands only. The filter accepts an array of brand IDs.
Example: Single Brand Filter
{
"vehicle": {
"component": "eurotax",
"label": "Only Mercedes",
"brandFilter": ["22"]
}
}
Example: Multiple Brands Filter
{
"vehicle_2": {
"component": "eurotax",
"label": "Only AUDI and BMW",
"brandFilter": ["4", "5"]
}
}
Available Brand IDs
The following brand IDs can be used in the brandFilter array:
| ID | Brand |
|---|---|
| 3 | ALFA ROMEO |
| 4 | AUDI |
| 5 | BMW |
| 6 | CHRYSLER |
| 7 | CITROEN |
| 8 | DAIHATSU |
| 9 | FIAT |
| 10 | FORD |
| 12 | HONDA |
| 13 | HYUNDAI |
| 15 | JAGUAR |
| 16 | KIA |
| 17 | LADA |
| 18 | LANCIA |
| 19 | LEXUS |
| 20 | LOTUS |
| 21 | MAZDA |
| 22 | MERCEDES-BENZ |
| 23 | MITSUBISHI |
| 24 | NISSAN |
| 25 | OPEL |
| 26 | PEUGEOT |
| 27 | PORSCHE |
| 28 | RENAULT |
| 29 | ROVER |
| 30 | SAAB |
| 31 | SEAT |
| 32 | SKODA |
| 33 | SUBARU |
| 34 | SUZUKI |
| 36 | TOYOTA |
| 38 | VOLKSWAGEN |
| 39 | VOLVO |
| 47 | JEEP |
| 49 | LAND ROVER |
| 63 | FORD USA |
| 66 | SSANGYONG |
| 68 | CADILLAC |
| 69 | CHEVROLET |
| 73 | BENTLEY |
| 74 | ASTON-MARTIN |
| 75 | BUGATTI |
| 76 | CATERHAM |
| 78 | DONKERVOORT |
| 79 | FERRARI |
| 81 | GILLET |
| 82 | GINETTA |
| 83 | LAMBORGHINI |
| 85 | MASERATI |
| 86 | MORGAN |
| 87 | ROLLS-ROYCE |
| 88 | TVR |
| 93 | MG |
| 99 | DACIA |
| 104 | DAEWOO |
| 121 | LINCOLN |
| 124 | SMART |
| 128 | BMW ALPINA |
| 130 | WIESMANN |
| 133 | MINI |
| 134 | PAGANI |
| 155 | MAXUS |
| 173 | MAYBACH |
| 176 | SANTANA |
| 178 | PGO |
| 179 | CORVETTE |
| 180 | HUMMER |
| 183 | DODGE |
| 193 | IVECO |
| 194 | INFINITI |
| 199 | ARTEGA |
| 200 | TAZZARI |
| 201 | TESLA |
| 202 | MIA |
| 203 | FISKER |
| 204 | LANDWIND |
| 206 | ARIEL |
| 207 | DS |
| 212 | ABARTH |
| 215 | MCLAREN |
| 225 | POLESTAR |
| 229 | CUPRA |
| 230 | SERES |
| 231 | BAIC |
| 232 | DFSK |
| 233 | AIWAYS |
| 234 | LYNK&CO |
| 235 | LEVC |
When brandFilter is specified, only the brands listed in the array will be available for selection in the modal. All other brands will be hidden from the user.
Tooltips
You can set tooltips for the brands, models, build years, fuel types and powers.
{
"vehicle": {
"component": "eurotax",
"label": "Default vans",
"tooltips": {
"brands": "Brand",
"models": "Model",
"build_years": "Build year",
"fuel_types": "Fuel types",
"powers": "Power"
}
}
}
Risk type
By default, the component only allows to select the risk type "car" or "van", but other risk types are available.
| Risk Type |
|---|
| car |
| van |
| minibus |
| oldtimer |
| mobilhome |
Example: all risk types
{
"vehicle": {
"component": "eurotax",
"label": "All risk types",
"options": {
"riskTypes": {
"car": true,
"van": true,
"minibus": true,
"oldtimer": true,
"mobilhome": true
}
}
}
}
You can set the default risk type to be selected by setting the defaultRiskType option.
Example: default type is van
{
"vehicle": {
"component": "eurotax",
"label": "Default vans",
"defaultRiskType": "van"
}
}
You can force the risk type to be selected by setting the defaultRiskType option to null.
Example: default type is null
{
"vehicle": {
"component": "eurotax",
"label": "Default risk type",
"defaultRiskType": null
}
}
Power options
The power selection can be configured to not be required, neither visible. That way it's possible to select a vehicle without specifying the power.
{
"vehicle": {
"component": "eurotax",
"label": "Vehicle description power visible not required",
"options": {
"powerOptions": {
"required": false,
"visible": true
}
}
}
}
Default to first option
You can set the component to select the first option of a list by default by setting the default_to_first_option configuration.
{
"vehicle": {
"component": "eurotax",
"label": "Vehicle description",
"options": {
"default_to_first_option": {
"build_years": true
}
}
}
}
Limit list options
You can limit the number of options displayed in the list by setting the limit configuration.
{
"vehicle": {
"component": "eurotax",
"label": "Vehicle description",
"options": {
"limit": {
"build_years": 2
}
}
}
}
Sorting list options
You can sort the list options by setting the sorting configuration.
| Sorting | Description |
|---|---|
| asc | Ascending order |
| desc | Descending order |
{
"vehicle": {
"component": "eurotax",
"label": "Vehicle description",
"options": {
"sorting": {
"build_years": "desc"
}
}
}
}
Not in modal
By default, the component is displayed in a modal. You can disable this by setting the useModal configuration to false.
{
"vehicle": {
"component": "eurotax",
"label": "Vehicle description",
"options": {
"useModal": false
}
}
}
Change properties shown
It's possible to change the properties shown in the resume of a version selected, or the columns of the version list in the selector.
| Property | Description |
|---|---|
| resume | Show in the resume of the version selected |
| table | Show in the version list in the selector |
| format | Format the value of the property, build_year (4 first digits) or formats defined here: Text component |
| position | Position of the property in the list |
All available properties are:
| Property |
|---|
| eurotaxID |
| brandId |
| brandLabel |
| modelId |
| modelLabel |
| constructionYear |
| fuelTypeEurotaxID |
| fuelTypeName |
| fuelTypeMainframeID |
| vehicleTypeCode |
| taxHP |
| bodyType |
| segmentTypeInternational |
| segmentTypeNational |
| sportCarCat |
| powerKW |
| powerHP |
| powerHybKW |
| transmissionId |
| transmissionLabel |
| tractionId |
| tractionLabel |
| gears |
| seats |
| seatMax |
| doors |
| parsed_kw |
| parsed_hp |
| parsed_doors |
| parsed_gears |
| parsed_seats |
| parsed_seat_max |
| parsed_year |
| parsed_catalog_value |
| amountCatalogueValueWithOutOptionsExclVAT |
| amountCatalogueValueWithOutOptionsExclVATStartDate |
| amountCatalogueValueWithOutOptionsExclVATEndDate |
| version |
| typeVehicleId |
| typeVehicleName |
| concatOutput |
Without brand image
By default the brand logo is shown in the version selectd panel. We can disable this by setting the show_brand option to false.
{
"vehicle": {
"component": "eurotax",
"label": "Vehicle description",
"options": {
"show_brand": false
}
}
}
Example: change properties shown
{
"vehicle": {
"component": "eurotax",
"label": "Vehicle description",
"options": {
"fields": {
"eurotaxID": {
"resume": false,
"table": false
},
"brandId": {
"resume": false,
"table": false
},
"brandLabel": {
"resume": false,
"table": false
},
"modelId": {
"resume": false,
"table": false
},
"modelLabel": {
"resume": false,
"table": false
},
"constructionYear": {
"resume": false,
"table": false
},
"fuelTypeEurotaxID": {
"resume": false,
"table": false
},
"fuelTypeName": {
"resume": false,
"table": false
},
"fuelTypeMainframeID": {
"resume": false,
"table": false
},
"vehicleTypeCode": {
"resume": false,
"table": false
},
"taxHP": {
"resume": false,
"table": false
},
"bodyType": {
"resume": false,
"table": false
},
"segmentTypeInternational": {
"resume": false,
"table": false
},
"segmentTypeNational": {
"resume": false,
"table": false
},
"sportCarCat": {
"resume": false,
"table": false
},
"powerKW": {
"resume": false,
"table": false
},
"powerHP": {
"resume": false,
"table": false
},
"powerHybKW": {
"resume": false,
"table": false
},
"transmissionId": {
"resume": false,
"table": false
},
"transmissionLabel": {
"resume": false,
"table": false
},
"tractionId": {
"resume": false,
"table": false
},
"tractionLabel": {
"resume": false,
"table": false
},
"gears": {
"resume": false,
"table": false
},
"seats": {
"resume": false,
"table": false
},
"seatMax": {
"resume": false,
"table": false
},
"doors": {
"resume": false,
"table": false
},
"parsed_kw": {
"resume": false,
"table": true,
"position": 1
},
"amountCatalogueValueWithOutOptionsExclVAT": {
"resume": true,
"table": true,
"format": "price",
"position": 2
},
"amountCatalogueValueWithOutOptionsExclVATStartDate": {
"resume": false,
"table": false
},
"amountCatalogueValueWithOutOptionsExclVATEndDate": {
"resume": false,
"table": false
},
"version": {
"resume": false,
"table": false
},
"typeVehicleId": {
"resume": false,
"table": false
},
"typeVehicleName": {
"resume": false,
"table": false
},
"concatOutput": {
"resume": false,
"table": false
}
}
}
}
}
Selection Flow
The component guides users through a sequential selection process:
- Risk Type Selection: First, the user must choose between "car" or "van"
- Brand Selection: Based on the risk type, available brands are displayed
- Model Selection: After selecting a brand, models for that brand are shown
- Build Year Selection: Users select the year the vehicle was manufactured
- Fuel Type Selection: Available fuel types for the selected model are displayed
- Power Selection: Users choose the engine power rating
- Version Selection: Finally, users can select from the available versions matching all previous criteria
Each step filters the available options for the next step, ensuring users can only select valid combinations.
Returned Data Structure
When a vehicle is selected, the component stores the complete vehicle information. The value typically includes:
{
"riskType": "car",
"powerKW": 125,
"brandId": "212",
"modelId": "2116",
"fuelType": "001",
"version": {
"eurotaxID": "122549",
"brandId": "212",
"brandLabel": "ABARTH",
"modelId": "2116",
"modelLabel": "124 SPIDER",
"constructionYear": 2016,
"fuelTypeEurotaxID": "00100001",
"fuelTypeName": "Essence",
"fuelTypeMainframeID": "001",
"vehicleTypeCode": "10",
"taxHP": "8.00",
"bodyType": "00010004",
"segmentTypeInternational": "00780003",
"segmentTypeNational": "00030004",
"sportCarCat": "5",
"powerKW": "125.00",
"powerHP": "170.00",
"transmissionId": "00180001",
"transmissionLabel": "Manuelle",
"tractionId": "00050002",
"tractionLabel": "Propulsion",
"gears": "6",
"seats": "2",
"seatMax": "2",
"doors": "2",
"amountCatalogueValueWithOutOptionsExclVAT": "33057.85",
"amountCatalogueValueWithOutOptionsExclVATStartDate": "20160301",
"amountCatalogueValueWithOutOptionsExclVATEndDate": "20160831",
"version": "124 Spider 1.4 MultiAir ",
"typeVehicleId": "006",
"typeVehicleName": "Sportif",
"concatOutput": "124 Spider 1.4 MultiAir (125 kW, 6 vit., 2 portes, 2 places, Sportif, 33057.85 EUR)",
"parsed_kw": 125,
"parsed_hp": 170,
"parsed_doors": 2,
"parsed_gears": 6,
"parsed_seats": 2,
"parsed_seat_max": 2,
"parsed_year": 2016,
"parsed_catalog_value": 33057.85
},
"buildYear": "2016"
}