npm - @mirai/core - Versions diffs - 0.4.16 → 0.4.18 - Mend

@mirai/core 0.4.16 → 0.4.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (137) hide show

package/README.md CHANGED Viewed

@@ -2,11 +2,11 @@
 # 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.
+Installing Mirai's new core is straightforward. You'll only need to include two files in 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:
+The first file is the stylesheet for the default theme. This file contains only CSS variable assignments, ensuring that it won't conflict with any existing styles in your project. Here’s how to include it:
 ```html
 <head>
@@ -20,7 +20,7 @@ The first one will be our styles file for the default theme. This file only cont
 </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:
+The second file is the component repository JavaScript. This file provides an asynchronous loading system for the components, so it minimally impacts your page’s loading performance. Here’s an example:
 ```html
   ...
@@ -30,7 +30,7 @@ The next file we need is our component repository file. This JavaScript file pro
 ## 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:
+Once the two core files are included, you’ll need to specify the data repository you want to load. This is done by adding an HTML element to your page:
 ```html
 <body>
@@ -39,15 +39,15 @@ Once the two main files of our new core are instantiated, we need to indicate wh
 </body>
 ```
-The attributes that we can set in this instance are:
+You can configure this instance with the following attributes:
-- `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.
+- `data-mirai-id`: The hotel or chain identifier.
+- `data-type`: Type of instance (default is `hotel`)
+- `data-hotel`: Hotel identifier (only used when `data-type=chain`)
+- `data-locale`: Specify a locale if different from the default language.
+- `data-currency`: Specify a currency if different from the default.
-Here you have an complete example using all these attributes:
+Here’s a complete example with all the attributes:
 ```html
 <body>
@@ -56,7 +56,7 @@ Here you have an complete example using all these attributes:
 </body>
 ```
-For testing purposes only, we can hydrate the instance via url parameters. Let's see an example:
+For testing, you can also hydrate the instance using URL parameters. Here’s an example:
 ```
 https://hotel.com/endpoint?miraiId=10030559&type=chain&hotel=100376545
@@ -64,20 +64,20 @@ 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.
+Mirai’s new core supports multiple execution environments, primarily differing in how the code is 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.
+- `Production` (https://static.mirai.com) This bundle is optimized, with code minified and obfuscated for maximum performance.
+- `Development` (https://static.mirai-int.io) This bundle is generated in development mode with source maps, and services are 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:
+To instantiate any component from the core repository, there are a few common properties you need to be aware of:
-- `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.
+- `data-mirai-component:string`: Specifies the name of the component to instantiate.
+- `data-mobile:bool`: Indicates if the component should only be instantiated in a mobile environment.
+- `data-desktop:bool`: Indicates if the component should only be instantiated in a non-mobile environment.
-Here you have an example of how you should instantiate it:
+Here’s an example of how to instantiate a component:
 ```html
 <div data-mirai-component="finder" data-mobile="true"></div>
@@ -85,35 +85,43 @@ Here you have an example of how you should instantiate it:
 ### 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.
+Some components support a ghosting system, which allows them to receive different HTML markup than their default configuration. To enable this, you must set the data-ghost attribute.
-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.
+Additionally, the bracket binding system provides two different functionalities:
+- **Single brackets**: Used for binding component state variables, allowing dynamic values to be inserted into UI elements.
+- **Double brackets**: Used to bind dictionary keys, making it easy to inject structured data, such as predefined text, into templates or UI components.
+This system is useful for separating presentation logic from data and allows for more flexibility when developing components.
+Example of bracket binding:
 ```html
 "[[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>`
+In this example, `[[common.label.greetings]]` will be replaced by the value from the dictionary associated with the key common.label.greetings, while `[firstName]` will be replaced by the component’s state variable firstName.
-@todo
+## 2.1 `<Booking>`
-## 2.2 `<Booking>`
+The `<Booking>` component provides a summary view of a specific reservation. Its implementation is very simple. You only need to add the following to your webpage:
-@todo
+```html
+<div data-mirai-component="booking"></div>
+```
-## 2.3 `<BookingQuery>`
+## 2.2 `<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.
+The `<BookingQuery>` component displays a modal where the user is prompted to enter a `bookingId` and `pinCode`. If both fields are correct, the user is redirected to the reservation management page.
 ```html
 <div data-mirai-component="bookingQuery"></div>
 ```
-This component supports _ghosting_.
+This component supports _ghosting_, allowing you to customize the HTML structure.
-Let's see a naive example:
+Here’s a simple example:
 ```html
 <div data-mirai-component="bookingQuery">
@@ -121,99 +129,268 @@ Let's see a naive example:
 </div>
 ```
-## 2.4 `<Checkout>`
+## 2.3 `<ButtonFinder>`
+The `<ButtonFinder>` component encapsulates the finder component within a modal, which becomes visible when the button is pressed. This is ideal for scenarios where you want to display a search interface only when necessary, keeping the main interface clean and uncluttered.
+```html
+<div data-mirai-component="button-finder"></div>
+```
+Like other components, it supports ghosting, allowing customization of the button or other UI elements.
+Here’s an example:
+```html
+<div data-mirai-component="session">
+  <div data-ghost>
+    <button data-ghost>[[common.action.reserve]]</button>
+  </div>
+</div>
+```
-@todo
+Additionally, the data-text property lets you customize the button’s label, offering flexibility to adapt the button text to your needs.
+```html
+<div data-mirai-component="button-finder" data-text="Start Search"></div>
+```
+## 2.4 `<Chat>`
+The `<Chat>` component is one of the new additions to the Mirai library. It allows you to instantiate a chat system powered by a virtual agent using artificial intelligence. This assistant can handle most of the Mirai suite's functionalities through conversational interactions.
+```html
+<div data-mirai-component="chat"></div>
+```
+At Mirai, we prioritize the customization of our components to ensure they seamlessly integrate with your website's design. To facilitate this, we provide a set of CSS variables that allow you to modify most visual aspects of the `<Chat>` component.
+Here’s an example of the CSS variables available for customization:
+```css
+/* colors */
+--mirai-chat-accent: var(--mirai-ui-accent);
+/* commons */
+--mirai-chat-border-color: var(--mirai-ui-content-border);
+--mirai-chat-border-radius: var(--mirai-ui-space-S);
+--mirai-chat-border-size: 1px;
+--mirai-chat-space: var(--mirai-ui-space-M);
+--mirai-chat-motion-collapse: 200ms;
+--mirai-chat-motion-expand: 300ms;
+--mirai-chat-motion-easing: cubic-bezier(0.1, 0.1, 0.25, 0.9);
+/* text */
+--mirai-chat-text-accent-color: rgba(255, 255, 255, 0.95);
+--mirai-chat-text-color: #222;
+--mirai-chat-text-color-light: #999;
+--mirai-chat-text-font-size: var(--mirai-ui-font-size-action);
+--mirai-chat-text-font-weight: 500;
+--mirai-chat-text-line-height: var(--mirai-ui-line-height-action);
+/* <Chat> */
+--mirai-chat-base: var(--mirai-ui-base);
+--mirai-chat-base-opacity: rgba(255, 255, 255, 0.8);
+--mirai-chat-box-shadow: 0 0 var(--mirai-ui-space-S) rgba(0, 0, 0, 0.1);
+--mirai-chat-height: 606px;
+--mirai-chat-layer: var(--mirai-ui-layer-XL);
+--mirai-chat-max-height: 90svh;
+--mirai-chat-width: calc(var(--mirai-ui-breakpoint-S) - var(--mirai-ui-space-XXL));
+/* header */
+--mirai-chat-header-height: calc(var(--mirai-ui-space-XL) + var(--mirai-ui-space-M));
+--mirai-chat-header-background: linear-gradient(0deg, var(--mirai-chat-base-opacity) 0%, var(--mirai-chat-base) 100%);
+/* <Input> */
+--mirai-chat-input-background: var(--mirai-ui-content-background);
+--mirai-chat-input-border-color: var(--mirai-chat-border-color);
+/* <Message> */
+--mirai-chat-message-background: transparent;
+--mirai-chat-message-offset: calc(var(--mirai-chat-space) / 1.5) var(--mirai-chat-border-radius);
+/* <Avatar> */
+--mirai-chat-avatar-background: #222;
+--mirai-chat-avatar-color: #fff;
+--mirai-chat-avatar-border-radius: 40%;
+```
+These CSS variables offer a wide range of customization options, from changing colors and borders to adjusting text and layout. By using them, you can tailor the `<Chat>` component to fit perfectly within the design of your website.
+## 2.5 `<Checkout>`
+The `<Checkout>` component is the main reservation window, where users can enter their personal details, choose payment methods, and set notifications for the hotel. It also provides a summary of the reservation before the user proceeds with the booking process.
+```html
+<div data-mirai-component="checkout"></div>
+```
-## 2.5 `<Deals>`
+## 2.6 `<Deals>`
-This component displays a form to be able to search for rooms with a certain offer. This form contains 3 fields:
+The `<Deals>` component displays a form that allows users to search for rooms with a specific offer. This form contains three fields:
-- `calendar` (check-in & check-out)
-- `occupation`
-- `promocode`
+- `calendar` (check-in & check-out dates)
+- `occupation` (number of guests)
+- `promocode` (optional promotional code)
 ```html
 <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.
+This component requires a data-id attribute, which contains the ID of the offer to be displayed.
-## 2.6 `<Environment>`
+Additionally, like other components, the `<Deals>` component offers some light visual customization through CSS variables:
-@todo
+```css
+--mirai-deals-modal-z-index: 601;
+--mirai-deals-notification-max-width: calc(var(--mirai-ui-calendar-cell) * 14 + var(--mirai-ui-calendar-padding) * 2);
+```
+## 2.7 `<Environment>`
-## 2.7 `<Finder>`
-This component displays the general accommodation search. Let's see a naive example:
+The `<Environment>` component allows you to modify the environment in which the other Mirai components are running. The environment is defined as the combination of language and currency. This component lets you adjust three properties:
+- `data-currency:bool`: Controls the visibility of the currency selector (true/false).
+- `data-locale:bool`: Controls the visibility of the language selector (true/false).
+- `data-state:bool`: Controls the visibility of the current state data (true/false).
+Here’s an example of its implementation:
+```html
+<div data-mirai-component="environment" data-currency="true" data-locale="true"></div>
+```
+## 2.8 `<Finder>`
+The `<Finder>` component displays the general accommodation search interface. Here’s a basic example:
 ```html
 <div data-mirai-component="finder"></div>
 ```
-You can customize certain properties through HTML data attributes:
+You can customize specific properties using 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).
+- `data-icon="true"`: Displays an icon on the button instead of the localized search text.
+-	`data-inline="false"`: Displays each input in the same format as an `<InputField>`.
+- `data-layout="column"`: Displays the component in a column layout (automatically applies on mobile devices).
-You can also customize certain visual properties using the CSS variables exposed by the component:
+You can also adjust various visual properties using the CSS variables exposed by the component:
 ```css
 --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-button-background: var(--mirai-ui-button-background);
+--mirai-finder-button-focus-color: var(--mirai-ui-button-focus-color);
+--mirai-finder-button-font-family: var(--mirai-ui-font);
+--mirai-finder-button-font-size: inherit;
+--mirai-finder-button-font-weight: var(--mirai-ui-button-font-weight);
 --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)));
+--mirai-modal-max-height: calc(100svh - var(--mirai-ui-space-XXL));
+```
+Additionally, you can visually customize three fields within this component:
+- Hotel
+- Date
+- Occupation
+The following CSS variables are available for customization:
+```css
+--mirai-places-item-height: 32px;
+--mirai-places-item-width: 300px;
+--mirai-places-item-background-selected: var(--mirai-ui-accent);
+--mirai-places-item-color-selected: var(--mirai-ui-base);
+--mirai-places-padding: var(--mirai-ui-space-M);
+--mirai-places-items-per-column: 9;
+--mirai-finder-calendar-padding: var(--mirai-ui-space-M);
+--mirai-occupation-scrollview-max-height: 340px;
+--mirai-occupation-width: 320px;
 ```
-## 2.8 `<Header>`
+These variables allow you to control the padding, dimensions, and other styling aspects of the calendar, occupation selector, and places fields, offering greater flexibility to align the component with your website’s design.
+## 2.9 `<Header>`
+The `<Header>` component is another new addition to the Mirai component suite. It allows you to create a header for your pages that can include:
-@todo
+- The hotel logo and/or name
+- The status of the booking process (e.g., Choose, Personal Details, Confirmation)
+- A language selector
+- A currency selector
+- Access to the user session
-## 2.9 `<Profile>`
+Some of these elements are automatically managed within the Mirai component. However, you can control certain elements using the following HTML attributes:
-This component shows two tabs, Personal information and My bookings:
+- `data-currency:bool`: Displays the currency selector.
+- `data-locale:bool`: Displays the language selector.
+- `data-login:bool`: Displays the session login button.
+- `data-name:bool`: Displays the hotel name.
-- 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.
+Here’s an example of how you might implement the component:
 ```html
-<div data-mirai-component="profile"></div>
+<div data-mirai-component="header" data-currency="true" data-locale="true"></div>
 ```
-## 2.10 `<Rates>`
+## 2.10 `<Profile>`
-@todo
+The `<Profile>` component displays two tabs: Personal Information and My Bookings.
-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:
+- **Personal Information**: Allows the logged-in user to manage their personal details, change their password, and delete their account.
+- **My Bookings**: Allows the logged-in user to manage their bookings, including the option to cancel bookings.
-- `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 how to implement the component:
-Here's a usage example:
+```html
+<div data-mirai-component="profile"></div>a-mirai-component="profile"></div>
+```
+## 2.11 `<Rates>`
+The `<Rates>` component is used for selecting rooms and rates. It includes a feature/flag system that allows you to customize the visibility and layout of various elements through URL parameters. The possible values it can receive are:
+- `columnMode`: Displays the results in two columns.
+- `hideRadio`: Hides the radio input and replaces it with a button.
+- `hideStandaloneBoard`: If only one accommodation type is available, it will not be displayed.
+- `highlightStandaloneOption`: Highlights when only one option exists per category.
+- `rowMode`: Displays the results in a row layout.
+- `showAllBoards`: Displays all available boards (only the boards belonging to the active rate are selectable).
+- `showAllOffers`: Displays all available offers (only the offers belonging to the active cancellation are selectable).
+- `showMaxOccupation`: Displays the maximum room occupancy.
+- `showOffersFirst`: Changes the selection process to offer + board. The default process is cancellation + offer + board.
+- `showPreviewPrice`: Displays a total price summary in the footer.
+- `showPricePerNight`: Displays prices per night.
+- `showRateIncluded`: Displays the inclusions of each rate without using a tooltip.
+Here’s an example of how to use it:
 `http://....&features=showOffersFirst,showClubDiscount`
-> Note that you can combine multiple features by simply separating them within the `features` URL parameter using the comma character `,`.
+> Note: You can combine multiple features by separating them in the `features` URL parameter using a comma `,`.
-## 2.11 `<Session>`
+## 2.12 `<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.
+The `<Session>` component has two behaviors. If the user is not logged in, it shows an action button that opens a login modal. If the user is logged in, it displays a menu with two options: Personal Information and My Bookings.
 ```html
 <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.
+This component supports _ghosting_. If only one HTML structure is provided, it will be used for the login component. Alternatively, two different HTML structures can be used: one for the login view and another for the logged-in/account view.
+Here’s an example:
 ```html
 <div data-mirai-component="session">
@@ -227,7 +404,7 @@ This component supports _ghosting_. If we put only one html, it will be used for
 </div>
 ```
-> In this example we replace the html markup with a `<button>` with the content `Login Here`
+In this example, we replace the default HTML markup with a button containing the text `Login Here`:
 ```html
 <div data-mirai-component="session">
@@ -238,9 +415,7 @@ This component supports _ghosting_. If we put only one html, it will be used for
 </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:
+In this example, we replace the markup with two `<p>` elements, one for login and one for account:
 ```html
 <div data-mirai-component="session">
@@ -251,34 +426,28 @@ We can also bind the elements of the session. Example:
 </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.
-```html
-<div data-mirai-component="button-finder"></div>
-```
-Similar to other components, supports ghosting.
+You can also bind session elements to dynamic data, like this:
 ```html
 <div data-mirai-component="session">
   <div data-ghost>
-    <button data-ghost>[[common.action.reserve]]</button>
+    <p class="login">Login</p>
+    <p class="account">[firstName] [lastName] - [email] - ExampleText</p>
   </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.
+This allows you to display personalized information for the logged-in user, such as their name or email.
+## 2.13 `<Signup>`
+The `<Signup>` component displays the registration form for the Mirai platform.
 ```html
-<div data-mirai-component="button-finder" data-text="Start Search"></div>
+<div data-mirai-component="signup"></div>
 ```
 # 3. Development
 You have to follow the next steps:

package/__tests__/BookingQuery/workflows/login.workflow.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { expect } from '@playwright/test';
 export const login = async ({ id, page, pinCode, testId, wait = true } = {}) => {
-  await expect(page.locator('form')).not.toBeVisible();
+  await expect(page.locator('ui-form')).not.toBeVisible();
   await page.getByTestId(`${testId}-button-open-modal`).click();
-  await expect(page.locator('form')).toBeVisible();
+  await expect(page.locator('ui-form')).toBeVisible();
   await expect(page.getByTestId(`${testId}-button-cta`)).toHaveAttribute('disabled');
   await page.getByTestId(`${testId}-input-id`).click();

package/__tests__/Checkout/workflows/form.workflow.js CHANGED Viewed

@@ -1,17 +1,17 @@
 import { USER } from '../../constants';
 export const form = async ({ page }) => {
-  await page.fill('ui-checkout form input[name="firstName"]', USER.firstName);
-  await page.fill('ui-checkout form input[name="lastName"]', USER.lastName);
-  await page.fill('ui-checkout form input[name="email"]', USER.email);
-  await page.locator('ui-checkout form select[name="phone-prefix"]').selectOption(USER.phone.prefix);
-  await page.fill('ui-checkout form input[name="phone-phone"]', USER.phone.number);
-  await page.fill('ui-checkout form textarea[name="comments"]', 'Will arrive between 1-2pm');
+  await page.fill('ui-checkout ui-form input[name="firstName"]', USER.firstName);
+  await page.fill('ui-checkout ui-form input[name="lastName"]', USER.lastName);
+  await page.fill('ui-checkout ui-form input[name="email"]', USER.email);
+  await page.locator('ui-checkout ui-form select[name="phone-prefix"]').selectOption(USER.phone.prefix);
+  await page.fill('ui-checkout ui-form input[name="phone-phone"]', USER.phone.number);
+  await page.fill('ui-checkout ui-form textarea[name="comments"]', 'Will arrive between 1-2pm');
   // additional request
-  await page.fill('ui-checkout form input[name="additionalRequest.34486.nameKey"]', 'additionalRequest.34486');
+  await page.fill('ui-checkout ui-form input[name="additionalRequest.34486.nameKey"]', 'additionalRequest.34486');
   // User submits but forgots privacy policy
   await page.getByTestId('checkout-button').click();
   await page.waitForSelector('ui-notification-error', { state: 'visible' });
-  await page.locator('ui-checkout form input[name="privacyPolicy"]').check();
+  await page.locator('ui-checkout ui-form input[name="privacyPolicy"]').check();
 };