Bookassist Header

This project is React Control that renders common Bookassist header. You can import this project to use into another react project or non-react project.

Build library

This project is also a library to use embedded in another apps. The library exports 2 things

• Header: This is the React component
• renderHeader: This is a function to render the header in anywhere.application.

To build the library you can execute

yarn install && yarn build

Publish library

You can publish this library to a npm repository. npm publish

How to use

You can use this library as part of es6 project as library and component into this project.

es6

To install the component, you have to include in your project as

npm install @bookassist/ba-js-header

To use into you project

import { Header } from '@bookassist/ba-js-header'
... 
<Header />

Another js project or website

You have to include the js file

<link rel="stylesheet" href="https://unpkg.com/@bookassist/[email protected]/dist/ha-styles.css">
<script type="text/javascript" src="https://unpkg.com/@bookassist/[email protected]/dist/ba-header.js"></script>

...

<div id="header"></div>
<script type="text/javascript">
  renderHeader(document.getElementById("header"))
</script>

Options

Properties of the control

There are some properties you can configure to change the behaviour and adapt to your needdeds.

| Property | Description | - | | --- | --- | --- | | title | Title of the application | Mandatory string | | pageTitle | Title of the page | String. Default value: '' | | pageTitleBehaviour | Behaviour of the page title | Possible values:hotelName: Use the name of the hotel as page titletitle: Use pageTitle property as page titlehotelNameOrTitle: Use the name of the hotel or pageTitle in case that it cannot retrieve the hotelnone: Not show page title block Default values is none | | langControl | The way to show the language selector | Possible values:menu: Show as overlay layerdropdown: Show as dropdown controlnone: Not show language selector Default value is none | | hotelChangeControl | How to show the hotel change control | Possible values:inline: As part of the headernone: Not show the hotel change control Default value is none | | logoutControl | How to show the logout control | Possible values:inline: As part of the headeruser-menu: As part of the user menunone: Not show the logout control Default value is inline | | breadcumbVisible | Flag to show or hide the breadcrumb | Boolean. Default value: false | | logo | Object to configure the logo of the header | Check logo configuration | | menuItems | Array of items that compose the menu of the header. | Check menu configuration | | retrieveHotelInformation | Function to retrieve the hotel information. This function has to return a promise to get the hotel | - | | retrieveUserInformation | Function to retrieve the user information. This function has to return a promise to get the hotel. You have to define this function if you want to see the user control on the menu | - | | filterHotel | Function to retrieve a list of hotel, this list will be shown in the hotel selector. This function has to return a promise to get the list of hotels. | This function has 2 parameters. user: User object with information of the userinput: String to filter the list | | locationRender | Function to render the location text | - |

All these properties are avaible for the control and the function. Control

<Header title={ 'My Application' } />

function

renderHeader(document.getElementById("header"), { title: 'My Application' }})

Logo Configuration

As part of the properties of the header, you can set the configuration of the logo. This configuration is an object where you can set some properties.

| Property | Description | - | | --- | --- | --- | | type | Type of the logo you want to use | Possible values:url: This makes the control reads url property to load the logodefault: This makes an SVG logo is rendered by the control. size property will be read to customize this logo Default value default | | size | Object to customize the SVG logo | - | | size.width | With of the SVG logo | Default value 260 | | size.height | Height of the SVG logo | Default value 52 | | size.viewBox | ViewBox of the SVG logo | Default value 0 0 524 52 | | badge | You can set a badge next to the logo to set a label. This property is an object where you can set different attributes | - | | badge.visible | Flag to show or hide the badge | Default value is false | | badge.text | Text to show into the badge | Default values is '' | | badge.backgroundColor | Background color of the badge | Default values is '' | | badge.foregroundColor | Foreground color of the badge | Default values is '' |

Menu Configuration

The menu can be configured using children of the Header control or as property in the options. In case, you want to use as propety in the options, you have to fill the property menuItems with and array of objects with following properties.

| Property | Description | | --- | --- | | id | The id of the menu. You can use this to access to the item searching by id | | title | Title of the item. You can set a i18n key because the control will try to translate it | | badgeText | You can set a badge next to the text of the item | | host | The host of the link where you want to go when click on the menu. https://www.bookassist.com | | path | The path of the link where you want to go when click on the menu. /path/to/my/page.html | | selected | Flag to know if this is a selected item | | children | Array of the items like this. This attribute makes that the item is a menu |

Menu only allows 2 levels of items.

Menu with child items is only available on Control not as function. You can see more details on Menu and Breadcrumb.

Callbacks or notification functions

There are some events that the header produces

| Event | Description | Parameters | | --- | --- | --- | | onChangeLanguage | When the user changes the language from header menu | language Language code of the new language | | onChangeHotel | When the user changes the active hotel | hotel Hotel object | | onLogout | When the user logout from header | - |

All these events are avaible for the control and the function. Control

<Header onLogout={ () => console.log('bye') } />

function

renderHeader(document.getElementById("header"), { onLogout: function() { console.log('bye') }})

Menu and Breadcrumb

The header can contains a menu and a breadcrumb. You can add them only in es6 format as children objects.

<Header>
  <Breadcrumb>
    <BreadcrumbItem name={'Home'}>
    <BreadcrumbItem name={'Vouchers'}>
  </Breadcrumb>
  <Menu
    id={'m_hotelinfo'}
    url={'https://test.bookassist.com/hotelinfo.jsp'}
    title={ 'Hotel Info' }
    selected
  >
    <MenuItem
      id={'mi_vou'}
      url={'https://test.bookassist.com/voucher.jsp'}
      text={ 'Vouchers' }
    />
    <MenuItem
      id={'mi_reviews'}
      url={'https://test.bookassist.com/review.jsp'}
      text={'Reviews'}
    />
  </Menu>
  <Menu
    id={ 'm_help' }
    url={ 'https://test.bookassit.com/help' }
    title={ 'help' }
  >
</Header>

Options

This library can be configured at global level to change the behaviour of the component. You can create a new global object called bookassist.header.config that can contain an object like

{
  "checkConfig": true,
  "api": {
    "server": "https://api.bookassist.com",
    "endpoints": {
      "i18n": "/iface/i18n",
      "hotel": "/iface/hotel",
      "group": "/sso/admin/group",
      "user": "/iface/user"
    }
  }
}