willba-component-library 0.3.7 → 0.3.8
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.
- package/README.md +59 -100
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -117,111 +117,70 @@ ReactDOM.render(<App />, document.querySelector('#app'))
|
|
|
117
117
|
style="display: flex; justify-content: center; margin-bottom: 50px"
|
|
118
118
|
></div>
|
|
119
119
|
|
|
120
|
-
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
|
|
121
|
-
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
|
|
122
|
-
<script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.
|
|
120
|
+
<script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
|
|
121
|
+
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
|
|
122
|
+
<script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.3.7/lib/index.umd.js"></script>
|
|
123
123
|
|
|
124
124
|
<script>
|
|
125
|
-
const
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
],
|
|
172
|
-
tabs: [
|
|
173
|
-
{
|
|
174
|
-
label: {
|
|
175
|
-
en: 'Rooms',
|
|
176
|
-
fi: 'Hilat',
|
|
177
|
-
},
|
|
178
|
-
path: '/rooms',
|
|
179
|
-
default: true,
|
|
180
|
-
order: 2,
|
|
181
|
-
},
|
|
182
|
-
{
|
|
183
|
-
label: {
|
|
184
|
-
en: 'Events',
|
|
185
|
-
fi: 'Tapahtumat',
|
|
186
|
-
},
|
|
187
|
-
path: '/events',
|
|
188
|
-
default: false,
|
|
189
|
-
order: 1,
|
|
190
|
-
},
|
|
191
|
-
],
|
|
192
|
-
locations: {
|
|
193
|
-
multiSelect: false,
|
|
194
|
-
disabled: false,
|
|
195
|
-
data: [
|
|
196
|
-
{
|
|
197
|
-
id: 1,
|
|
198
|
-
label: [
|
|
199
|
-
{ content: 'Helsinki', locale: 'en' },
|
|
200
|
-
{ content: 'Helsinki', locale: 'fi' },
|
|
201
|
-
],
|
|
202
|
-
description: [
|
|
203
|
-
{ content: 'Capital of Finland', locale: 'en' },
|
|
204
|
-
{ content: 'Suomen pääkaupunki', locale: 'fi' },
|
|
205
|
-
],
|
|
206
|
-
imageUrl: 'https://example.com/helsinki.jpg',
|
|
207
|
-
},
|
|
208
|
-
],
|
|
209
|
-
},
|
|
210
|
-
})
|
|
211
|
-
)
|
|
125
|
+
const renderFilterBar = async () => {
|
|
126
|
+
try {
|
|
127
|
+
// Specify domain in order to get the correct filter banner config
|
|
128
|
+
const domain = 'customer.willba.store'
|
|
129
|
+
// Set mode to "dark" or "light" for filter bar style color background
|
|
130
|
+
const mode = 'dark'
|
|
131
|
+
// Add fallback locale in case navigator.language is not available
|
|
132
|
+
const fallbackLocale = 'fi'
|
|
133
|
+
// Set request timeout in milliseconds
|
|
134
|
+
const requestTimeout = 10000
|
|
135
|
+
|
|
136
|
+
const locale = (navigator.language || fallbackLocale).split('-')[0]
|
|
137
|
+
const url = `https://${domain}/api/services/filter-bar-config?locale=${locale}`
|
|
138
|
+
|
|
139
|
+
const response = await fetch(url, {
|
|
140
|
+
method: 'GET',
|
|
141
|
+
headers: { Accept: 'application/json' },
|
|
142
|
+
signal: AbortSignal.timeout(requestTimeout),
|
|
143
|
+
})
|
|
144
|
+
|
|
145
|
+
if (!response.ok) return
|
|
146
|
+
|
|
147
|
+
const { filterBarConfig } = await response.json()
|
|
148
|
+
if (!filterBarConfig) return
|
|
149
|
+
|
|
150
|
+
const filterBarContainer = document.getElementById('will-filter-bar')
|
|
151
|
+
const WillbaFilterBar = WillbaComponentLibrary?.FilterBar
|
|
152
|
+
|
|
153
|
+
if (!filterBarContainer || !WillbaFilterBar) return
|
|
154
|
+
|
|
155
|
+
const root = ReactDOM.createRoot(filterBarContainer)
|
|
156
|
+
root.render(
|
|
157
|
+
React.createElement(WillbaFilterBar, {
|
|
158
|
+
...filterBarConfig,
|
|
159
|
+
redirectUrl: `https://${domain}`,
|
|
160
|
+
mode,
|
|
161
|
+
})
|
|
162
|
+
)
|
|
163
|
+
} catch (error) {
|
|
164
|
+
console.error('Failed to render filter bar:', error)
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
window.addEventListener('DOMContentLoaded', () => {
|
|
169
|
+
renderFilterBar()
|
|
170
|
+
})
|
|
212
171
|
</script>
|
|
213
172
|
```
|
|
214
173
|
|
|
215
174
|
## Props of FilterBar
|
|
216
175
|
|
|
217
|
-
| Name | Value | Description
|
|
218
|
-
| -------------------- | ---------- |
|
|
219
|
-
| redirectUrl | `"string"` | Specifies the base URL to which the component should redirect after submitting the filters. For example: `'https://store.vendor.willba.app/'`
|
|
220
|
-
| language | `"string"` | Specifies the language of the filter bar. Available options are Finnish ("fi") and English ("en"). For example: `'en'`
|
|
221
|
-
| 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' }`
|
|
222
|
-
| 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' }] }`
|
|
223
|
-
| mode | `"string"` | Specify the color theme for the filter bar tabs as either light or dark using the following format: `'dark'` or `'light'`
|
|
224
|
-
| 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 }]`
|
|
225
|
-
| fullWidth | `true` | Specify whether the filter bar width should be dynamic or fixed.
|
|
226
|
-
| tabs | `[{}]` | Manage the filter bar tabs using the following format: `[{path: string, default: boolean, order: number, label: { en: string, fi: string }}]`. For example: `[{ path: '/rooms', default: true, order: 2, label: { en: 'Rooms', fi: 'Hilat' }}]`
|
|
176
|
+
| Name | Value | Description |
|
|
177
|
+
| -------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
178
|
+
| redirectUrl | `"string"` | Specifies the base URL to which the component should redirect after submitting the filters. For example: `'https://store.vendor.willba.app/'` |
|
|
179
|
+
| language | `"string"` | Specifies the language of the filter bar. Available options are Finnish ("fi") and English ("en"). For example: `'en'` |
|
|
180
|
+
| 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' }` |
|
|
181
|
+
| 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' }] }` |
|
|
182
|
+
| mode | `"string"` | Specify the color theme for the filter bar tabs as either light or dark using the following format: `'dark'` or `'light'` |
|
|
183
|
+
| 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 }]` |
|
|
184
|
+
| fullWidth | `true` | Specify whether the filter bar width should be dynamic or fixed. |
|
|
185
|
+
| tabs | `[{}]` | Manage the filter bar tabs using the following format: `[{path: string, default: boolean, order: number, label: { en: string, fi: string }}]`. For example: `[{ path: '/rooms', default: true, order: 2, label: { en: 'Rooms', fi: 'Hilat' }}]` |
|
|
227
186
|
| locations | `{}` | Configures location filter. Format: `{ multiSelect: boolean, disabled?: boolean, data: Location[] }` where Location = `{ id: number, label: LocaleTranslation, description?: LocaleTranslation, imageUrl?: string }` and LocaleTranslation = `Array<{ content: string, locale: string }>`. `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: [{ content: 'Helsinki', locale: 'en' }, { content: 'Helsinki', locale: 'fi' }], description: [{ content: 'Capital', locale: 'en' }, { content: 'Pääkaupunki', locale: 'fi' }], imageUrl: 'https://example.com/helsinki.jpg' }] }` |
|