> ## Documentation Index
> Fetch the complete documentation index at: https://directdoc.hotellinkage.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Finder

# Finder

Main accommodation search interface allowing guests to input dates, occupancy, and destination.

<Note>
  🔍 **Component type:** Search interface | **Connects to:** `/booking-rooms` page with `<rates>` component
</Note>

## Basic Implementation

Add the search component to your page:

```html theme={null}
<div data-mirai-component="finder"></div>
```

## Property Types

The finder form adapts based on your data repository configuration:

<Tabs>
  <Tab title="Individual Hotel">
    **Configuration:** `data-type="hotel"` (default)

    Shows basic search fields:

    * Check-in/check-out dates
    * Occupancy (adults/children)
    * Promotional code

    Associated with the hotel specified in `data-mirai-id`
  </Tab>

  <Tab title="Hotel Chain">
    **Configuration:** `data-type="chain"`

    Includes additional field:

    * Destination selector dropdown
    * All basic search fields

    User selects a hotel within the chain before searching
  </Tab>
</Tabs>

## Layout Options

<CardGroup cols={2}>
  <Card title="data-layout" icon="layout">
    **Options:** `inline` | `column` | `expand`

    * `inline` (default): Horizontal fields
    * `column`: Vertical stacking
    * `expand`: Full parent width (inline only)
  </Card>

  <Card title="data-icon" icon="search">
    **Options:** `false` | `true`

    * `false` (default): Text button
    * `true`: Magnifying glass icon
  </Card>
</CardGroup>

### Layout Examples

```html theme={null}
<!-- Vertical layout -->
<div data-mirai-component="finder" data-layout="column"></div>

<!-- Full width with icon -->
<div data-mirai-component="finder" data-layout="expand" data-icon="true"></div>

<!-- Vertical with icon (expand ignored) -->
<div data-mirai-component="finder" data-layout="column" data-icon="true"></div>
```

<Warning>
  The `data-layout="expand"` attribute only works with `inline` layout. It has no effect when combined with `column`.
</Warning>

## Device-Specific Display

Control component visibility based on device type:

<CardGroup cols={2}>
  <Card title="data-mobile" icon="smartphone" color="#10b981">
    **Options:** `true` | `false`

    `true`: Shows only on mobile devices\
    `false` (default): No mobile restriction
  </Card>

  <Card title="data-desktop" icon="monitor" color="#0ea5e9">
    **Options:** `true` | `false`

    `true`: Shows only on desktop\
    `false` (default): No desktop restriction
  </Card>
</CardGroup>

### Responsive Examples

```html theme={null}
<!-- Mobile only -->
<div data-mirai-component="finder" data-mobile="true"></div>

<!-- Desktop only -->
<div data-mirai-component="finder" data-desktop="true"></div>

<!-- Show on all devices (default) -->
<div data-mirai-component="finder"></div>
```

<Note>
  **Automatic Mobile Optimization:** The finder automatically switches to a compact, touch-friendly layout on small screens without requiring configuration.
</Note>

## JavaScript Events

Interact with the finder component programmatically:

<Tabs>
  <Tab title="Set Values">
    ### Publishing setStore Event

    Programmatically set form values:

    ```javascript theme={null}
    window.Mirai.Event.publish('setStore', {
      chainSelectorValue: 111222,           // Hotel/chain ID (chain mode)
      calendar: [new Date(), new Date()],   // Check-in/out dates
      hsri: '02080',                       // Optional unique ID
      occupation: [                        // Occupancy details
        { ages: [null, null], amount: 2, type: 2 },  // 2 adults
        { ages: [3], amount: 1, type: 3 },           // 1 child, age 3
      ],
      promocode: 'TEST',                   // Promotional code
    });
    ```

    <Info>
      Send any combination of fields. Omitted fields remain unchanged.
    </Info>
  </Tab>

  <Tab title="Listen to Changes">
    ### Subscribing to finderChange Event

    Detect when users modify form fields:

    ```javascript theme={null}
    window.Mirai.Event.subscribe('finderChange', ({ field, previousValue, value } = {}) => {
      console.log(`Modified field: ${field}`);
      console.log(`Previous value: ${previousValue}`);
      console.log(`New value: ${value}`);
    });
    ```

    **Field values:**

    * `"place"` - Destination/hotel selection
    * `"calendar"` - Date changes
    * `"occupation"` - Occupancy modifications
    * `"promocode"` - Promo code updates
  </Tab>
</Tabs>

## Complete Examples

<Accordion title="Hotel with custom layout">
  ```html theme={null}
  <!-- Individual hotel, vertical layout, icon button -->
  <div data-mirai-id="HOTEL123" data-type="hotel"></div>
  <div data-mirai-component="finder" 
       data-layout="column" 
       data-icon="true"></div>
  ```
</Accordion>

<Accordion title="Chain with device targeting">
  ```html theme={null}
  <!-- Chain setup with mobile/desktop specific finders -->
  <div data-mirai-id="CHAIN456" data-type="chain"></div>

  <!-- Mobile version: Vertical -->
  <div data-mirai-component="finder" 
       data-mobile="true" 
       data-layout="column"></div>

  <!-- Desktop version: Horizontal, full width -->
  <div data-mirai-component="finder" 
       data-desktop="true" 
       data-layout="expand"></div>
  ```
</Accordion>

<Accordion title="Programmatic integration">
  ```html theme={null}
  <!-- Finder with external date picker integration -->
  <div data-mirai-component="finder"></div>

  <script>
  // Set dates from external calendar
  function updateFinderDates(checkIn, checkOut) {
    window.Mirai.Event.publish('setStore', {
      calendar: [checkIn, checkOut]
    });
  }

  // React to finder changes
  window.Mirai.Event.subscribe('finderChange', ({ field, value }) => {
    if (field === 'calendar') {
      // Update external calendar
      updateExternalCalendar(value[0], value[1]);
    }
  });
  </script>
  ```
</Accordion>

***

<Info>
  💬 **Need help with finder setup?** Contact us at [support@hotellinkage.com](mailto:support@hotellinkage.com)
</Info>