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/ba-styles@0.0.13/dist/ha-styles.css">
<script type="text/javascript" src="https://unpkg.com/@bookassist/ba-header@0.0.9-rc18/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 title title: Use pageTitle property as page title hotelNameOrTitle: Use the name of the hotel or pageTitle in case that it cannot retrieve the hotel none: Not show page title block Default values is none
langControl	The way to show the language selector	Possible values: menu: Show as overlay layer dropdown: Show as dropdown control none: Not show language selector Default value is none
hotelChangeControl	How to show the hotel change control	Possible values: inline: As part of the header none: Not show the hotel change control Default value is none
logoutControl	How to show the logout control	Possible values: inline: As part of the header user-menu: As part of the user menu none: 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 user input: 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 logo default: 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"
    }
  }
}