Nubreed Client

This is the code for the nubreed hotel booking widget. It is deployed via NPM

(View it on NPM)[https://www.npmjs.com/package/nubreed] (View it on JSDelivr)[https://cdn.jsdelivr.net/npm/nubreed/index.js]

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

What things you need to install the software and how to install them

NodeJS > 10.x.x

Installing

To run the widget locally check the root of this project for the example website.

Alternatively the widget can be installed to any website in the following ways

Method 1: Via NPM

npm i nubreed --save

const nubreed = require('nubreed')

Method 1: Via JSDelivr This service automatically takes the latest distribution in NPM, you can also specify which versions

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/index.js"/>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/nubreed/index.js"/>

Deployment

To deploy to the two above urls you need to create a bundle and publish to npm.

    - adjust /widget/lib/package.json with a new version number.
    - run ``npm run deploy`` from /widget.

Usage

    nubreed(document.getElementById('yourElementId'), {
        apiKey: 'Test', // The API key corresponding to the event
        initialZoomLevel: 12, // starting map zoom level https://docs.mapbox.com/help/glossary/zoom-level/
        theme: {}, // Nubreed theme options
    });

Theme

The nubreed widget can be themed using the theme object, default values can be found in default-theme.js

    {
        animationLength: 2000, // How long to animate the voucher transition
        primary: '#D6E124', // The primary colour
        primaryLight: 'rgba(214,225,36,0.2)', // A light variation of the primary colour
        text: '#0E1C2C',  // The overall widget text colour
        primaryButtonText: '#0E1C2C', // The button text colour
        fontFamily: 'Roboto, sans-serif', // The font-family css property value, the widget will not download fonts from google fonts / typekit, this must be done on the event website.
        fontHeaderFamily: 'Helvetica', // The font-family for headers
        iconColour: '#e2e2e2', // the icon colour
        logo: 'https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg', // The logo of the venue to be displayed on the map
        error: '#ED145A', // The colour of any error messaging
    }

The theme object is accessible globally within the widget via NUBREED_THEME.

Built With

• React
• MapBox
• Braintree
• Webpack
• Sass

Braintree and Mapbox are not bundled into the distribution in order to cut down on the widget file size, instead they are loaded dynamically via import-promise.js.

Project structure

/index.js

This is the entry point for the widget and where the nubreed function can be found. This file performs the following functions

• Generates a stylesheet, setting the font family for the widget body and header as defined in your theme object
• Renders the application to the supplied element

/src/App.js

This is the root element of the application, this element initialises the map and fetches the event information. Depending on the state of this component it will either render the hotel list screen or a hotel detail screen.

/util

Anything that can be reused in terms of business logic and functionality is stored within this folder:

• _data.js: exposes get,put,post and delete functions to provide standard REST functionality.
• constants.js: any enums / constants are stored here to prevent magic values, this file also provides a way to simulate different states of the application (e.g. triggering a hotel price change).
• project.js: contains environment variables such as the API url, braintree and mapbox keys
• util.js: common util functions and formatting helpers

/styles

Styles within the project are designed in such a way to prevent styles bleeding out into websites and in from websites. To do this we conform to the following concepts:

• all classes should be prefixed with nubreed, any generic classes e.g. .text-large have the possibility to affect a websites markup where they share the same class name.
• We avoid the use of buttons, li, ul's and use divs wherever possible. It is very likely that a website will target elements and apply generic styles which would affect the nubreed widget.
• Where applicable we apply css resets, i.e. setting each css property to a suitable default value.
• Any dynamic styles that require the use of the nubreed theme object are implemented with inline styles, e.g. <div style={{color:__NUBREED_THEME__.primary}}/>

/screens

This contains the navigation screens as well as the booking form and booking confirmation.

/images

This contains any images embedded into the widget. Images are converted automatically to base64 at compile-time by Webpack, to use images do the following:

<img src={require('./path/to/image.png')}/>

/controllers

Controllers are used to separate and abstract away functionality from the markup within pages and components:

• booking-controller: manages the braintree functionality

• data-controller: exposes functions that communicate with the nubreed api (e.g. fetching hotels and event data)

• map-controller: exposes helper functions for interacting with mapbox

/components

Components are reusable pieces of markup that are used throughout the widget