# Revolugo Elements

> Revolugo Elements UI library

## How to use

### Initialization

Include the **Revolugo Elements** tag in the `head` section of your page and edit the config to suit your needs.

**N.B:** The configuration options are explained below.

```html
<script>
  ;(function (r, e, v, o, l, u, g) {
    r[l] = r[l] || {
      ready: function (y) {
        r[l]._ready = y
      },
    }
    ;((u = e.createElement(v)), (g = e.getElementsByTagName(v)[0]))
    u.src = o + '?' + new Date().getTime()
    g.parentNode.insertBefore(u, g)
  })(
    window,
    document,
    'script',
    'https://cdn.jsdelivr.net/npm/@revolugo/elements',
    'RevolugoElements',
  )

  // Revolugo Elements configuration
  RevolugoElements.config = {
    apiEnvironment: 'LIVE',
    apiKey: 'my-api-key',
    locale: 'fr-FR',
    theme: { primary: '#007fff' },
  }
</script>
```

### Using components

To use a Revolugo web component, include the corresponding tag in the `body` section of your page, and provide parameters in the tag attributes.

For example:

```html
<revolugo-hotel-search
  check-in-date="2023-10-10"
  check-out-date="2023-10-11"
  latitude="48.85826"
  longitude="2.29452"
/>
```

### Subscribing to events

Events will be published on an event bus by the Revolugo Elements library. Subscribing to them is easy:

```js
// Define your callback in RevolugoElements.ready() so it will be called when the library is initialized.
RevolugoElements.ready(function () {
  RevolugoElements.eventBus.$on('hotel-offers:retrieved', function (payload) {
    console.log(payload)
  })
})
```

## Configuration options

| Name             | Type   | Requirement   | Default                                                            | Description                                                                                  |
| ---------------- | ------ | ------------- | ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------- |
| `apiEnvironment` | string | **Optional**  | `LOCAL`                                                            | The Revolugo environment to use. Must be one of these: `LIVE`, `SANDBOX`, `STAGING`, `LOCAL` |
| `apiKey`         | string | **Mandatory** |                                                                    | Your Revolugo API Key                                                                        |
| `locale`         | string | **Optional**  | `en-US`                                                            | The language used in components. Must be `en-US` or `fr-FR`                                  |
| `theme`          | object | **Optional**  | `{ primary: '#007fff', secondary: '#64B5F6', success: '#4CAF50' }` | Color theme for the components. All keys are optional                                        |