acinguiux-preact-components 0.0.1

package/src/wcs/shared/chat-bot/chat-bot.js

@@ -0,0 +1,216 @@
+import ICON_ARROW from './resources/arrow-next.svg'
+import ICON_CLOSE from './resources/navigation-close.svg'
+import ICON_PERSON from './resources/person.svg'
+import ICON_UPLOAD from './resources/upload.svg'
+
+const { h, matter, preactHooks } = globalThis.ami
+const { useEffect, useLayoutEffect, useRef, useState } = preactHooks
+const { Button, Icon, Input } = matter
+
+const IS_PUBLISH = document.documentElement.dataset.mode === 'publish'
+
+export default function ChatBot ({
+  closeText = 'Close window',
+  buttonText = 'Ask us',
+  headerText = 'Chatbot',
+  sendText = 'Send',
+  attachText = 'Attach',
+  inputText = 'Type your message',
+  icon,
+  messages,
+  forceOpen,
+  isBusy,
+  onInit,
+  onSend,
+  onAttach,
+  onClose
+}) {
+  // Show only on publish.
+  if (!IS_PUBLISH) {
+    return null
+  }
+
+  const [isVisible, setVisible] = useState(forceOpen)
+  const [isInitialized, setInitialized] = useState(false)
+  const [prevBusy, setPrevBusy] = useState(isBusy)
+  const ref = useRef()
+
+  // Trigger close on before unload.
+  useEffect(() => {
+    window.addEventListener('beforeunload', onClose)
+    return () => window.removeEventListener('beforeunload', onClose)
+  }, [])
+
+  // Set focus when recovering from busy state.
+  useLayoutEffect(() => {
+    if (!isBusy && prevBusy) {
+      ref.current?.base?.focus?.()
+    }
+
+    if (isBusy !== prevBusy) {
+      setPrevBusy(isBusy)
+    }
+  }, [isBusy, prevBusy])
+
+  // Trigger onInit event.
+  if (isVisible && !isInitialized) {
+    onInit?.()
+    setInitialized(true)
+  }
+
+  // Chat button
+  if (!isVisible) {
+    return h('div', { className: 'fixed end-20 bottom-6 z-20 cursor-pointer shadow rounded-xl animate-fade print:hidden' },
+      h(Button, {
+        _size: 'sm',
+        _rtlFlip: true,
+        _model: { name: buttonText, icon },
+        onClick () {
+          setVisible(true)
+        }
+      })
+    )
+  }
+
+  // Chat window.
+  return [
+    h('div', {
+      // Z-index must be below 30 (popups) and above 20 (floating elements).
+      _style: id => `
+        ${id} { z-index: 21 }
+        @media screen and (min-width: 960px) {
+          ${id} { width: 500px; height: 700px; max-height: calc(100vh - 48px) }
+        }
+      `,
+      className: 'shadow-lg fixed end-20 bottom-6 bg-bga text-txa border-txa/20 flex flex-col animate-toast lg:rounded-xl sm:mr-0 md:mr-0 sm:inset-0 md:inset-0',
+      children: [
+        h('div', { className: 'text-txb bg-bgb flex lg:rounded-tl-xl lg:rounded-tr-xl' },
+          h('div', { className: 'flex grow font-bold justify-center items-center ms-10' },
+            headerText
+          ),
+          h('button', {
+            className: 'p-2 grow-0 cursor-pointer',
+            children: h(Icon, ICON_CLOSE),
+            title: closeText,
+            onClick () {
+              setVisible(false)
+            }
+          })
+        ),
+        h(Messages, { messages }),
+        h('form', {
+          className: 'p-2 flex space-x-2',
+          children: [
+            onAttach && h('div', { className: 'shrink-0' },
+              AttachButton({ attachText, onAttach, isBusy })
+            ),
+            h(Input, {
+              ref,
+              disabled: isBusy,
+              placeholder: inputText,
+              className: 'grow',
+            }),
+            h('div', { className: 'shrink-0' },
+              h(Button, {
+                disabled: isBusy,
+                type: 'submit',
+                onClick (event) {
+                  event.preventDefault()
+                  const input = event.currentTarget.parentElement.previousElementSibling
+                  const text = input.value.trim()
+                  if (text) {
+                    onSend?.(text)
+                    input.value = ''
+                  }
+                },
+                _textless: true,
+                _model: { name: sendText, icon: ICON_ARROW }
+              })
+            )
+          ]
+        })
+      ]
+    })
+  ]
+}
+
+function Messages ({ messages }) {
+  const ref = useRef(null)
+
+  // Scroll to the last message.
+  // ResizeObserver is necessary due to the unknow size of images.
+  useEffect(() => {
+    const observer = new globalThis.ResizeObserver(entries => {
+      for (const entry of entries) {
+        const parent = entry.target.parentElement
+        parent.scrollTop = parent.scrollHeight
+      }
+    })
+
+    observer.observe(ref.current)
+  }, [])
+
+  // Render messages.
+  const locale = document.documentElement.lang || navigator.language
+
+  return h('div', { role: 'log', className: 'grow overflow-y-auto' },
+    h('div', { ref, className: 'space-y-2 pl-2 pr-2 pt-2' },
+      messages.map(m =>
+        h('div',
+          // Timestamp.
+          m.timestamp && h('time', {
+            className: m.isBot ? 'ml-8 flex text-sm' : 'flex justify-end text-sm',
+            children: m.timestamp.toLocaleString(locale),
+          }),
+
+          // Message.
+          h('div', { className: m.isBot ? 'flex' : 'flex justify-end' },
+            // Person icon or space.
+            h('div', { className: 'flex items-end w-8 shrink-0 grow-0' },
+              m.isBot && h(Icon, ICON_PERSON)
+            ),
+
+            // Bubble.
+            h('div', {
+              style: 'max-width: calc(100% - 32px); overflow-wrap: break-word',
+              className: m.isBot
+                ? 'rounded-tl-lg rounded-tr-lg rounded-br-lg inline-block p-2 border-txa/20 border space-y-2'
+                : 'rounded-tl-lg rounded-tr-lg rounded-bl-lg inline-block p-2 text-txb bg-bgb',
+              children: m.children
+            })
+          )
+        )
+      )
+    )
+  )
+}
+
+function AttachButton ({ attachText, onAttach, isBusy }) {
+  const ref = useRef(null)
+
+  useEffect(() => {
+    const onChange = event => {
+      const file = event.target.files[0]
+      file && onAttach(file)
+      event.target.value = '' // Clear after use. Otherwise reattaching the same file won't work.
+    }
+    ref.current?.addEventListener?.('change', onChange)
+
+    return () => {
+      ref.current?.removeEventListener?.('change', onChange)
+    }
+  }, [])
+
+  return [
+    h('input', { type: 'file', className: 'hidden', ref }),
+    h(Button, {
+      disabled: isBusy,
+      _textless: true,
+      _model: { name: attachText, icon: ICON_UPLOAD },
+      type: 'button',
+      onClick () {
+        ref?.current?.click?.()
+      }
+    })
+  ]
+}

package/src/wcs/shared/chat-bot/resources/arrow-next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><polygon fill="#595959" points="7.374 4.324 15.219 12.952 7.407 20.773 8.822 22.187 17.981 13.017 8.854 2.979"/></svg>

package/src/wcs/shared/chat-bot/resources/navigation-close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><polygon fill="#595959" points="19.293 3.293 20.707 4.707 13.414 12 20.707 19.293 19.293 20.707 12 13.414 4.707 20.707 3.293 19.293 10.586 12 3.293 4.707 4.707 3.293 12 10.586"/></svg>

package/src/wcs/shared/chat-bot/resources/person.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 12C14.2133 12 16 10.2133 16 8C16 5.78667 14.2133 4 12 4C9.78667 4 8 5.78667 8 8C8 10.2133 9.78667 12 12 12ZM12 14C9.33333 14 4 15.6098 4 18.5366V19.5C4 19.7761 4.22386 20 4.5 20H19.5C19.7761 20 20 19.7761 20 19.5V18.5366C20 15.6098 14.6667 14 12 14Z" fill="#343434"/></svg>

package/src/wcs/shared/chat-bot/resources/upload.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#404040"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.97 9.344a.5.5 0 0 1-.334.456l-.967.341A2.502 2.502 0 0 0 4.5 15H9v2H4.5a4.5 4.5 0 0 1-1.656-8.685.265.265 0 0 0 .167-.232 7.5 7.5 0 0 1 14.07-3.182c.052.093.154.146.26.135A6 6 0 1 1 18 17h-3.001v-2h3a4 4 0 1 0-.56-7.961l-1.05.146a.5.5 0 0 1-.513-.266l-.488-.942A5.5 5.5 0 0 0 5.003 8.319L4.97 9.344Zm7.384-2.198a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708l.708.707a.5.5 0 0 0 .707 0L11 10.62v10.086a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5V10.621l1.94 1.94a.5.5 0 0 0 .706 0l.708-.707a.5.5 0 0 0 0-.708l-4-4Z"/></svg>

package/src/wcs/shared/filtered-data/README.md

@@ -0,0 +1,52 @@
+# FilteredData
+
+## Overview
+
+- A generic library for rendering a filtered list of items (not a standalone web component).
+- Currently used by several web components, e.g. Furniture overview, Inspired gallery, Product catalogue, MSDS Search.
+
+## Arguments
+
+- `getData (props)` - Asynchronous function responsible for loading data, receives all additional props passed to the main component. The data should be returned as a list of objects. Keys should be proper names, translated if necessary (e.g. Categorie, Titel). This is important as the data will be used for the filters. Example:
+
+  ```js
+  ;[
+    {
+      Category: 'Foo',
+      Title: 'Bar',
+      Text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eademne, quae restincta siti',
+      'Last Updated': '2024-07-23T11:14:12.001Z',
+      'Multiple values': ['Foo', 'Bar']
+    },
+    {
+      // ...
+    }
+  ]
+  ```
+
+- `filters` - A list of filters (or a function to return them, receiving `items`). Each filter is an object with three mandatory keys: `type`, `label` and `keys`:
+
+  ```js
+  ;[
+    {
+      type: 'text', // One of 'text', 'select' or 'order'.
+      label: 'Search', // Display name, defaults to first existing field name from the "keys" entry.
+      keys: ['Title', 'Text', 'Category'] // Data fields to include in the filter. Non-existing data field (including empty string) creates a placeholder label for dropdowns. The last entry is used for hash navigation, ensure it is unique among all keys.
+    }
+  ]
+  ```
+
+- `Items ({ items })` - Preact component to render the item list.
+- `i18n` - An object for translations with the following structure (set to `null` to disable particular feature):
+
+  ```js
+  {
+    loading: 'Loading...',
+    loadingError: 'Failed to load data.',
+    loadMore: 'Load more',
+    resetFilters: 'Reset filters',
+    ascending: 'ascending',
+    descending: 'descending',
+    noResults: 'No results found.'
+  }
+  ```

package/src/wcs/shared/filtered-data/fetch-data.js

@@ -0,0 +1,33 @@
+const CSV_PARSER = /(,|\r?\n|\r|^|^)(?:"([^"]*(?:""[^"]*)*)"|([^,\r\n]*))/gi
+
+// CSV fetch and parse.
+export async function fetchCsv (src) {
+  const res = await fetch(src)
+  if (!res.ok) {
+    throw new Error(`Failed to load ${src} (${res.status})`)
+  }
+  const text = await res.text()
+  return parseCsv(text || '')
+}
+
+// Parse CSV string.
+function parseCsv (csv) {
+  const trimmedCsv = csv.trim()
+  const regex = CSV_PARSER
+  const lines = [[]]
+  let match
+  while ((match = regex.exec(trimmedCsv))) {
+    const [separator, quoted, unquoted] = match.slice(1)
+    if (separator.length && separator !== ',') {
+      lines.push([])
+    }
+
+    lines.at(-1).push(quoted ? quoted.replaceAll('""', '"') : unquoted)
+  }
+
+  const headers = lines[0].map(header => header.trim())
+  return lines.slice(1).map((line, lineIndex) => line.reduce((obj, value, index) => {
+    obj[headers[index]] = value?.trim?.() || value
+    return obj
+  }, { key: lineIndex }))
+}

package/src/wcs/shared/filtered-data/filtered-data.js

@@ -0,0 +1,337 @@
+const { h, matter, preactHooks } = globalThis.ami
+const { useEffect, useMemo, useRef, useState } = preactHooks
+const { Button, Input, Link, Box } = matter
+
+const I18N_DEFAULT = {
+  loading: 'Loading...',
+  loadingError: 'Failed to load data.',
+  resetFilters: 'Reset filters',
+  loadMore: 'Load more',
+  ascending: 'ascending',
+  descending: 'descending',
+  noResults: 'No results found.'
+}
+const MAX_FILTERS_SINGLE_ROW = 3
+const LOAD_MORE_LIMIT = 24
+
+// Special filter keys.
+const FILTER_KEY_TEXT = 'text'
+const FILTER_KEY_SELECT = 'select'
+const FILTER_KEY_ORDER = 'order'
+
+const TEXT_CENTER = 'text-center'
+
+// -----------------------------------------------------------------------------
+// Subcomponents
+// -----------------------------------------------------------------------------
+
+function FilterBar ({ i18n, filters, resetLoadMore }) {
+  const layout = useMemo(() => filters && getFilterLayout(filters), [filters?.length])
+
+  if (!filters?.length) {
+    return null
+  }
+
+  return h(Box, { className: 'text-txa bg-bga rounded-2xl' },
+    h('div', { className: `grid gap-5 grid-cols-${layout.colNumber} md:grid-cols-2 sm:grid-cols-1` }, filters?.map?.(filter => {
+      // Determine if text filter should span all columns.
+      const colspan = ((filter.type === FILTER_KEY_TEXT) && layout.fullWidthText) && layout.colNumber
+      const onChange = e => {
+        const filterValueMap = filters
+          .map(f => ({ [f.name]: f.value }))
+          .reduce((a, b) => ({ ...a, ...b }), {})
+        setHash({ ...filterValueMap, [filter.name]: e.target.value })
+        filter.type !== FILTER_KEY_ORDER && resetLoadMore()
+      }
+
+      return h(FilterInput, { ...filter, colspan, onChange })
+    })),
+    // Reset filters.
+    i18n.resetFilters && h(Link, {
+      _variant: 'underline',
+      _model: { name: i18n.resetFilters, value: '#' },
+      onClick: e => {
+        e.preventDefault()
+        if (!globalThis.location.hash) {
+          return
+        }
+        resetHash()
+        resetLoadMore()
+      }
+    })
+  )
+}
+
+function FilterInput ({ colspan, label, type, name, values, value, defaultValue, onChange }) {
+  const labelClass = colspan ? `lg:col-span-${colspan}` : ''
+  return h('label', { className: `block ${labelClass}` },
+    h('span', { className: 'font-bold' }, label),
+    type === FILTER_KEY_TEXT
+      ? h(Input, {
+        _size: 'sm',
+        name,
+        type: 'search',
+        value,
+        onInput: onChange
+      })
+      : h(Input, {
+        _size: 'sm',
+        name,
+        type: 'select',
+        onChange,
+        children: values.map(({ name: optionName, value: optionValue }) =>
+          h('option', {
+            value: optionValue,
+            selected: (value === optionValue) || (!value && optionValue === defaultValue)
+          }, optionName)
+        )
+      })
+  )
+}
+
+// -----------------------------------------------------------------------------
+// Helper functions
+// -----------------------------------------------------------------------------
+
+// Determine filter layout according to its count/type.
+function getFilterLayout (filters) {
+  const filterNumber = filters.length
+  // Indicates the first field is text and is the only one of this type.
+  const isFirstFilterText = filters.every((filter, i) => {
+    const isText = filter?.type === FILTER_KEY_TEXT
+    return i === 0 ? isText : !isText
+  })
+
+  if (filterNumber <= MAX_FILTERS_SINGLE_ROW) {
+    return {
+      // For a single filter, it spans all columns only if it is of type text.
+      colNumber: filterNumber + Number((filterNumber === 1) && !isFirstFilterText),
+      fullWidthText: false
+    }
+  }
+
+  const layouts = [
+    { colNumber: 3, fullWidthText: false },
+    { colNumber: 2, fullWidthText: false },
+    isFirstFilterText && { colNumber: 3, fullWidthText: true },
+    isFirstFilterText && { colNumber: 2, fullWidthText: true }
+  ].filter(Boolean)
+  let last
+
+  for (const currentLayout of layouts) {
+    const currentFilterNumber = filterNumber - Number(currentLayout.fullWidthText)
+    const orphanNumber = currentFilterNumber % currentLayout.colNumber
+    if (!last || (orphanNumber < last.orphanNumber)) {
+      last = { orphanNumber, layout: currentLayout }
+      if (orphanNumber === 0) {
+        break
+      }
+    }
+  }
+
+  return last.layout
+}
+
+// Applies properties according to filter type.
+function decorateFilterItem (filterItem, allItems, i18n) {
+  const filterHandlers = {
+    [FILTER_KEY_TEXT]: {
+      onFilter: (filterItems, filterValue) =>
+        filterValue
+          ? filterItems.filter(item => filterItem.keys.some(key =>
+             `${item[key]}`.toLowerCase().includes(filterValue.toLowerCase())
+          ))
+          : filterItems
+    },
+    [FILTER_KEY_SELECT]: {
+      name: filterItem.keys.at(-1)
+        ?.toLowerCase().replaceAll(/[^A-Za-z0-9]/g, '') || FILTER_KEY_SELECT,
+      getValues: () => [
+        allItems[0] && (allItems[0][filterItem.keys[0]] === undefined) && { name: filterItem.keys[0], value: '' },
+        ...filterItem.keys.flatMap(key =>
+          [...new Set(allItems.flatMap(item => (item[key] || '')).filter(Boolean))]
+        ).sort((v1, v2) => v1.localeCompare(v2)).map(value => ({ name: value, value }))
+      ].filter(Boolean),
+
+      onFilter: (items, filterValue) =>
+        filterValue
+          ? items.filter(item => filterItem.keys.some(key =>
+            // Check if the value matches (single) or one of them (array).
+            (item[key] === filterValue) || (Array.isArray(item[key]) && item[key].includes(filterValue)))
+          )
+          : items
+    },
+    [FILTER_KEY_ORDER]: {
+      getValues: () => filterItem.keys.map(key => {
+        const isDesc = key.startsWith('-')
+        const rawKey = isDesc ? key.substring(1) : key
+
+        // Determine if order direction (asc/desc) is needed
+        const hasOpposite = filterItem.keys.includes(`${isDesc ? '' : '-'}${rawKey}`)
+        let directionSuffix = ''
+        if (hasOpposite) {
+          directionSuffix = ` (${isDesc ? i18n.descending : i18n.ascending})`
+        }
+
+        return {
+          name: `${rawKey}${directionSuffix}`,
+          value: key
+        }
+      }),
+
+      onFilter: (items, filterValue, sign) => items.sort((a, b) =>
+        (typeof a[filterValue] === 'number'
+          ? (a[filterValue] - b[filterValue])
+          : `${a[filterValue]}`.localeCompare?.(`${b[filterValue]}`)) * sign
+      )
+    }
+  }
+
+  const name = filterHandlers[filterItem.type]?.name || filterItem.type
+  const values = filterHandlers[filterItem.type]?.getValues?.() || []
+  const onFilter = filterHandlers[filterItem.type]?.onFilter
+
+  return {
+    ...filterItem,
+    label: filterItem.label || (allItems[0] && filterItem.keys.find(key => allItems[0][key] !== undefined)),
+    name,
+    values,
+    value: '',
+    defaultValue: values[0]?.value,
+    onFilter
+  }
+}
+
+// Filter items according to current filter values and load more cursor position.
+function applyFiltersLoadMore ({ filters, items, i18n, loadMoreCursor }) {
+  // Apply filters.
+  let filteredItems = [...items]
+  for (const { type, onFilter, value, defaultValue } of filters) {
+    let filterValue = value || defaultValue || ''
+    if (type === FILTER_KEY_ORDER) {
+      const sign = filterValue.startsWith?.('-') ? -1 : 1
+      filterValue = filterValue.replace(/^-/, '')
+      filteredItems = onFilter(filteredItems, filterValue, sign)
+    } else if (onFilter) {
+      filteredItems = onFilter(filteredItems, filterValue)
+    }
+  }
+
+  // Apply load more.
+  let hasLoadMore = false
+  if (i18n.loadMore) {
+    const filteredItemsLength = filteredItems.length
+    filteredItems = filteredItems.slice(0, loadMoreCursor + LOAD_MORE_LIMIT)
+    hasLoadMore = (filteredItems.length < filteredItemsLength)
+  }
+
+  return [filteredItems, hasLoadMore]
+}
+
+function setHash (params) {
+  const search = new URLSearchParams()
+  for (const [key, value] of Object.entries(params)) { value && search.set(key, value) }
+  if (search.size > 0) {
+    globalThis.history.replaceState({}, '', `#${search.toString()}`)
+    globalThis.dispatchEvent(new globalThis.HashChangeEvent('hashchange'))
+  } else {
+    resetHash()
+  }
+}
+
+function resetHash () {
+  // Avoid scroll to top.
+  globalThis.history.replaceState({}, '', globalThis.location.href.split('#')[0])
+  globalThis.dispatchEvent(new globalThis.HashChangeEvent('hashchange'))
+}
+
+function getFiltersFromHash (filters) {
+  const search = new URLSearchParams(globalThis.location.hash.substring(1))
+  return filters?.map?.(filterItem => ({ ...filterItem, value: search.get(filterItem.name) || '' }))
+}
+
+// -----------------------------------------------------------------------------
+// Main component
+// -----------------------------------------------------------------------------
+
+export default function FilteredData ({ getData, filters: initialFilters, Items, i18n, ...props }) {
+  const [data, setData] = useState({
+    errorMessage: null,
+    i18n: { ...I18N_DEFAULT, ...i18n },
+    items: [],
+    filters: null,
+    loadMoreCursor: 0
+  })
+  const itemsRef = useRef(null)
+
+  // Resolve data.
+  useEffect(() => {
+    (async () => {
+      let items
+      try {
+        items = await getData?.(props) || []
+      } catch (error) {
+        setData(currentData => ({ ...currentData, errorMessage: data.i18n.loadingError }))
+        console.error(error)
+        return
+      }
+      const filters = getFiltersFromHash( // Set initial filter values.
+        initialFilters?.map?.(filter => decorateFilterItem(filter, items, data.i18n)) // Apply additional properties.
+      ) || []
+
+      setData({ ...data, items, filters })
+
+      // Listen to hash changes. Multiple functions to satisfy SonarQube.
+      const setDataHandler = currentData => ({
+        ...currentData,
+        filters: getFiltersFromHash(currentData.filters)
+      })
+      const hashchangeHandler = () => setData(setDataHandler)
+      globalThis.addEventListener('hashchange', hashchangeHandler)
+    })()
+  }, [])
+
+  // Focus on the first newly loaded element after load more click.
+  useEffect(() => {
+    if (data.loadMoreCursor > 0) {
+      // Determine item container.
+      const container = [...itemsRef?.current?.querySelectorAll('[tabindex="0"]') || []]?.find(element => element.parentNode.children.length >= data.loadMoreCursor)?.parentNode
+      container?.children?.[data.loadMoreCursor]?.focus?.()
+    }
+  }, [data.loadMoreCursor])
+
+  // Error.
+  if (data.errorMessage) {
+    return h('div', { className: TEXT_CENTER }, data.errorMessage)
+  }
+
+  // Not ready yet or misconfigured.
+  if (!data.filters) {
+    return Boolean(data.i18n.loading) && h(Box, { className: TEXT_CENTER }, data.i18n.loading)
+  }
+
+  // Apply filters & load more.
+  const [filteredItems, hasLoadMore] = applyFiltersLoadMore(data)
+  // Reset load more cursor.
+  const resetLoadMore = () => data.i18n.loadMore && setData(currentData => ({ ...currentData, loadMoreCursor: 0 }))
+
+  return h('div', { className: 'space-y-5' },
+    // Filters.
+    h(FilterBar, { ...data, resetLoadMore }),
+    // Item list.
+    Items && ((filteredItems.length > 0) || !data.i18n.noResults) && h('div', { ref: itemsRef },
+      h(Items, { items: filteredItems })
+    ),
+    data.i18n.noResults && !filteredItems.length && h('div', { className: TEXT_CENTER }, data.i18n.noResults),
+    // Load more.
+    hasLoadMore && h('div', { className: 'flex justify-center' },
+      h(Button, {
+        className: 'w-auto',
+        onClick: () => { setData({ ...data, loadMoreCursor: data.loadMoreCursor + LOAD_MORE_LIMIT }) },
+        _model: {
+          name: data.i18n.loadMore
+        }
+      })
+    )
+  )
+}

package/src/wcs/shared/promo-with-popup/icon-close.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <polygon fill="#595959" points="19.293 3.293 20.707 4.707 13.414 12 20.707 19.293 19.293 20.707 12 13.414 4.707 20.707 3.293 19.293 10.586 12 3.293 4.707 4.707 3.293 12 10.586"/>
+</svg>

package/src/wcs/shared/promo-with-popup/icon-next.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <polygon fill="#595959" points="7.374 4.324 15.219 12.952 7.407 20.773 8.822 22.187 17.981 13.017 8.854 2.979"/>
+</svg>

package/src/wcs/shared/promo-with-popup/icon-prev.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <polygon fill="#595959" points="15.543 4.294 7.699 12.922 15.51 20.743 14.095 22.156 4.937 12.987 14.063 2.949"/>
+</svg>