@mirai/core

1. Installation

The installation of the new mirai's core is very simple. You will simply have to add 2 files inside your html page.

1.1 Requirements

The first one will be our styles file for the default theme. This file only contains css variable assignments, so it will never conflict with any other css files you have. Here you have an example of how you should instantiate it:

<head>
  <link
    rel="preload"
    as="style"
    href="https://static.mirai.com/core/index.css"
    onload="this.onload=null;this.rel='stylesheet'"
  />
  ...
</head>

The next file we need is our component repository file. This JavaScript file provides an asynchronous loading system for components, so it will not influence the overall loading of your html page much. Here you have an example of how you should instantiate it:

  ...
  <script async type="module" defer src="https://static.mirai.com/core/index.js"></script>
</body>

1.2 Creating a data repository instance

Once the two main files of our new core are instantiated, we need to indicate which data repository we want to load. For this we will use an html element within our html page:

<body>
  <div data-mirai-id="501404"></div>
  ...
</body>

The attributes that we can set in this instance are:

data-mirai-id: the hotel or chain identifier.
data-type: hotel or chain instance type (default is hotel)
data-hotel: the hotel identifier (only available when data-type=chain)
data-locale: in case we want to set a different language locale than the default.
data-currency: in case we want to set a currency than the default.

Here you have an complete example using all these attributes:

<body>
  <div data-mirai-id="500255" data-type="chain" data-currency="JPY" data-locale="ja-JA"></div>
  ...
</body>

For testing purposes only, we can hydrate the instance via url parameters. Let's see an example:

https://hotel.com/endpoint?miraiId=10030559&type=chain&hotel=100376545

1.3 Environments

Our new core has different execution enviryonments. These differ for the most part in the way they have been compiled.

production (https://static.mirai.com) the bundle has been generated by minifying and obfuscating the largest code base possible.
development (https://static.mirai-int.io) the bundle has been generated in development mode with sourceMaps as well as the access to the services is also in development mode.

2. Components

To instantiate any component from the core repository we have to take into account these properties common to all components:

data-mirai-component:string: indicates the name of the component to instantiate
data-mobile:bool: if you only want to instantiate the component in a mobile environment.
data-desktop:bool: if you only want to instantiate the component in a non mobile environment.

Here you have an example of how you should instantiate it:

<div data-mirai-component="finder" data-mobile="true"></div>

Ghosting & Bindings

It should also be noted that some components may offer the ghosting system. This means that that component can receive different html markup than the default component provides. For that purpose, the data-ghost attribute must be set.

The bracket binding system serves two distinct purposes: with single brackets, component state variables can be bound, enabling the incorporation of dynamic values into UI elements. On the other hand, double brackets are used to bind keys from a dictionary, facilitating the dynamic insertion of structured data, such as predefined texts, into text templates or interfaces. These two approaches offer flexibility and modularity when developing applications, allowing for the separation of presentation logic from underlying data.

"[[common.label.greetings]], [firstName]! Welcome to our hotel."

For instance, in the text template, when processed with this system, the value associated with the dictionary key common.label.greetings will replace [[common.label.greetings]] and the state variable of the component firstName will replace [firstName].

2.1 `<BannerLoyalty>`

@todo

2.2 `<Booking>`

@todo

2.3 `<BookingQuery>`

This component shows a modal in which it asks the user for the bookingId and pinCode if both fields are correct, it redirects to the page to manage the reservation.

<div data-mirai-component="bookingQuery"></div>

This component supports ghosting.

Let's see a naive example:

<div data-mirai-component="bookingQuery">
  <button data-ghost>Booking Query</button>
</div>

2.4 `<Checkout>`

@todo

2.5 `<Deals>`

This component displays a form to be able to search for rooms with a certain offer. This form contains 3 fields:

calendar (check-in & check-out)
occupation
promocode

<div data-mirai-component="deals" data-id="293842"></div>

This component needs a data-id property that will contain the id of the offer to display.

2.6 `<Environment>`

@todo

2.7 `<Finder>`

This component displays the general accommodation search. Let's see a naive example:

<div data-mirai-component="finder"></div>

You can customize certain properties through HTML data attributes:

data-icon="true" displays an icon on the button instead of the search l10n copy.
data-inline="false" displays each of the inputs in the same format as an <InputField>.
data-layout="column" displays the component in a column layout (automatic on mobile devices).

You can also customize certain visual properties using the CSS variables exposed by the component:

--mirai-finder-background: var(--mirai-ui-base);
--mirai-finder-border: var(--mirai-ui-input-text-border);
--mirai-finder-border-color: var(--mirai-ui-content-border);
--mirai-finder-border-radius: var(--mirai-ui-border-radius);
--mirai-finder-gap: 0;
--mirai-finder-field-height: calc(var(--mirai-field-height) * 1);
--mirai-finder-padding: var(--mirai-ui-space-XS);
--mirai-finder-column-border-radius: var(--mirai-finder-border-radius);
--mirai-finder-column-padding: var(--mirai-finder-padding);
--mirai-finder-modal-content-max-height: calc(100vh - calc(var(--mirai-ui-space-XXL) + var(--mirai-ui-space-XL)));

2.8 `<Header>`

@todo

2.9 `<Profile>`

This component shows two tabs, Personal information and My bookings:

Personal information allow to logged user to manage her personal information. Also, he can change her password and delete the user.
My bookings allow to logged user to manage her bookings, even cancel the bookings.

<div data-mirai-component="profile"></div>

2.10 `<Rates>`

@todo

Currently, it is in a state of WIP (Work In Progress), so a mechanism for customizing rate results via URL has been implemented. To do this, we will need to use the features URL parameter. The possible values it can receive are:

showAllBoards: Displays all available boards (only those belonging to the active rate are active).
showAllOffers: Displays all available offers (only those belonging to the active cancellation are active).
showClubDiscount: Shows the loyalty tooltip information on the first render.
showOffersFirst: This feature completely changes the functionality of the card. We change the selection order to offer + board. Let's remember that the default selection process is cancellation + offer + board.
showRateIncluded: This feature allows displaying the inclusions of each rate without needing to be encapsulated in a tooltip.

Here's a usage example:

http://....&features=showOffersFirst,showClubDiscount

Note that you can combine multiple features by simply separating them within the features URL parameter using the comma character ,.

2.11 `<Session>`

This component has two behaviors. If the user is not logged in, show an action button that displays a modal for login. If the user is logged show a menu with two options: Personal information, and My bookings.

<div data-mirai-component="session"></div>

This component supports ghosting. If we put only one html, it will be used for the Login component. In the another case, the component requires two different html files, one for the Login and another one for the Logged-in/Account.

<div data-mirai-component="session">
  <div data-ghost>
    <div data-ghost>
      {/* Session.Login */}
      <span>[[common.action.login]]</span>
      {/* Session.Account */}
    </div>
  </div>
</div>

In this example we replace the html markup with a <button> with the content Login Here

<div data-mirai-component="session">
  <div data-ghost>
    <p class="login">Login Here</p>
    <p class="account">Account</p>
  </div>
</div>

In this example we replace the html markup with 2 <p>, the first one for Login and the second for Account

We can also bind the elements of the session. Example:

<div data-mirai-component="session">
  <div data-ghost>
    <p class="login">Login</p>
    <p class="account">[firstName] [lastName] - [email] - ExampleText</p>
  </div>
</div>

2.12 `<Signup>`

@todo

2.13 `<ButtonFinder>`

This component is designed to encapsulate the finder component within a modal, which becomes visible when the button is pressed. This component is useful for situations where you want to present a search interface discreetly, without taking up space in the main interface until needed.

<div data-mirai-component="button-finder"></div>

Similar to other components, supports ghosting.

<div data-mirai-component="session">
  <div data-ghost>
    <button data-ghost>[[common.action.reserve]]</button>
  </div>
</div>

The data-text property allows you to change the caption of the button. This provides flexibility to customize the button text based on your needs.

<div data-mirai-component="button-finder" data-text="Start Search"></div>

3. Development

You have to follow the next steps:

Install node.js and yarn.
Clone the project with SSH git@gitlab.com:miraicorp/front/core.git or HTTPS https://gitlab.com/miraicorp/front/core.git.
In the project, execute yarn command. This command install the dependencies.
Change the file env.development to put the service url that you want.
Add to local.mirai.com to hosts file and keep free 8080 port. Or you can change the file /scripts/start.js to choose the port and host that you want.
Execute yarn start command.
You can manage the hotel that you want to test with the miraiId param. For example, for the Hotel Moderno, you need to type the next in the navigator url: http://local.mirai.com:8080/?miraiId=10030559. If you want to test a chain, you need add the param type=chain. For example, for Garden, the url is http://local.mirai.com:8080/?miraiId=501404&type=chain.
You can access to Checkout (Client form) and Booking (Manage reservation) directly with the next urls http://local.mirai.com:8080/step2-checkout and http://local.mirai.com:8080/step3-booking. Add miraiId param and the params of Client Form url or Manage reservation url to test.

@mirai/core

@mirai/core

1. Installation

1.1 Requirements

1.2 Creating a data repository instance

1.3 Environments

2. Components

Ghosting & Bindings

2.1 `<BannerLoyalty>`

2.2 `<Booking>`

2.3 `<BookingQuery>`

2.4 `<Checkout>`

2.5 `<Deals>`

2.6 `<Environment>`

2.7 `<Finder>`

2.8 `<Header>`

2.9 `<Profile>`

2.10 `<Rates>`

2.11 `<Session>`

2.12 `<Signup>`

2.13 `<ButtonFinder>`

3. Development

Dependents (1)

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

@mirai/core

@mirai/core

1. Installation

1.1 Requirements

1.2 Creating a data repository instance

1.3 Environments

2. Components

Ghosting & Bindings

2.1 <BannerLoyalty>

2.2 <Booking>

2.3 <BookingQuery>

2.4 <Checkout>

2.5 <Deals>

2.6 <Environment>

2.7 <Finder>

2.8 <Header>

2.9 <Profile>

2.10 <Rates>

2.11 <Session>

2.12 <Signup>

2.13 <ButtonFinder>

3. Development

Dependents (1)

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

2.1 `<BannerLoyalty>`

2.2 `<Booking>`

2.3 `<BookingQuery>`

2.4 `<Checkout>`

2.5 `<Deals>`

2.6 `<Environment>`

2.7 `<Finder>`

2.8 `<Header>`

2.9 `<Profile>`

2.10 `<Rates>`

2.11 `<Session>`

2.12 `<Signup>`

2.13 `<ButtonFinder>`

Weekly Downloads