# Public Booking Versioning
You can configure the application to be run using a specific UI Version.
In the widget just create a new JSON file under the config folder and paste the following code:

```javascript
{
  "general": {
    "publicBookingVersion": 2
  }
}
```
In this way you've just set the application to run the UI Version 2.

## Template Version
For each step of the public booking you can set a different template variant; just add the `layoutVariant: <NUMBER>` field
to the route configuration.

## V2
In order to use the Public Booking V2 a new main.scss file has been created: it's called main_v2.scss and it's under the
public-booking folder itself.
It imports the libraries we need and defines some helpers/classes/utilities.

### _stylesheets/v2
You will find some files under this folder, created specifically for the version 2 of the SDK/PublicBooking.

#### buttons
- `.btn-primary` is used for the primary buttons across the entire application
- `.btn-back` is used for the back button in the navigation bar
- `.btn-link` displays a link as a button (with padding)

#### layouts
We're currently using just one layout called `.two-columns` and it displays two columns as a row on desktops and as a list on mobile

```html
<div class="two-columns">
    <div class="two-columns__main">
        The main content rendered on the left on desktop and on top on mobile
    </div>
    <div class="two-columns__side">
        The side content rendered on the right side on desktop and underneath on mobile
    </div>
</div>
```


#### mixins
- `@include mobile-only` media query to behave specifically just on mobiles
- `@include desktop` media query to behave specifically on large screens
- `@include center-v` to vertically center a content within its parent. Please note parent must have a `position:relative` rule set

##### mixins/accordion
In order to use this mixin and display an accordion CSS only built you need to use a strict structure for your HTML

```html
<div class="company">
    <label for="company-1">
        <div>
            <h4 class="company__name">A company name</h4>
            <input class="company__toggle" id="company-1" type="radio" name="companies"/>
            <div class="company__data data">
                <div class="data__details">
                    Some details
                </div>

                <div class="data__description">
                    <p>Some description</p>
                </div>
            </div>
        </div>
    </label>
</div>
```

Please pay attention on the main element which is a `label`;
What you must have inside this `label` is the __toggle (base the class name on the parent class name):
it must be an `input` which specifies the type (radio for one open only box accordion or checkbox for multiple open boxes accordion) and the name.

You need also to wrap the content of your boxes inside a `data`

```scss
.company {
    @include accordion;
}
```

### v2 folders
You will find some v2 folders across the entire application as sub-folders.
Put your .html, .scss and .js files there to ensure to use them only when a v2 application is running.

#### basket-item-list
> _see basket-summary/v2/basket-summary.html_

A component which renders the items in the basket.
It accepts the `basket_items` object/array and the `client` object (optional)

```html
<basket-item-list basket-items="basket_items" client="client"></basket-item-list>
```

The .js file under this folder just imports the old directive and controller in order to work

#### basket-item-summary
> _see checkout/v2/checkout.html_

A component which renders a panel with a summary of the current basket.
It accepts the `bb.current_item` and the `type` of the item itself (can be a service or an event)

```html
<basket-item-summary basket-item="bb.current_item" type="service"></basket-item-summary>
```

#### mapFor
> _see basket-summary/v2/basket-summary.html_

A directive (restricted to attributes) which instantiates a Google Map object and draws markers
It accepts the object/array which contain companies with addresses (lat and long needed)

```html
<div id="map" map-for="basket_items"></div>
```


### version folder
This folder contains two directives and a service to handle the application versioning.

#### bb_ui_version.directive
> _see map/v2/map.html_

Use this directive to manage the ui-version and the variants for each layout:

```html
<div bb-ui-variant="map" class="map step" variants="3">
```

You have to specify the step/page name and its variants. **Related to bb_variants_switcher**

#### bb_ui_version.service
It gets and sets the current version and can be used to retrieve it even outside the Angular lifecycle.

> IT WORKS BUT STILL WIP

#### bb_variants_switcher
A directive which renders a switcher at the bottom-right to switch between the given variants
**IMPORTANT: it is rendered only in dev mode**


### loader
There's a new loader in the v2 which should replace the old one. 

```javascript
/* 
 * this loader will block the UI as it is meant to be used when a long
 * operation is performed 
 */
const loader = new LoaderService();
loader.show();

/*
 * this one will be shown contextually to a specific node. 
 * Best usage when only a part of the current page needs to be loaded
 */  
const loader1 = new LoaderService(document.getElementById('ablock'));
loader1.show();
```

`LoaderService` exposes also the `hide()` method and the `remove()` method.
There's also a static method `LoaderService.removeAll()` which removes all the instances. 

## In your widget
In your widget just create a main<version>.scss file in the public folder and import `@import "~bookingbug-angular/src/public-booking/main_v2";`

Then, for each route, set the layoutVariant field to use a different template variant.

**IMPORTANT**: Do not forget to add a name to your steps in the set route {name: stepname}, since we have now a way to edit the current basket from the basket summary step