## Description

Willba Component Library is a custom UI component collection that can be utilized across multiple platforms. It is available as an <a href="https://www.npmjs.com/package/willba-component-library">npm package</a>, or can be used directly through scripts.

<div style="display: flex; gap: 20px;">
  <img src="https://lh3.googleusercontent.com/fife/ALs6j_E9S05-AoxQW3EDUN_R0_CoKocZjB_0SwUe2s04qlzSMBaR18MI_AizFrkKf7JLELYTyzuUTVr5z_IehlqgF_fmQ9MFAhDfm5ATXvL6PjXqK5tClfew0sAXHodybiN2PFhqfmOsikYpaT-NxYBg6ISV8jIjKkXuQCCr7m1_FqqEMDm8zj5s2Gj4Vs8pT42J9pce2Z1ZXnkMMPYiN37cm-ozobzjP4WOA4400RptGwJmqrvKkZxhJcB-Y-ZbifPkuIp9Wzb0FhKFsEe01l6GiGBmQlT7HeuH74N3FnsLx9GVvhbyPWLaaN9H4p7V9WzDwVvMmJWICrhfLxptJn0EYaxuYfkrLbKQsF5NC-3dvk43AGDfHukDphV5AukZBomSGoIqK9d3cdaiT3zctH4ksupAP6lEv2AQgJE0u-_wuSzMW8f5Vn2_rHUhxAXPDYvL1MH6KNv8jI39adbIyeK9xAF1sIpv2rpHtyiJcCTO_xMeJWgKXNKUdh5vAKRS1vzNFBTkQDy-lriFgGUxy3y1BHv0CtCs_l_Cl2B8xqbDXjkGzKJHxR1HYquOI0WZJDVWTrufwarVrXRTlY07VK6UcF6WEFd_UDzS44adkAXD2Vpf_xDTrRsoi0lcRBgctj6MWkEzOJPTQJK014XPROQ_PoF547CN_ht9G3HqITvWB-Bn6OTYWGbfbc4wPR7MB-iWS8XawNLn-TzQhn3ZzB1kLcCc0u9SNjhXGeFvFAcoPll21y1FX85tQYrXlnIzlIikKzAxuKjiNFDC4Bvrj8RarVeTaEcUU5wv6NswE6MJ-mI5_s28AmgoDurW4mAGhJH6f1BhNDAy6E2oz3kB9ezhqUSWfyl6WfO2eQ9oOxg8ib5kmowcE9220FgrW06Tjl75sQrbVEy4dtYWb-OKbfWwaAfFUbn70RoMaClv4x-ilqRcytfUMNsm41hETt9tbJvRnneBQaZ_ZudwxZvOrILOjXVIf5v5vKLhmSnte9d9DScxT5sdACCCYmZxVafzJxfX1Jew1O8b1nh7lsxD62Pd3HCgUQoaMWLRx2EZBZeL-IkWS-IJRtcd_cN0Mg0Rzk9X-OZZ1YomoAZVH6d7Bg1PxlT9205BuvFTxLyvUZ0wk4FHP40bTMd4_PN1Qt9LCSm3fxZCCBSbF8szl_NT-9bC2iY2fvAVCX4ZPeqKiS6RCi4Gf8C-WDOGusQj5SDestBh8wEbWvgP7C0e20pXUzj94vyAlFCEL0rIdopGzerPT5BS7TNqeKtZNnh-dVgUfGsbp81K03LqbW3cx14JAmB6Z_j7QOrwVC-qrzcbgmP1_DG1Q7VsPki8yJ0JUWzoTgHCk8Shbuhqy3uvfvNwdJlf2YkTejKQIIOy8zeSO7Xja65PF8VYaV-wadRchVku1YSOVNjyVOjYWSQAAFJP-BUczh0_pvXw3TXs_S_TEtq50AgNGRiq_Kex4uxeapDzaWjy3xMwod-M5ewz6zuTS2PMRkl57oN904ebC-2fScIKUZDBJ87IcwL7dq1IGaUOdb5FKcB8Bat8nxhNDVGEG_o6dCQmgUwXGt1HyHhrmXnEheLzPLDG3ePIpZz6u4UFb3d92yxqX9_5KSFFRHdM69U6FC01SiPe2OUKwPQ-ISDd_ETIyvNWLsh-NzsEYzs3RIAVOjBxKRDmA7Jboeet6g" alt="Filter Bar Calendar" style="width: auto; max-width: 50%;">
  <img src="https://lh3.googleusercontent.com/d/1KCTqGgM2IZDY2nZ1ZTDf9WgX_zhmVB6D" alt="Filter Bar Guests" style="width: auto; max-width: 50%;">
</div>

## React usage

### Install the package:

```sh
// with npm
npm install willba-component-library

// with yarn
yarn add willba-component-library
```

### Import and use the package:

```jsx
import React from 'react'
import ReactDOM from 'react-dom'
import { FilterBar } from 'willba-component-library'

function App() {
  return (
    <FilterBar
      redirectUrl={'https://store.vendor.willba.app/'}
      language={'en'}
      disableCalendarDates={{
        disabledDatesByPage: [
          {
            offset: 7,
            page: '/rooms',
          },
          {
            offset: -1,
            page: '/events',
          },
        ],
      }}
      mode={'dark'}
      ageCategories={[
        {
          id: '2',
          name: 'Alle 6 vuotiaat',
          minVal: 0,
          sortOrder: 3,
        },
        {
          id: '3',
          name: '6-16 vuotiaat',
          minVal: 0,
          sortOrder: 2,
        },
        {
          id: '1',
          name: 'Aikuiset',
          minVal: 1,
          sortOrder: 1,
        },
      ]}
      tabs={[
        {
          label: 'Rooms',
          path: '/rooms',
          default: true,
          order: 2,
        },
        {
          label: 'Events',
          path: '/events',
          default: false,
          order: 1,
        },
      ]}
      locations={{
        multiSelect: false,
        disabled: false,
        data: [
          {
            id: 1,
            label: 'Helsinki',
            description: 'Capital of Finland',
            imageUrl: 'https://example.com/helsinki.jpg',
          },
        ],
      }}
    />
  )
}

ReactDOM.render(<App />, document.querySelector('#app'))
```

## Script usage

```html
<div
  id="will-filter-bar"
  style="display: flex; justify-content: center; margin-bottom: 50px"
></div>

<script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.3.27/lib/index.umd.js"></script>

<script>
  const renderFilterBar = async () => {
    try {
      // Specify domain in order to get the correct filter banner config
      const domain = 'customer.willba.store'
      // Set mode to "dark" or "light" for filter bar style color background
      const mode = 'dark'
      // Add fallback locale in case navigator.language is not available
      const fallbackLocale = 'fi'
      // Set request timeout in milliseconds
      const requestTimeout = 10000

      const locale = (navigator.language || fallbackLocale).split('-')[0]
      const url = `https://${domain}/api/services/filter-bar-config?locale=${locale}`

      const response = await fetch(url, {
        method: 'GET',
        headers: { Accept: 'application/json' },
        signal: AbortSignal.timeout(requestTimeout),
      })

      if (!response.ok) return

      const { filterBarConfig } = await response.json()
      if (!filterBarConfig) return

      const filterBarContainer = document.getElementById('will-filter-bar')
      const WillbaFilterBar = WillbaComponentLibrary?.FilterBar

      if (!filterBarContainer || !WillbaFilterBar) return

      const root = ReactDOM.createRoot(filterBarContainer)
      root.render(
        React.createElement(WillbaFilterBar, {
          ...filterBarConfig,
          redirectUrl: `https://${domain}`,
          mode,
        })
      )
    } catch (error) {
      console.error('Failed to render filter bar:', error)
    }
  }

  window.addEventListener('DOMContentLoaded', () => {
    renderFilterBar()
  })
</script>
```

## Props of FilterBar

| Name                 | Value      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| -------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| redirectUrl          | `"string"` | Specifies the base URL to which the component should redirect after submitting the filters. For example: `'https://store.vendor.willba.app/'`                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| language             | `"string"` | Specifies the language of the filter bar. Available options are Finnish ("fi") and English ("en"). For example: `'en'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| palette              | `{}`       | The palette defines the colors of the filter bar. Override the colors using the following format: `{ primary: string, secondary: string, error: string }`. For example: `{ primary: '#2a5a44', secondary: '#2a5a44', error: '#ff0000' }`                                                                                                                                                                                                                                                                                                                                                 |
| disableCalendarDates | `{}`       | Disable dates on the calendar by page using the following format: `{ disabledDatesByPage: [{ offset: number, page: string }] }`. For example: `{ disabledDatesByPage: [{ offset: 7, page: '/rooms' }, { offset: -1, page: '/events' }] }`                                                                                                                                                                                                                                                                                                                                                |
| mode                 | `"string"` | Specify the color theme for the filter bar tabs as either light or dark using the following format: `'dark'` or `'light'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| ageCategories        | `[{}]`     | The ageCategories prop will determine the types of guests that can be selected. Specify the age categories for guests using the following format: `[{ id: string, name: string, minVal: number, sortOrder: number }]`. For example: `[{ id: '1', name: 'Aikuiset', minVal: 1, sortOrder: 1 }]`                                                                                                                                                                                                                                                                                           |
| fullWidth            | `true`     | Specify whether the filter bar width should be dynamic or fixed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| tabs                 | `[{}]`     | Manage the filter bar tabs using the following format: `[{path: string, default: boolean, order: number, label?: string}]`. The label should be pre-localized. For example: `[{ path: '/rooms', default: true, order: 2, label: 'Rooms' }]`                                                                                                                                                                                                                                                                                                                                              |
| locations            | `{}`       | Configures location filter. Format: `{ multiSelect: boolean, disabled?: boolean, data: Location[] }` where Location = `{ id: number, label: string, description?: string \| null, imageUrl?: string \| null }`. The label and description should be pre-localized. `multiSelect` enables multi-selection, `disabled` disables the filter, `description` shows under title, `imageUrl` displays location image. Example: `{ multiSelect: false, disabled: false, data: [{ id: 1, label: 'Helsinki', description: 'Capital of Finland', imageUrl: 'https://example.com/helsinki.jpg' }] }` |