acinguiux-preact-components 0.0.1

package/src/wcs/components/launch-container/ledger.js

@@ -0,0 +1,140 @@
+/* global customElements */
+const LENGTH = 128
+
+const ledger = []
+const listeners = []
+
+function getComponentModel (el) {
+  return globalThis.ami.componentModels.get(el?.closest('[data-name]')?.dataset?.key)
+}
+
+function addListeners (...args) {
+  listeners.push(...args)
+}
+
+function getTextContent (el) {
+  let contentEl = el
+  if (el.querySelector('style')) {
+    const clonedEl = el.cloneNode(true)
+    for (const s of clonedEl.querySelectorAll('style, [aria-hidden]')) { s.remove() }
+    contentEl = clonedEl
+  }
+  return contentEl.textContent.trim()
+}
+
+function record (entry) {
+  ledger.push(entry)
+  const offset = ledger.length - LENGTH
+  if (offset > 0) {
+    ledger.splice(0, offset)
+  }
+
+  for (const listener of listeners) {
+    listener(entry)
+  }
+}
+
+let hasLinkListener = false
+function trackLinks () {
+  if (hasLinkListener) {
+    return
+  }
+
+  // Capture link click to prevent navigation from detaching the element.
+  // This ensures tracking happens before the navigation.
+  hasLinkListener = true
+  document.addEventListener('click', event => {
+    // Get all the clickable elements on the path (works inside Shadow DOM).
+    const els = event.composedPath().filter(e => e?.classList?.contains?.('clickable'))
+
+    if (els.length === 0) {
+      return
+    }
+
+    const tagName = event.target.tagName.toLowerCase()
+    const customElementTagName = customElements.get(tagName) ? tagName : null
+
+    for (const el of els) {
+      trackLink(el, customElementTagName)
+    }
+  }, { capture: true })
+}
+
+function trackLink (el, customElementTagName) {
+  // For web components, use a dummy model with the organism set to the element name.
+  const componentModel = {
+    organism: customElementTagName,
+    ...getComponentModel(el)
+  }
+
+  const linkModel = { name: el.title ? el.title : getTextContent(el) }
+  const entry = { eventName: 'Button click', componentModel, linkModel }
+
+  // This event fires before the expand/collapse event.
+  // The aria-expanded attribute will not yet be updated.
+  if (el.getAttribute('aria-expanded') === 'false' || el.parentElement.matches('details:not([open])')) {
+    entry.eventName = 'Toggle'
+    entry.value = 'Expanded'
+  } else if (el.getAttribute('aria-expanded') === 'true' || el.parentElement.matches('details[open]')) {
+    entry.eventName = 'Toggle'
+    entry.value = 'Collapsed'
+  } else if (el.href) {
+    entry.linkModel.value = el.href
+    entry.eventName = 'Link click'
+  }
+
+  record(entry)
+}
+
+let hasPageViewListener = false
+
+function pageViewListener () {
+  record({
+    eventName: 'Page view',
+    componentModel: getComponentModel(document.querySelector('[data-name="Page"]'))
+  })
+}
+
+function trackPageView () {
+  if (hasPageViewListener) {
+    return
+  }
+
+  hasPageViewListener = true
+  pageViewListener() // Current page view.
+  globalThis.addEventListener('route', () => {
+    pageViewListener()
+  }) // All future page views.
+}
+
+export function initLedger () {
+  if (globalThis?.ami?.ledger) {
+    return
+  }
+
+  // Expose ledger listeners.
+  globalThis.ledgerListeners = globalThis.ledgerListeners || []
+  globalThis.ledgerListeners.push = function (handler, ...args) {
+    if (globalThis.ledgerListeners.includes(handler)) {
+      throw new Error('Handler already added.')
+    }
+
+    // Call handler for all existing entries.
+    for (const entry of ledger) {
+      handler(entry)
+    }
+
+    addListeners(handler, ...args)
+    return Array.prototype.push.apply(this, [handler, ...args])
+  }
+
+  // Add existing ledger listeners.
+  addListeners(...globalThis.ledgerListeners)
+
+  globalThis.ami ||= {}
+  globalThis.ami.ledger = ledger
+  globalThis.ami.ledger.record = record
+
+  trackPageView()
+  trackLinks()
+}

package/src/wcs/components/lng-map/lng-map.js

@@ -0,0 +1,44 @@
+const { h, register, preactHooks, getConsent } = globalThis.ami
+const { useRef, useEffect } = preactHooks
+
+const POLL_INTERVAL = 1000
+const GAP = '48px'
+
+function LNGMap ({ src }) {
+  if (!src || !URL.canParse(src)) {
+    console.error('Missing data source or invalid URL.')
+    return null
+  }
+
+  const ref = useRef(null)
+
+  useEffect(() => {
+    let interval = null
+    const iframe = ref.current
+    const origin = new URL(src).origin
+
+    // Post consent to iframe.
+    const onLoad = () => {
+      interval = setInterval(() => {
+        iframe?.contentWindow?.postMessage({ consent: JSON.stringify(getConsent()) }, origin)
+      }, POLL_INTERVAL)
+    }
+
+    iframe?.addEventListener('load', onLoad)
+
+    // Clear interval and load event when destroyed.
+    return () => {
+      clearInterval(interval)
+      iframe?.removeEventListener('load', onLoad)
+    }
+  }, [src])
+
+  return h('iframe', {
+    ref,
+    className: 'block w-full rounded-2xl border border-txa/20 sm:h-svh md:h-svh lg:aspect-video',
+    style: `max-height: calc(100svh - ${GAP})`,
+    src
+  })
+}
+
+register(LNGMap, 'lng-map')

package/src/wcs/components/mouseflow-analytics/mouseflow-analytics.js

@@ -0,0 +1,39 @@
+const { h, preactHooks, register, waitForConsent } = globalThis.ami
+const { useEffect, useState } = preactHooks
+
+function MouseflowAnalytics ({ id }) {
+  if (!id) {
+    return null
+  }
+
+  if (document.documentElement.dataset.mode !== 'publish') {
+    return null
+  }
+
+  // Mouseflow is already loaded.
+  if (globalThis._mfq) {
+    return null
+  }
+
+  const [consent, setConsent] = useState(false)
+
+  useEffect(() => {
+    (async () => {
+      // This will stop the execution util the consent is granted.
+      await waitForConsent({ statistics: true })
+      setConsent(true)
+    })()
+  }, [])
+
+  if (!consent) {
+    return null
+  }
+
+  globalThis._mfq = []
+  return h('script', {
+    src: `//cdn.mouseflow.com/projects/${id}.js`,
+    defer: true
+  })
+}
+
+register(MouseflowAnalytics, 'mouseflow-analytics')

package/src/wcs/components/msds-search/msds-search.js

@@ -0,0 +1,127 @@
+import FilteredData from '#acinguiux-preact/wcs/shared/filtered-data/filtered-data.js'
+
+const { h, register, matter } = globalThis.ami
+const { Box, Table, Link } = matter
+
+const LABELS = {
+  notAvailable: 'N/A',
+  text: 'Enter your search term',
+  selectCountry: 'Country/Region',
+  selectLanguage: 'Language',
+  search: 'Search',
+  download: 'Download',
+  noResults: 'No results found. Please do not use wild card.'
+}
+
+const fields = [
+  { key: 'productName', name: 'Name' },
+  { key: 'country', name: 'Country/Region' },
+  { key: 'language', name: 'Language' },
+  { key: 'specId', name: 'Specification' },
+  { key: 'cas', name: 'CAS' },
+  { key: 'url', name: 'SDS URL', isUrl: true },
+  { key: 'versionNumber', name: 'Version' }
+]
+
+// -----------------------------------------------------------------------------
+// Filtered Data hooks & helpers
+// -----------------------------------------------------------------------------
+
+async function getData ({ src }) {
+  try {
+    const res = await fetch(src)
+    if (!res.ok) {
+      throw new Error(`Failed to load resource: ${src} (Status: ${res.status})`)
+    }
+    const json = await res.json()
+    if (!json?.Items?.length) {
+      throw new Error('Invalid JSON structure: missing or empty Items array')
+    }
+    return json.Items.map(item => {
+      const {
+        SequenceNumber: msdsId,
+        ProductName: productName,
+        /* LanguageCode */
+        LanguageName: language,
+        /* DocDescription */
+        URL: url,
+        SICC: siccCode,
+        /* CountryCode */
+        CAS: cas,
+        NormedCAS: casNumberFormatted,
+        NamSyn: synonyms,
+        LanguageCountryDocType: languageCountry,
+        SpecIdFull: specId,
+        Version: versionNumber
+      } = item
+
+      const country = languageCountry?.split?.(';')?.[1]
+
+      return {
+        msdsId, productName, country, language, siccCode, url, cas, casNumberFormatted, synonyms, specId, versionNumber
+      }
+    }) || []
+  } catch (error) {
+    console.error('Error in getData:', error)
+    throw error
+  }
+}
+
+function naFormat (value) {
+  return (value === null || value === undefined) ? LABELS.notAvailable : value
+}
+
+function Items ({ items }) {
+  if (!items?.length) {
+    return h('div', { className: 'text-center' }, LABELS.noResults)
+  }
+
+  return h(Box, { className: 'bg-bga text-txa rounded-2xl w-full overflow-x-auto' },
+    h(Table,
+      h('tr', fields.map(headerItem => h('th', headerItem.name))),
+      items.map(
+        result => h('tr', fields.map(
+          field => {
+            const fieldValue = result[field.key]
+            return h('td', fieldValue && field.isUrl
+              ? h(Link, {
+                _variant: 'full',
+                _model: {
+                  name: LABELS.download,
+                  value: fieldValue
+                }
+              })
+              : naFormat(fieldValue))
+          }
+        ))
+      )
+    )
+  )
+}
+
+// -----------------------------------------------------------------------------
+// Main component, custom element definition
+// -----------------------------------------------------------------------------
+
+function MSDSSearch ({ src }) {
+  return h(FilteredData, {
+    getData,
+    filters: [{
+      type: 'text',
+      label: LABELS.text,
+      keys: ['productName', 'siccCode', 'synonyms', 'cas', 'casNumberFormatted', 'specId']
+    }, {
+      type: 'select',
+      label: LABELS.selectCountry,
+      keys: ['', 'country']
+    }, {
+      type: 'select',
+      label: LABELS.selectLanguage,
+      keys: ['', 'language']
+    }],
+    Items,
+    src
+  })
+}
+
+register(MSDSSearch, 'msds-search')

package/src/wcs/components/msds-search/navigation-search.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path fill="#595959" d="M10.5,2 C15.1944204,2 19,5.80557963 19,10.5 C19,12.4865245 18.3185332,14.3138839 17.1766205,15.7610573 L21.7071068,20.2928932 L20.2928932,21.7071068 L15.7610573,17.1766205 C14.3138839,18.3185332 12.4865245,19 10.5,19 C5.80557963,19 2,15.1944204 2,10.5 C2,5.80557963 5.80557963,2 10.5,2 Z M10.5,4 C6.91014913,4 4,6.91014913 4,10.5 C4,14.0898509 6.91014913,17 10.5,17 C14.0898509,17 17,14.0898509 17,10.5 C17,6.91014913 14.0898509,4 10.5,4 Z"/>
+</svg>

package/src/wcs/components/product-catalogue/icon-back.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>

package/src/wcs/components/product-catalogue/icon-cart.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.20731 4.42397C4.16978 4.18006 3.95991 4 3.71312 4H2.5C2.22386 4 2 3.77614 2 3.5V2.5C2 2.22386 2.22386 2 2.5 2H4.57104C5.3114 2 5.94102 2.54017 6.0536 3.27191L6.2591 4.60767H20.5105C20.8335 4.60767 21.0717 4.90937 20.9968 5.22359L19.2352 12.6149C19.1815 12.8401 18.9803 12.999 18.7488 12.999H7.55007L7.79269 14.576C7.83022 14.8199 8.04009 15 8.28688 15H18.5C18.7761 15 19 15.2239 19 15.5V16.5C19 16.7761 18.7761 17 18.5 17H7.42896C6.6886 17 6.05898 16.4598 5.9464 15.7281L4.20731 4.42397ZM6.58786 6.60767L7.26279 10.999H17.4458C17.5153 10.999 17.5756 10.9513 17.5917 10.8838L18.5669 6.79244C18.5893 6.69818 18.5179 6.60767 18.421 6.60767H6.58786ZM10 20C10 21.1046 9.10457 22 8 22C6.89543 22 6 21.1046 6 20C6 18.8954 6.89543 18 8 18C9.10457 18 10 18.8954 10 20ZM19 20C19 21.1046 18.1046 22 17 22C15.8954 22 15 21.1046 15 20C15 18.8954 15.8954 18 17 18C18.1046 18 19 18.8954 19 20Z" fill="#292929"/>
+</svg>

package/src/wcs/components/product-catalogue/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/components/product-catalogue/product-catalogue.js

@@ -0,0 +1,215 @@
+import { fetchCsv } from '#acinguiux-preact/wcs/shared/filtered-data/fetch-data.js'
+import FilteredData from '#acinguiux-preact/wcs/shared/filtered-data/filtered-data.js'
+import ICON_BACK from './icon-back.svg'
+import ICON_CART from './icon-cart.svg'
+import ICON_CLOSE from './icon-close.svg'
+
+const { h, matter, preactHooks, register } = globalThis.ami
+const { Box, Button, Card, Heading, Popup, RichText, Scroller } = matter
+const { useEffect, useRef, useState } = preactHooks
+
+const LABELS = {
+  CATEGORY: 'Nach Kategorie filtern',
+  ORDER_BY: 'Sortieren nach',
+  LOAD_MORE: 'Mehr laden',
+  RESET_FILTERS: 'Filter zurücksetzen',
+  ASCENDING: 'aufsteigend',
+  DESCENDING: 'absteigend',
+  ALL_CATEGORIES: 'Alle Prämienkategorien',
+  POINTS: 'Punkte',
+  BACK_TO_OVERVIEW: 'Zurück zur übersicht',
+  LEARN_MORE: 'Mehr erfahren'
+}
+const IMG_SIZE = { width: 320, height: 320 }
+const FORWARD_URL = 'https://www.acinguiuxsmart.com/smart/reward?site=de-de&code='
+
+// -----------------------------------------------------------------------------
+// Data fetch utilities
+// -----------------------------------------------------------------------------
+
+async function getData ({ src, imageRoot }) {
+  const products = await fetchCsv(src)
+  const sanitizedImageRoot = (imageRoot ?? '').replace(/\/$/, '')
+  parseProducts(products, sanitizedImageRoot)
+
+  return products
+}
+
+function parseProducts (products, imageRoot) {
+  for (const product of products) {
+    product.IMAGE = `${imageRoot}/${product.GIFT_CODE}.jpg`
+    product[LABELS.POINTS] = Number.parseInt(product.POINTS, 10) || ''
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Common presentation components (item)
+// -----------------------------------------------------------------------------
+
+function Item ({ product, role }) {
+  const [isOpen, setIsOpen] = useState(false)
+  const cardRef = useRef(null)
+
+  const closePopup = () => {
+    setIsOpen(false)
+    cardRef.current?.focus()
+  }
+
+  return h('div', { className: 'animate-fade h-full', role },
+    h(Card, {
+      key: product.GIFT_CODE,
+      tabindex: 0,
+      ref: cardRef,
+      onClick: event => {
+        cardRef.current = event.currentTarget
+        setIsOpen(true)
+      },
+      onKeyDown: event => event.key === 'Enter' && event.currentTarget.click(),
+      children: h('div',
+        h(ProductAsset, { product }),
+        h('div', { className: 'sm:col-span-1' },
+          h(Box,
+            h('span', product.BRAND),
+            h(Heading, { _level: '3' }, product.GIFT_NAME),
+            h('p', product.CATEGORY_NAME)
+          )
+        )
+      )
+    }),
+    h(Popup, {
+      onKeyDown: event => event.key === 'Escape' && closePopup(),
+      _show: isOpen,
+      _layout: 'center',
+      children: isOpen && [
+        h('div', { className: 'flex gap-2' },
+          h('div', { className: 'grow' },
+            h(Heading, { _level: '3', className: 'pr-10' }, product.GIFT_NAME)
+          ),
+          h('div', { className: 'shrink-0' },
+            h(Button, {
+              _variant: 'plain',
+              _textless: true,
+              _size: 'xs',
+              _model: {
+                name: LABELS.BACK_TO_OVERVIEW,
+                value: '#',
+                icon: ICON_CLOSE
+              },
+              onClick: event => {
+                event.preventDefault()
+                closePopup()
+              }
+            })
+          )
+        ),
+        h(ProductAsset, { product, className: 'rounded-lg overflow-hidden' }),
+        h(Heading, { _level: '5' }, product.BRAND),
+        h(RichText, product.DESCRIPTION),
+        h('div', { className: 'flex gap-5 sm:flex-wrap' },
+          h(Button, {
+            _size: 'sm',
+            _model: {
+              name: LABELS.BACK_TO_OVERVIEW,
+              value: '#',
+              icon: ICON_BACK
+            },
+            onClick: event => {
+              event.preventDefault()
+              closePopup()
+            }
+          }),
+          h(Button, {
+            target: '_blank',
+            rel: 'noopener',
+            _size: 'sm',
+            _model: {
+              name: LABELS.LEARN_MORE,
+              value: `${FORWARD_URL}${product.GIFT_CODE}`,
+              icon: ICON_CART
+            }
+          })
+        )
+      ]
+    })
+  )
+}
+
+function ProductAsset ({ product, className = '' }) {
+  return h('div', { className },
+    h('img', { src: product.IMAGE, alt: product.GIFT_NAME, className: 'block object-cover w-full h-auto', loading: 'lazy', ...IMG_SIZE }),
+    h('div', { className: 'relative' },
+      h('div', { className: 'bg-bgb text-txb absolute bottom-3 left-3 pt-2 pb-2 pl-3 pr-3 rounded-lg font-bold' },
+        `${product.POINTS} ${LABELS.POINTS}`
+      )
+    )
+  )
+}
+
+// -----------------------------------------------------------------------------
+// Default variant (via Filtered data): items
+// -----------------------------------------------------------------------------
+
+function Items ({ items }) {
+  return h('div', { className: 'grid gap-5 grid-cols-4 md:grid-cols-2 sm:grid-cols-1', role: 'list' }, items.map(product =>
+    h(Item, { product, role: 'listitem' })
+  ))
+}
+
+// -----------------------------------------------------------------------------
+// Slider variant: items
+// -----------------------------------------------------------------------------
+
+function Slider ({ src, imageRoot }) {
+  const [items, setItems] = useState([])
+
+  useEffect(() => {
+    getData({ src, imageRoot }).then(setItems)
+  }, [])
+
+  return h(Scroller, {
+    // Remove gap; shadow compensation is enough.
+    _style: id => `${id} [role="list"] { gap: 0 }`,
+    // Compensate for shadow.
+    children: items.map(product => h('div', { style: 'padding: 10px' },
+      h(Item, { product })
+    ))
+  })
+}
+
+// -----------------------------------------------------------------------------
+// Main component, custom element definition
+// -----------------------------------------------------------------------------
+
+function ProductCatalogue ({ src, 'image-root': imageRoot, variant }) {
+  if (!src) {
+    return null
+  }
+
+  if (variant === 'slider') {
+    return h(Slider, { src, imageRoot })
+  }
+
+  return h(FilteredData, {
+    getData,
+    filters: [{
+      type: 'select',
+      label: LABELS.CATEGORY,
+      keys: [LABELS.ALL_CATEGORIES, 'CATEGORY_NAME']
+    }, {
+      type: 'order',
+      label: LABELS.ORDER_BY,
+      keys: [LABELS.POINTS, `-${LABELS.POINTS}`]
+    }],
+    Items,
+    i18n: {
+      loadMore: LABELS.LOAD_MORE,
+      resetFilters: LABELS.RESET_FILTERS,
+      ascending: LABELS.ASCENDING,
+      descending: LABELS.DESCENDING
+    },
+    src,
+    imageRoot
+  })
+}
+
+register(ProductCatalogue, 'product-catalogue')

package/src/wcs/components/product-links/icon-cart.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.20731 4.42397C4.16978 4.18006 3.95991 4 3.71312 4H2.5C2.22386 4 2 3.77614 2 3.5V2.5C2 2.22386 2.22386 2 2.5 2H4.57104C5.3114 2 5.94102 2.54017 6.0536 3.27191L6.2591 4.60767H20.5105C20.8335 4.60767 21.0717 4.90937 20.9968 5.22359L19.2352 12.6149C19.1815 12.8401 18.9803 12.999 18.7488 12.999H7.55007L7.79269 14.576C7.83022 14.8199 8.04009 15 8.28688 15H18.5C18.7761 15 19 15.2239 19 15.5V16.5C19 16.7761 18.7761 17 18.5 17H7.42896C6.6886 17 6.05898 16.4598 5.9464 15.7281L4.20731 4.42397ZM6.58786 6.60767L7.26279 10.999H17.4458C17.5153 10.999 17.5756 10.9513 17.5917 10.8838L18.5669 6.79244C18.5893 6.69818 18.5179 6.60767 18.421 6.60767H6.58786ZM10 20C10 21.1046 9.10457 22 8 22C6.89543 22 6 21.1046 6 20C6 18.8954 6.89543 18 8 18C9.10457 18 10 18.8954 10 20ZM19 20C19 21.1046 18.1046 22 17 22C15.8954 22 15 21.1046 15 20C15 18.8954 15.8954 18 17 18C18.1046 18 19 18.8954 19 20Z" fill="#292929"/>
+</svg>

package/src/wcs/components/product-links/product-links.js

@@ -0,0 +1,43 @@
+import ICON_CART from './icon-cart.svg'
+
+const { h, preactHooks, matter, register } = globalThis.ami
+const { useMemo, useState } = preactHooks
+const { Box, Button, Heading, Link } = matter
+
+const IS_PUBLISH = document.documentElement.dataset.mode === 'publish'
+const VISIBLE_VENDOR_COUNT = 3
+
+const getSpaceSeparatedValues = text => {
+  const [, name, value] = text?.match(/^(.*)\s(\S+)$/) || []
+  return (name && value) ? { name, value } : null
+}
+
+function ProductLinks ({ heading = 'Buy now', 'view-more': viewMore = 'View more retailers', ...props }) {
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  const vendors = useMemo(() =>
+    Object.entries(props)
+      .filter(([propName]) => propName.startsWith('vendor-'))
+      .map(([, propValue], i) => {
+        const parserVals = getSpaceSeparatedValues(propValue)
+        return parserVals ? { ...parserVals, order: i === 0 ? -1 : Math.random() } : null // eslint-disable-line sonarjs/pseudo-random
+      })
+      .filter(Boolean) // Filter out empty/incorrect values.
+      .sort((v1, v2) => IS_PUBLISH ? v1.order - v2.order : 0), // Randomize order for publish mode (except for the first link).
+  [])
+
+  if (!vendors.length) {
+    return null
+  }
+
+  return h(Box, { className: 'rounded-2xl bg-bga text-txa space-y-5' },
+    h(Heading, { _level: 2 }, heading),
+    ...vendors.map((vendor, i) =>
+      (isExpanded || i < VISIBLE_VENDOR_COUNT) && h(Button, { _model: { ...vendor, icon: ICON_CART }, _wide: true })
+    ),
+    !isExpanded && (vendors.length > VISIBLE_VENDOR_COUNT) &&
+      h(Link, { _variant: 'full', _model: { name: viewMore }, onClick: () => setIsExpanded(true) })
+  )
+}
+
+register(ProductLinks, 'product-links')