ba-js-common-header

A React-based shared header component

Installation

yarn add ba-js-common-header

Usage

// React

import { Header } from 'ba-js-common-header/dist/ba-js-common-header.es.js'

function App(props) {
    return <Header {...props} />
}

// website

<div id="header"></div>

// es5
<script src="https://unpkg.com/ba-js-common-header/dist/ba-js-common-header.umd.js"></script>
// baJsHeader global now available
<script>
  const { renderHeader } = baJsHeader
  renderHeader(document.querySelector('#header'), {
    // props
  })
</script>

// ES Modules
<script type="module">
  import { renderHeader } from 'https://unpkg.com/ba-js-common-header/dist/ba-js-common-header.es.js'
  renderHeader(document.querySelector('#header'), {
    // props
  })
</script>

Header Props

| Prop | Type | Description | Required | | :--------------------- | :---- | :--------------------------------- | :------- | | config | url | header configuration feed endpoint | Yes | | userInfo | obj | userInfo object | Yes | | userLanguage | str | default user language | No | | handleLanguageChange | fn | language selector callback | No | | handleHotelChange | fn | hotel selector callback | No | | i18nFeed | url | Jed i18n endpoint | No |

config (required)

The header configuration feed endpoint. See below for structure

userInfo (required)

The user state

{
    username, // string (required)
    hotelId, // integer (optional)
    guideId, // integer (optional)
    group, // string (optional)
}

The username is used by the header for display purposes. The hotel and guide ids are to provide for an initially selected hotel

userLanguage (optional)

The initially selected language, provided as an ISO language code (defaults to 'en')

handleLanguageChange (optional)

Callback fired on selection of a language. The callback is passed the new language code

const cb = code => {
    console.log(`The new language code is ${code}`)
}

handleHotelChange (optional)

Callback fired on selection of a hotel. The callback is passed an object containing name, hotel id and guide id

const cb = ({ name, hotelId, guideId }) => {
    console.log({ name, hotelId, guideId })
}

i18nFeed (optional)

Endpoint for Jed-based i18n feed. The url may contain a '{0}' placeholder for the current language code

const i18nFeed =
    'https://www.bookassist.com/rest/api/v1/i18n/jed/bookassist.i18n.HotelAdminRB/{0}'

Feed Structures

Config Feed (required)

The config feed is an object with 2 required properties:

const config = {
    titleBar, // required object
    menuBar, // required array
}

titleBar (required)

The titleBar property provides configuration details for the 6 available widgets in the upper half of the header (a given widget will be rendered if configuration for it exists). The property value is an object with 6 possible properties:

{
    help, // optional object
    languageSelector, // optional object
    notifications, // optional object
    product, // required object
    propertySelector, // optional object
    user, // required object
}

help (optional)

The help property provides link information for the help widget. The property value is an object with 2 required properties:

{
  label: 'Help Center', // required string
  href: 'https://go.bookassist.org/en/knowledge/booking-engine', // required string
}

languageSelector (optional)

The languageSelector property provides a language widget label and an array of available languages. The property value is an object with 2 required properties:

{
  label: 'Language', // required string
  children: [ // required array
    {
      code: 'en', // required string
    },
    {
      code: 'es', // required string
      label: 'Español', // optional string
    },
    {
      code: 'fr', // required string
    },
    // ...
  ],
}

The children array is a list of language objects. A language object consists of a required language code property and an optional label property that can be used to override the name provided by Intl.DisplayNames

notifications (optional)

{
}

product (required)

The product property denotes the current product. The property value is an object with 2 required properties:

{
  name: 'Booking Engine', // required string
  href: '/hotel_admin/spl.jsp', // required string
}

propertySelector (optional)

The propertySelector property is used to provide the list of selectable hotels. The property value is an object with 2 required properties:

{
    type, // required string (one of 'data' or 'fetch')
    items, // required array of hotels or endpoint providing said array
}

The items property value is an array of hotels or an endpoint returning such an array. Individual hotels are specified as 2-item arrays containing the hotel name and a string consisting of the hotel and guide ids separated by an underscore.

const hotels = [
    ['ADLER HOTEL', '3724_802'],
    ['Adria Hotel Prague', '1465_802'],
    ['Agroturismo Can Toni Xumeu', '3033_102'],
    // ...
]

user (required)

The user property denotes a set of user-related links. The property value is an object with 2 required properties:

{
  label: 'Profile', // required string
  children: [ // required array
    {
      label: 'Maintain Users', // required string
      href: '/hotel_admin/maintain_users.jsp', // required string
    },
    {
      label: 'Change Password', // required string
      href: '/hotel_admin/login.jsp?resetpass', // required string
    },
    {
      label: 'Log Out', // required string
      href: '/hotel_admin/logout.jsp', // required string
    },
  ],
}

The children property is a list of link objects, each with 2 required properties (label and href)

menuBar (requred)

The menuBar property provides configuration details for the lower half of the header. The property value is a flat array of menu item objects:

const menuBar = [
    {
        id, // required string
        parentId, // required for nested menu items
        label, // required string
        href, // optional link (string)
        group, // optional header for menu item grouping (string)
        premium: { // optional object outlining premium status
            value: true, // required boolean
            locked: true, // required boolean
        },
    },
    // ...
]

i18n

i18n can be optionally provided via the i18nFeed prop. The header uses Jed. If an i18n feed is specified all header labels will be treated as i18n keys and run through Jed for translation.