The TUI Cars Go Component

Description

Cars Offer Component

TUI Cars Go is a cross-selling module that generates and displays a selection of rental cars, based on existing travel data such as location and date. This allows the customer to book a rental car very quickly during his booking process. Stand-alone use is not possible with this component. TUI Cars Go sends its requests directly to the backend system TUI Wheels and receives the vehicle offers, including prizes, pictures, etc. from there. These offers are displayed in a horizontal arrangement from which the customer makes his selection. The selected vehicle will then be handed over to the surrounding website via the cotton-ball event, which in turn will generate a booking in TUI Wheels.

Screenshots

Banner

Offer Selection

Calendar

Driver Selection

Custom Driver

Summary

Maintainer	jan.stangenberg@tui.com
Locales	`en-US`, `de-DE`

Usage

Add the following script tag (or something similar) to your web page to have the component load. Note: This is required only once per webpage, even when you embed multiple instances of the component.

<script src="https://6m.tuicars.com/go/build/tuicarsgo.esm.js" async defer></script>

Add the following HTML code anywhere in your webpage at the position where you want the component to show. You can create multiple instances of the component. Remember to replace VALUE with actual valid values for the given attribute.

<tui-cars-go
	airport-code="VALUE"
	start-date="VALUE"
	end-date="VALUE">
</tui-cars-go>

Examples

A minimal implementation.

<tui-cars-go
	airport-code="GRO"
	start-date="2020-05-03T10:00:00"
	end-date="2020-05-08T10:00:00">
</tui-cars-go>

Attributes

This component can be configured with the following attributes:

Name	Description	Allowed Values	Required
`expanded`	Initially show banner or offer selection.	`true`, `false`	no
`airport-code`	Airport code for initial offers request.	`^[A-Z]{3}$`	yes
`start-date`	Start date for initial offers request.	`^[0-9]{4}-[0-9]{2}-[0-9]{2}[A-Z]{1}[0-9]{2}:[0-9]{2}:[0-9]{2}$`	yes
`end-date`	End date for initial offers request.	`^[0-9]{4}-[0-9]{2}-[0-9]{2}[A-Z]{1}[0-9]{2}:[0-9]{2}:[0-9]{2}$`	yes
`number-of-persons`	Number of persons for initial offers request.	`^[0-9]{2}$`	no
`flight-number`	Number of arrival flight without spaces.	`^[A-Z,a-z]{2}[0-9]{4,5}$`	no
`enable-custom-driver`	Enables the user to set a custom driver.	`true`, `false`	no

Events

Event	`did-load`
Type	publish
Description	Event is sent after the component has been loaded.
Payload	none

Event expanded

Type publish

Description

Indicates whether the component is open or not.

Payload

The payload object of this event has the following properties:

Name	`expanded`
Description	Indicates whether the component is open or not.
Type	boolean

Event offer-selected

Type publish

Description

Triggers when an offer is selected, is null if offer is deselected

Payload

The payload object of this event has the following properties:

Name	`bookingSystem`
Description	The backend booking system to proceed the booking with
Type	string
Values	`TUI_WHEELS`, `TUI_CARS`

Name	`driver`
Description	The driver with first name, surname and age
Type	object
Schema	{ "type": "object", "properties": { "birthDate": { "type": "string", "pattern": "^[0-9]{2}.[0-9]{2}.[0-9]{4}" }, "firstName": { "type": "string", "pattern": "^[A-Z,a-z,-]$" }, "gender": { "type": "string", "enum": [ "f", "m" ] }, "lastName": { "type": "string", "pattern": "^[A-Z,a-z,-]$" }, "identifier": { "type": "string", "pattern": "^[A-Z,a-z,-]$" } } }

Name	`flightNumber`
Description	The flight number of arriving flight
Type	string
Pattern	`^[A-Z,a-z]{2}[0-9]{4,5}$`

Name	`offerId`
Description	The offer id to proceed the booking
Type	string
Pattern	`^[A-Z,a-z,0-9]$`

Name	`price`
Description	The price including amount and currency
Type	object
Schema	{ "type": "object", "properties": { "amount": { "type": "number" }, "currency": { "type": "string", "pattern": "^[A-Z,a-z,$€]$" } } }

Name	`reportSummary`
Description	Report summary used to complete vvi
Type	object

Name	`vehicle`
Description	Detailed vehicle information including acriss, manufacturer and model
Type	object
Schema	{ "type": "object", "properties": { "acriss": { "type": "string", "pattern": "^[A-Z,a-z,0-9]$" }, "manufacturer": { "type": "string", "pattern": "^[A-Z,a-z,0-9]$" }, "model": { "type": "string", "pattern": "^[A-Z,a-z,0-9]$" } } }

Event start-date-changed

Type publish

Description

Returns the new start date.

Payload

The payload object of this event has the following properties:

Name	`startDate`
Description	The date in the format YYYY-MM-DD.
Type	string
Pattern	`^[0-9]{4}-[0-9]{2}-[0-9]{2}$`

Event start-time-changed

Type publish

Description

Returns the new start time.

Payload

The payload object of this event has the following properties:

Name	`startTime`
Description	The time in the format HH:MM:SS.
Type	string
Pattern	`^[0-9]{2}:[0-9]{2}:[0-9]{2}$`

Event end-date-changed

Type publish

Description

Returns the new end date.

Payload

The payload object of this event has the following properties:

Name	`endDate`
Description	The date in the format YYYY-MM-DD.
Type	string
Pattern	`^[0-9]{4}-[0-9]{2}-[0-9]{2}$`

Event end-time-changed

Type publish

Description

Returns the new end time.

Payload

The payload object of this event has the following properties:

Name	`endTime`
Description	The time in the format HH:MM:SS.
Type	string
Pattern	`^[0-9]{2}:[0-9]{2}:[0-9]{2}$`

Event flight-number-changed

Type publish

Description

Returns the new flight number.

Payload

The payload object of this event has the following properties:

Name	`flightNumber`
Description	The flight number in the format AB1234.
Type	string
Pattern	`^[A-Z,a-z]{2}[0-9]{4,5}$`

Event validate

Type subscribe

Description

Returns validation information.

Payload

The payload object of this event has the following properties:

Name	`callback`
Description	Callback function to handle errors
Type	object

Event set-drivers

Type subscribe

Description

Set driver details. All drivers need an identifier, which can be assigned individually (e.g. a). By specifying the identifier, the spelling of the name or birthdate can be adapted afterwards - in this case, pass all corrected data again. To unset drivers pass undefined.

Payload

The payload object of this event has the following properties:

Name	`birthDate`
Description	Birth date of given driver
Type	string
Pattern	`^[0-9]{2}.[0-9]{2}.[0-9]{4}`

Name	`firstName`
Description	First name of given driver
Type	string
Pattern	`^[A-Z,a-z,-]$`

Name	`gender`
Description	Gender of given driver
Type	string
Values	`f`, `m`

Name	`lastName`
Description	Last name of given driver
Type	string
Pattern	`^[A-Z,a-z,-]$`

Name	`identifer`
Description	Unique identifier of given driver
Type	string
Pattern	`^[A-Z,a-z,-]$`

The TUI Cars Go Component

Description

Cars Offer Component

Screenshots

Meta

Usage

Examples

Attributes

Events