acinguiux-preact-components 0.0.1

package/src/wcs/components/standalone-table/standalone-table.js

@@ -0,0 +1,440 @@
+import Excel from 'exceljs'
+
+import ICON_ARROW_UP from './arrow-up.svg'
+import ICON_ARROW_UP_DOWN from './arrow-up-down.svg'
+
+const { h, register, matter, preactHooks, t } = globalThis.ami
+const { Box, Button, Heading, Icon, Input, Link, Message, Table } = matter // acinguiux-preact components
+const { useState, useEffect, useMemo, useRef } = preactHooks // Preact hooks
+
+const MAX_SIZE = 100_000
+const MAX_ROWS = 200
+const MAX_COLS = 15
+const BYTE_LENGTH = 1000
+const MAX_FILTER_OPTION_LENGTH = 20
+const QUERY_ITEMS_PER_PAGE = 50
+const DEBOUNCE_DELAY = 300
+
+// Fetch & parse the document.
+async function fetchAndParseSpreadsheet (src, isQueryable) {
+  if (!src) {
+    throw new Error('Missing document source.')
+  }
+
+  // Fetch the document.
+  const res = await fetch(src)
+  if (!res.ok) {
+    throw new Error(`Error loading document: ${src}`)
+  }
+
+  const arrayBuffer = await res.arrayBuffer()
+  if (arrayBuffer.byteLength > MAX_SIZE) {
+    throw new Error(`Please reduce the file size to a maximum of ${MAX_SIZE / BYTE_LENGTH}KB.`)
+  }
+
+  const workbook = new Excel.Workbook()
+  await workbook.xlsx.load(arrayBuffer)
+  if (workbook.worksheets.length < 1) {
+    throw new Error('No sheets found in the document.')
+  }
+
+  const title = workbook.getWorksheet().name
+  const sheet = workbook.getWorksheet(title)
+  const workbookTitle = workbook?.title
+  const workbookDescription = workbook?.description
+  if ((!isQueryable && (sheet.actualRowCount > MAX_ROWS)) || sheet.actualColumnCount > MAX_COLS) {
+    throw new Error(`Please reduce the amount of content to display in this table to a maximum of ${MAX_COLS} columns and ${MAX_ROWS} rows.`)
+  }
+
+  const { header, table } = getSheetData(sheet)
+  return { ready: true, header, table, filteredTable: table, sortedTable: table, isQueryable, title, workbookTitle, workbookDescription }
+}
+
+function getSheetData (sheet) {
+  let header
+  const table = []
+  sheet.eachRow((row, key) => {
+    const rowData = []
+    rowData.tableRowKey = key
+    const isHeader = row.number === 1
+    row.eachCell({ includeEmpty: true }, cell => {
+      rowData.push({
+        text: getCellValue(cell) ?? cell.value,
+        link: cell.hyperlink,
+        style: getStyle(cell)
+      })
+    })
+    if (isHeader) {
+      header = rowData
+    } else {
+      // Fix includeEmpty issue
+      while (rowData.length < header.length) {
+        rowData.push({ text: '' })
+      }
+      table.push(rowData)
+    }
+  })
+  return { header, table }
+}
+
+function getCellValue (cell) {
+  const dateValue = cell.value?.toLocaleDateString?.(document.documentElement.lang, { timeZone: 'UTC' })
+  const superScriptSubscriptValue = cell.value?.richText?.map?.(text => text.text).join('')
+  const formulaValue = { 'TRUE()': 'True', 'FALSE()': 'False' }[cell.value?.formula] ?? cell.value?.result ?? cell.value?.text
+  const booleanValue = typeof cell.value === 'boolean' ? String(cell.value) : cell.value
+
+  return dateValue ?? formulaValue ?? superScriptSubscriptValue ?? booleanValue
+}
+
+function getStyle (cell) {
+  const styles = []
+  cell.style.alignment?.horizontal && styles.push(`text-align: ${cell.style.alignment.horizontal}`)
+  cell.style.font?.bold && styles.push('font-weight: bold')
+  cell.style.font?.italic && styles.push('font-style: italic')
+  return styles.join(';')
+}
+
+function useFeatures (rawFeatures) {
+  // Available features: sort,search,filter=column_number
+  return useMemo(() => {
+    // Keys treated as sets (mutliple values)
+    const FEATURE_SET_KEYS = new Set(['filter'])
+    const featureSplit = rawFeatures?.split?.(',') || []
+    return featureSplit.reduce((acc, curr) => {
+      const [key, value] = curr.split('=').map(v => v.trim())
+      if (FEATURE_SET_KEYS.has(key)) {
+        acc[key] = [...acc[key] || [], Number.parseInt(value, 10) || value]
+      } else {
+        acc[key] = true
+      }
+      return acc
+    }, {})
+  }, [rawFeatures])
+}
+
+function Filter ({ data, features, onQuery, id }) {
+  const [filterFields, setFilterFields] = useState([])
+  const [filterVals, setFilterVals] = useState(new Map())
+  const [searchText, setSearchText] = useState('')
+  const [isQueried, setIsQueried] = useState(false)
+
+  useEffect(() => {
+    if (data?.table?.length && features.filter?.length) {
+      data.header && setFilterFields(features.filter.map(rawColumnNumber => {
+        const columnNumber = rawColumnNumber - 1
+        const headerCell = data.header[columnNumber]
+        if (!headerCell) {
+          return null
+        }
+
+        return {
+          columnNumber,
+          name: headerCell.text,
+          // Filter value aggregation is case-sensitive
+          values: [
+            ...data.table.reduce((acc, row) => {
+              const value = row[columnNumber]?.text
+              if (typeof value === 'number' || value) {
+                acc.add(value)
+              }
+              return acc
+            }, new Set())
+          ].sort((v1, v2) => v1?.toLowerCase?.() < v2?.toLowerCase?.() ? -1 : 1).map(String)
+        }
+      }).filter(Boolean).sort())
+    }
+  }, [data])
+
+  useEffect(() => () => clearTimeout(searchTimeoutRef.current), [])
+
+  const handleQueryUpdate = (text, filters) => {
+    onQuery?.(text, filters)
+    setIsQueried(!!text || filters.size > 0)
+  }
+
+  const handleFilterChange = (value, field) => {
+    const newFilterVals = new Map(filterVals)
+    if (value) {
+      newFilterVals.set(field.columnNumber, value)
+    } else {
+      newFilterVals.delete(field.columnNumber)
+    }
+    setFilterVals(newFilterVals)
+    handleQueryUpdate(searchText, newFilterVals)
+  }
+
+  const searchTimeoutRef = useRef(null)
+  const textProps = {
+    _size: 'sm',
+    type: 'search',
+    placeholder: t('Enter your search term'),
+    name: 'text',
+    value: searchText,
+    'aria-controls': id,
+    onInput: e => {
+      const { value } = e.target
+      setSearchText(value)
+      clearTimeout(searchTimeoutRef.current)
+      // Adding a debounce to avoid too many queries.
+      searchTimeoutRef.current = setTimeout(() => {
+        handleQueryUpdate(value, filterVals)
+      }, DEBOUNCE_DELAY)
+    }
+  }
+
+  return (features.search || (filterFields.length > 0)) && h('div', { className: 'space-y-5' },
+    h('div', { className: 'flex md:flex-col sm:flex-col gap-5' },
+      // Search box.
+      h('div', { className: 'grow' },
+        h(Input, textProps)
+      ),
+      // Filters.
+      filterFields.map((field, fieldIndex) => h('div',
+        h(Input, {
+          type: 'select',
+          name: `filter-${fieldIndex + 1}`,
+          value: filterVals.get(field.columnNumber) || '',
+          'aria-controls': id,
+          onChange: e => {
+            const { value } = e.target
+            handleFilterChange(value, field)
+          },
+          children: [
+            h('option', { selected: true, value: '' }, field.name),
+            ...field.values.map(value =>
+              h('option', { value }, value.length > MAX_FILTER_OPTION_LENGTH
+                ? `${value.substring(0, MAX_FILTER_OPTION_LENGTH)}...`
+                : value
+              )
+            )
+          ]
+        })
+      ))
+    ),
+    // Reset filters
+    isQueried && h(Link, {
+      role: 'button',
+      _variant: 'full',
+      'aria-controls': id,
+      _model: {
+        name: t('Reset filters'),
+        value: '#'
+      },
+      onClick: e => {
+        e.preventDefault()
+        setSearchText('')
+        setFilterVals(new Map())
+        onQuery?.('', new Map())
+        setIsQueried(false)
+      }
+    })
+  )
+}
+
+function TableRow ({ key, row, sortData, isHeader, onColumnSort }) {
+  return h('tr', { key }, row.map((cell, cellIndex) => {
+    // Regular cell.
+    if (!isHeader) {
+      return h('td', { className: 'whitespace-pre-wrap', style: cell.style }, cell.link
+        ? h(Link, { _model: { name: cell.text, value: cell.link }, _variant: 'full' })
+        : h('span', {}, cell.text)
+      )
+    }
+
+    // Non sortable header.
+    if (!sortData) {
+      return h('th', { className: 'whitespace-pre-wrap', style: cell.style }, cell.text)
+    }
+
+    const sortProps = { icon: ICON_ARROW_UP_DOWN, flipClass: '', label: () => t('Click to sort') }
+    if (sortData?.columnNumber === cellIndex) {
+      sortProps.icon = ICON_ARROW_UP
+      sortProps.label = name => t('Sorted ascending - {0}', name)
+      if (!sortData.isAsc) {
+        sortProps.flipClass = 'rotate-180'
+        sortProps.label = name => t('Sorted descending - {0}', name)
+      }
+    }
+
+    // Sortable header.
+    return h('th', {
+      className: 'cursor-pointer whitespace-nowrap clickable',
+      'aria-live': 'assertive',
+      'aria-label': sortProps.label(cell.text),
+      style: cell.style,
+      onClick: () => onColumnSort(cellIndex),
+      children: h('div', { className: 'flex gap-1' },
+        cell.text,
+        h('div', { className: `flex items-center justify-center ${sortProps.flipClass}` },
+          h(Icon, { _size: 'sm' }, sortProps.icon)
+        )
+      )
+    })
+  }))
+}
+
+function TableContents ({ features, data, sortData, page, setPage, onColumnSort, id, 'aria-live': ariaLive }) {
+  let dataRows = data.sortedTable
+  let pageCount
+  if (page !== null) {
+    dataRows = data.sortedTable.slice(0, page * QUERY_ITEMS_PER_PAGE)
+    pageCount = Math.ceil(data.sortedTable.length / QUERY_ITEMS_PER_PAGE)
+  }
+
+  const rows = [data.header, ...dataRows]
+  const noItems = rows.length <= 1
+
+  return [
+    noItems && h('div', { className: 'text-center' }, 'No items.'),
+    !noItems && h(Table, { id, 'aria-live': ariaLive }, rows.map((row, rowIndex) =>
+      h(TableRow, { key: row.tableRowKey, row, sortData: features.sort && sortData, isHeader: rowIndex === 0, onColumnSort }))
+    ),
+    (page > 0) && (page < pageCount) && h('div', { className: 'text-center' },
+      h(Button, {
+        _size: 'sm',
+        'aria-controls': id,
+        _model: {
+          name: t('Load more')
+        },
+        onClick: e => {
+          e.preventDefault()
+          setPage(page + 1)
+        }
+      })
+    )
+  ]
+}
+
+function getQueryKey (text) {
+  return typeof text === 'number' ? `${text}` : text
+}
+
+function getOnQuery (data, setData, sortTable, setPage) {
+  return (rawSearchText, filterVals) => {
+    let newTable = data.table
+    const searchText = rawSearchText?.trim?.()?.toLowerCase()
+
+    if (searchText) {
+      newTable = newTable.filter(row => row.some(cell => getQueryKey(cell.text)?.toLowerCase?.().includes?.(searchText)))
+    }
+
+    for (const [columnNumber, value] of filterVals.entries()) {
+      newTable = newTable.filter(row => getQueryKey(row[columnNumber]?.text) === value)
+    }
+
+    setData({
+      ...data,
+      filteredTable: newTable,
+      sortedTable: sortTable(newTable)
+    })
+    setPage(1)
+  }
+}
+
+function getCompareKey (rawValue) {
+  return typeof rawValue === 'number' ? rawValue : (rawValue?.toLowerCase?.() || '')
+}
+
+function sortCompare (rawValue1, rawValue2, multiplier) {
+  const value1 = getCompareKey(rawValue1)
+  const value2 = getCompareKey(rawValue2)
+  // Numbers go before strings
+  if (typeof value1 === 'number' && typeof value2 !== 'number') {
+    return -1 * multiplier
+  } else if (typeof value1 !== 'number' && typeof value2 === 'number') {
+    return multiplier
+  }
+
+  // Both of same type or falsy
+  if (value1 < value2) {
+    return -multiplier
+  } else if (value2 < value1) {
+    return multiplier
+  } else {
+    return 0
+  }
+}
+
+function getSortTable (sortData) {
+  return table => {
+    const col = sortData.columnNumber
+
+    return col === null
+      ? table
+      : [...table].sort((row1, row2) => sortCompare(row1[col]?.text, row2[col]?.text, sortData.isAsc ? 1 : -1))
+  }
+}
+
+function getOnColumnSort (sortData, setSortData) {
+  return cellIndex => {
+    if (sortData.columnNumber === cellIndex) {
+      if (sortData.isAsc) {
+        setSortData({ columnNumber: cellIndex, isAsc: false })
+      } else {
+        setSortData({ columnNumber: null, isAsc: true })
+      }
+    } else {
+      setSortData({
+        columnNumber: cellIndex,
+        isAsc: true
+      })
+    }
+  }
+}
+
+export function StandaloneTable ({ src, features: rawFeatures, prefix, 'show-title-description': showTitleDescription }) {
+  const [data, setData] = useState({ ready: false, table: [], filteredTable: [], sortedTable: [], isQueryable: false, title: null, error: null })
+  const [page, setPage] = useState(null)
+  const [sortData, setSortData] = useState({ columnNumber: null, isAsc: true })
+  const features = useFeatures(rawFeatures)
+  const [id] = useState(() => `_${crypto.randomUUID()}`)
+
+  const sortTable = getSortTable(sortData)
+  const onQuery = getOnQuery(data, setData, sortTable, setPage)
+  const onColumnSort = getOnColumnSort(sortData, setSortData)
+
+  useEffect(() => {
+    (async function () {
+      try {
+        const isQueryable = features.search || features.filter
+        setData(await fetchAndParseSpreadsheet(src, isQueryable))
+        if (isQueryable) {
+          setPage(1)
+        }
+      } catch (error) {
+        setData({ error: error.message })
+      }
+    })()
+  }, [src])
+
+  useEffect(() => {
+    setData({
+      ...data,
+      sortedTable: sortData.columnNumber === null ? data.filteredTable : sortTable(data.filteredTable)
+    })
+  }, [sortData.columnNumber, sortData.isAsc])
+
+  if (data.error) {
+    return h(Message, data.error)
+  }
+
+  // Title and Subtitle
+  let headerContent
+  if (showTitleDescription === 'true') {
+    headerContent = [
+      data.workbookTitle && h(Heading, { _level: 3 }, data.workbookTitle),
+      data.title && h(Heading, { _level: 4 }, prefix ? `${prefix} ${data.title}` : data.title),
+    ]
+  } else {
+    headerContent = [data.title && h(Heading, { _level: 3 }, data.title)]
+  }
+
+  return data.ready && h(Box, { className: 'bg-bga text-txa rounded-2xl' },
+    ...headerContent,
+    h(Filter, { data, features, onQuery, id }),
+    h(TableContents, { features, data, sortData, page, setPage, onColumnSort, id, 'aria-live': 'polite' }),
+    showTitleDescription === 'true' && data.workbookDescription && h('p', {}, data.workbookDescription)
+  )
+}
+
+register(StandaloneTable, 'standalone-table')

package/src/wcs/components/station-locator/station-locator.js

@@ -0,0 +1,49 @@
+const { h, register, preactHooks, getConsent } = globalThis.ami
+const { useRef, useEffect } = preactHooks
+
+const POLL_INTERVAL = 1000
+
+function StationLocator ({ src }) {
+  const ref = useRef(null)
+
+  // Deep linking.
+  const url = new URL(src)
+  const params = new URLSearchParams(location.search)
+  const filters = params.get('station-locator-filters')
+  filters && url.searchParams.set('prefilters', filters)
+
+  useEffect(() => {
+    let interval = null
+    if (!ref.current) {
+      return 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, ref.current])
+
+  return h('iframe', {
+    allow: 'clipboard-write; geolocation',
+    ref,
+    className: 'block w-full rounded-2xl border border-txa/20 sm:h-svh md:h-svh lg:aspect-4/3',
+    style: 'max-height: calc(100svh - 48px)',
+    src: url.href
+  })
+}
+
+register(StationLocator, 'station-locator')

package/src/wcs/components/store-badges/badges.js

@@ -0,0 +1,60 @@
+export const google = text => `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="200" version="1.1" viewBox="0 0 180 53.333" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <clipPath id="clipPath5">
+      <path transform="translate(-140 -10)" d="m0 60h155v-60h-155z"/>
+    </clipPath>
+    <clipPath id="clipPath7">
+      <path transform="translate(-140 -50)" d="m0 60h155v-60h-155z"/>
+    </clipPath>
+    <clipPath id="clipPath25">
+      <path d="m0 60h155v-60h-155z"/>
+    </clipPath>
+    <clipPath id="clipPath27">
+      <path transform="translate(-30.717 -30.576)" d="m0 60h155v-60h-155z"/>
+    </clipPath>
+    <clipPath id="clipPath29">
+      <path transform="translate(-41.488 -32.5)" d="m0 60h155v-60h-155z"/>
+    </clipPath>
+    <clipPath id="clipPath31">
+      <path transform="translate(-20.07 -40.723)" d="m0 60h155v-60h-155z"/>
+    </clipPath>
+    <clipPath id="clipPath33">
+      <path transform="translate(-30.796 -29.999)" d="m0 60h155v-60h-155z"/>
+    </clipPath>
+  </defs>
+  <g>
+    <path transform="matrix(1.3333 0 0 -1.3333 173.33 53.333)" d="m0 0h-125c-2.75 0-5 2.25-5 5v30c0 2.75 2.25 5 5 5h125c2.75 0 5-2.25 5-5v-30c0-2.75-2.25-5-5-5" clip-path="url(#clipPath5)"/>
+    <path transform="matrix(1.3333 0 0 -1.3333 173.33 .000266)" d="m0 0h-125c-2.75 0-5-2.25-5-5v-30c0-2.75 2.25-5 5-5h125c2.75 0 5 2.25 5 5v30c0 2.75-2.25 5-5 5m0-0.8c2.316 0 4.2-1.884 4.2-4.2v-30c0-2.316-1.884-4.2-4.2-4.2h-125c-2.316 0-4.2 1.884-4.2 4.2v30c0 2.316 1.884 4.2 4.2 4.2z" clip-path="url(#clipPath7)" fill="#a6a6a6"/>
+    <path transform="matrix(1.3333 0 0 -1.3333 -13.333 66.667)" d="m116.94 20h1.866v12.501h-1.866zm16.807 7.998-2.139-5.42h-0.064l-2.22 5.42h-2.01l3.329-7.575-1.897-4.214h1.945l5.131 11.789zm-10.582-6.578c-0.612 0-1.464 0.305-1.464 1.062 0 0.964 1.061 1.334 1.978 1.334 0.82 0 1.207-0.177 1.705-0.418-0.145-1.158-1.142-1.978-2.219-1.978m0.225 6.851c-1.351 0-2.751-0.595-3.329-1.914l1.656-0.691c0.354 0.691 1.013 0.917 1.705 0.917 0.965 0 1.946-0.579 1.962-1.609v-0.128c-0.338 0.193-1.061 0.482-1.946 0.482-1.785 0-3.603-0.981-3.603-2.814 0-1.673 1.464-2.751 3.104-2.751 1.255 0 1.947 0.563 2.381 1.223h0.064v-0.965h1.801v4.793c0 2.219-1.656 3.457-3.795 3.457m-11.532-1.795h-2.654v4.285h2.654c1.395 0 2.187-1.155 2.187-2.142 0-0.969-0.792-2.143-2.187-2.143m-0.048 6.025h-4.471v-12.501h1.865v4.736h2.606c2.068 0 4.101 1.498 4.101 3.883s-2.033 3.882-4.101 3.882m-24.381-11.083c-1.289 0-2.368 1.079-2.368 2.561 0 1.498 1.079 2.594 2.368 2.594 1.273 0 2.271-1.096 2.271-2.594 0-1.482-0.998-2.561-2.271-2.561m2.143 5.88h-0.065c-0.419 0.499-1.224 0.95-2.239 0.95-2.127 0-4.076-1.868-4.076-4.269 0-2.384 1.949-4.237 4.076-4.237 1.015 0 1.82 0.451 2.239 0.967h0.065v-0.613c0-1.627-0.87-2.497-2.272-2.497-1.144 0-1.853 0.822-2.143 1.515l-1.627-0.677c0.467-1.128 1.708-2.513 3.77-2.513 2.191 0 4.044 1.289 4.044 4.43v7.637h-1.772zm3.061-7.298h1.869v12.502h-1.869zm4.623 4.124c-0.048 1.643 1.273 2.481 2.223 2.481 0.742 0 1.37-0.37 1.579-0.902zm5.8 1.418c-0.354 0.95-1.434 2.706-3.641 2.706-2.191 0-4.011-1.723-4.011-4.253 0-2.384 1.804-4.253 4.22-4.253 1.95 0 3.078 1.192 3.545 1.885l-1.45 0.967c-0.483-0.709-1.144-1.176-2.095-1.176-0.95 0-1.627 0.435-2.062 1.288l5.687 2.353zm-45.308 1.401v-1.804h4.317c-0.129-1.015-0.467-1.756-0.982-2.271-0.629-0.629-1.612-1.322-3.335-1.322-2.659 0-4.737 2.143-4.737 4.801 0 2.659 2.078 4.801 4.737 4.801 1.434 0 2.481-0.564 3.254-1.289l1.273 1.273c-1.08 1.031-2.513 1.821-4.527 1.821-3.641 0-6.702-2.965-6.702-6.606s3.061-6.605 6.702-6.605c1.965 0 3.447 0.645 4.607 1.853 1.193 1.192 1.563 2.867 1.563 4.221 0 0.419-0.032 0.805-0.097 1.127zm11.079-5.525c-1.289 0-2.401 1.063-2.401 2.577 0 1.531 1.112 2.578 2.401 2.578 1.288 0 2.4-1.047 2.4-2.578 0-1.514-1.112-2.577-2.4-2.577m0 6.83c-2.353 0-4.27-1.788-4.27-4.253 0-2.449 1.917-4.253 4.27-4.253 2.352 0 4.269 1.804 4.269 4.253 0 2.465-1.917 4.253-4.269 4.253m9.313-6.83c-1.289 0-2.401 1.063-2.401 2.577 0 1.531 1.112 2.578 2.401 2.578s2.4-1.047 2.4-2.578c0-1.514-1.111-2.577-2.4-2.577m0 6.83c-2.352 0-4.269-1.788-4.269-4.253 0-2.449 1.917-4.253 4.269-4.253s4.269 1.804 4.269 4.253c0 2.465-1.917 4.253-4.269 4.253" clip-path="url(#clipPath25)" fill="#fff"/>
+    <path transform="matrix(1.3333 0 0 -1.3333 27.623 25.899)" d="m0 0-10.647-11.3c1e-3 -2e-3 1e-3 -5e-3 2e-3 -7e-3 0.327-1.227 1.447-2.13 2.777-2.13 0.532 0 1.031 0.144 1.459 0.396l0.034 0.02 11.984 6.915z" clip-path="url(#clipPath27)" fill="#ea4335"/>
+    <path transform="matrix(1.3333 0 0 -1.3333 41.984 23.333)" d="m0 0-0.01 7e-3 -5.174 2.999-5.829-5.187 5.85-5.848 5.146 2.969c0.902 0.488 1.515 1.439 1.515 2.535 0 1.09-0.604 2.036-1.498 2.525" clip-path="url(#clipPath29)" fill="#fbbc04"/>
+    <path transform="matrix(1.3333 0 0 -1.3333 13.427 12.37)" d="m0 0c-0.064-0.236-0.098-0.484-0.098-0.74v-19.968c0-0.256 0.034-0.504 0.099-0.739l11.012 11.011z" clip-path="url(#clipPath31)" fill="#4285f4"/>
+    <path transform="matrix(1.3333 0 0 -1.3333 27.728 26.668)" d="m0 0 5.51 5.509-11.97 6.94c-0.435 0.261-0.943 0.411-1.486 0.411-1.33 0-2.452-0.905-2.779-2.133 0-1e-3 -1e-3 -2e-3 -1e-3 -3e-3z" clip-path="url(#clipPath33)" fill="#34a853"/>
+  </g>
+  <text x="54.212109" y="17.529634" fill="#f9f9f9" font-family="Arial" font-size="11px" font-weight="bold" letter-spacing=".2px" xml:space="preserve"><tspan x="54.212109" y="17.529634" font-family="Arial" font-size="11px" font-weight="bold" letter-spacing=".2px">${text.toUpperCase()}</tspan></text>
+</svg>
+`
+
+export const apple = text => `<?xml version="1.0" encoding="UTF-8"?>
+<svg id="livetype" width="200" version="1.1" viewBox="0 0 119.66 40" xmlns="http://www.w3.org/2000/svg">
+  <path d="m110.13 0h-100.6c-0.3667 0-0.729 0-1.0947 2e-3 -0.30615 2e-3 -0.60986 0.00781-0.91895 0.0127a13.215 13.215 0 0 0-2.0039 0.17671 6.6651 6.6651 0 0 0-1.9009 0.627 6.4378 6.4378 0 0 0-1.6186 1.1787 6.2584 6.2584 0 0 0-1.1782 1.6211 6.6012 6.6012 0 0 0-0.625 1.9033 12.993 12.993 0 0 0-0.1792 2.002c-0.00928 0.3066-0.01026 0.61422-0.01515 0.92086v23.114c0.00489 0.3105 0.00587 0.6113 0.01515 0.9219a12.992 12.992 0 0 0 0.1792 2.0019 6.5876 6.5876 0 0 0 0.625 1.9043 6.2078 6.2078 0 0 0 1.1782 1.6143 6.2744 6.2744 0 0 0 1.6186 1.1787 6.7008 6.7008 0 0 0 1.9009 0.6308 13.455 13.455 0 0 0 2.0039 0.1768c0.30909 0.0068 0.6128 0.0107 0.91895 0.0107 0.36572 2e-3 0.72805 2e-3 1.0947 2e-3h100.6c0.3594 0 0.7246 0 1.084-2e-3 0.3047 0 0.6172-0.0039 0.9219-0.0107a13.279 13.279 0 0 0 2-0.1768 6.8043 6.8043 0 0 0 1.9082-0.6308 6.2774 6.2774 0 0 0 1.6172-1.1787 6.3948 6.3948 0 0 0 1.1816-1.6143 6.6041 6.6041 0 0 0 0.6191-1.9043 13.506 13.506 0 0 0 0.1856-2.0019c4e-3 -0.3106 4e-3 -0.6114 4e-3 -0.9219 8e-3 -0.3633 8e-3 -0.7246 8e-3 -1.0938v-20.929c0-0.36621 0-0.72949-8e-3 -1.0918 0-0.30664 0-0.61426-4e-3 -0.9209a13.507 13.507 0 0 0-0.1856-2.002 6.6177 6.6177 0 0 0-0.6191-1.9033 6.4662 6.4662 0 0 0-2.7988-2.7998 6.7675 6.7675 0 0 0-1.9082-0.627 13.044 13.044 0 0 0-2-0.17676c-0.3047-0.00488-0.6172-0.01074-0.9219-0.01269-0.3594-2e-3 -0.7246-2e-3 -1.084-2e-3z" fill="#a6a6a6"/>
+  <path d="m8.4448 39.125c-0.30468 0-0.602-0.0039-0.90429-0.0107a12.687 12.687 0 0 1-1.8691-0.1631 5.8838 5.8838 0 0 1-1.6567-0.5479 5.4057 5.4057 0 0 1-1.397-1.0166 5.3208 5.3208 0 0 1-1.0205-1.3965 5.7219 5.7219 0 0 1-0.543-1.6572 12.414 12.414 0 0 1-0.1665-1.875c-0.00634-0.2109-0.01464-0.9131-0.01464-0.9131v-23.101s0.00884-0.69141 0.01469-0.89454a12.37 12.37 0 0 1 0.16553-1.8721 5.7555 5.7555 0 0 1 0.54346-1.6621 5.3735 5.3735 0 0 1 1.0151-1.398 5.5654 5.5654 0 0 1 1.4023-1.0225 5.8231 5.8231 0 0 1 1.6533-0.54394 12.586 12.586 0 0 1 1.8755-0.16406l0.90232-0.01221h102.77l0.9131 0.0127a12.385 12.385 0 0 1 1.8584 0.16259 5.9383 5.9383 0 0 1 1.6709 0.54785 5.5937 5.5937 0 0 1 2.415 2.4199 5.7627 5.7627 0 0 1 0.5352 1.6489 12.995 12.995 0 0 1 0.1738 1.8872c3e-3 0.2832 3e-3 0.5874 3e-3 0.89014 8e-3 0.375 8e-3 0.73193 8e-3 1.0918v20.929c0 0.3633 0 0.7178-8e-3 1.0752 0 0.3252 0 0.6231-4e-3 0.9297a12.731 12.731 0 0 1-0.1709 1.8535 5.739 5.739 0 0 1-0.54 1.67 5.4803 5.4803 0 0 1-1.0156 1.3857 5.4129 5.4129 0 0 1-1.3994 1.0225 5.8617 5.8617 0 0 1-1.668 0.5498 12.542 12.542 0 0 1-1.8692 0.1631c-0.2929 0.0068-0.5996 0.0107-0.8974 0.0107l-1.084 2e-3z"/>
+  <g data-name="&lt;Group&gt;">
+    <g fill="#fff" data-name="&lt;Group&gt;">
+      <path id="_Path_" d="m24.769 20.301a4.9488 4.9488 0 0 1 2.3566-4.1521 5.0657 5.0657 0 0 0-3.9912-2.1577c-1.6792-0.17626-3.3072 1.0048-4.1629 1.0048-0.87227 0-2.1898-0.98733-3.6085-0.95814a5.3153 5.3153 0 0 0-4.4729 2.7279c-1.934 3.3484-0.49141 8.2695 1.3612 10.976 0.9269 1.3254 2.0102 2.8058 3.4276 2.7533 1.3871-0.05753 1.9051-0.88448 3.5794-0.88448 1.6588 0 2.1448 0.88448 3.591 0.8511 1.4884-0.02416 2.4261-1.3312 3.3205-2.6691a10.962 10.962 0 0 0 1.5184-3.0925 4.782 4.782 0 0 1-2.9192-4.3992z" data-name="&lt;Path&gt;"/>
+      <path d="m22.037 12.211a4.8725 4.8725 0 0 0 1.1145-3.4906 4.9575 4.9575 0 0 0-3.2076 1.6596 4.6363 4.6363 0 0 0-1.1437 3.3614 4.099 4.099 0 0 0 3.2368-1.5304z" data-name="&lt;Path&gt;"/>
+    </g>
+  </g>
+  <g fill="#fff">
+    <path d="m42.302 27.14h-4.7334l-1.1367 3.3564h-2.0049l4.4834-12.418h2.083l4.4834 12.418h-2.0391zm-4.2432-1.5488h3.752l-1.8496-5.4473h-0.05176z"/>
+    <path d="m55.16 25.97c0 2.8135-1.5059 4.6211-3.7783 4.6211a3.0693 3.0693 0 0 1-2.8486-1.584h-0.043v4.4844h-1.8584v-12.049h1.7989v1.5059h0.03418a3.2116 3.2116 0 0 1 2.8828-1.6006c2.2978 1e-5 3.8125 1.8164 3.8125 4.6221zm-1.9102 0c0-1.833-0.94727-3.0381-2.3926-3.0381-1.4199 0-2.375 1.2305-2.375 3.0381 0 1.8242 0.95508 3.0459 2.375 3.0459 1.4453 0 2.3926-1.1963 2.3926-3.0459z"/>
+    <path d="m65.125 25.97c0 2.8135-1.5059 4.6211-3.7783 4.6211a3.0693 3.0693 0 0 1-2.8486-1.584h-0.043v4.4844h-1.8584v-12.049h1.7988v1.5059h0.03418a3.2116 3.2116 0 0 1 2.8828-1.6006c2.2979 0 3.8125 1.8164 3.8125 4.6221zm-1.9102 0c0-1.833-0.94727-3.0381-2.3926-3.0381-1.4199 0-2.375 1.2305-2.375 3.0381 0 1.8242 0.95508 3.0459 2.375 3.0459 1.4453 0 2.3926-1.1963 2.3926-3.0459z"/>
+    <path d="m71.71 27.036c0.1377 1.2314 1.334 2.04 2.9688 2.04 1.5664 0 2.6934-0.80859 2.6934-1.919 0-0.96387-0.67969-1.541-2.2891-1.9365l-1.6094-0.3877c-2.2803-0.55078-3.3389-1.6172-3.3389-3.3477 0-2.1426 1.8672-3.6143 4.5186-3.6143 2.624 0 4.4228 1.4717 4.4834 3.6143h-1.876c-0.1123-1.2393-1.1367-1.9873-2.6338-1.9873s-2.5215 0.75684-2.5215 1.8584c0 0.87793 0.6543 1.3945 2.2549 1.79l1.3682 0.33594c2.5478 0.60254 3.6064 1.626 3.6064 3.4424 0 2.3232-1.8506 3.7783-4.794 3.7783-2.7539 0-4.6133-1.4209-4.7334-3.667z"/>
+    <path d="m83.346 19.3v2.1426h1.7217v1.4717h-1.7217v4.9912c0 0.77539 0.34473 1.1367 1.1016 1.1367a5.8075 5.8075 0 0 0 0.61133-0.043v1.4629a5.1035 5.1035 0 0 1-1.0322 0.08594c-1.833 0-2.5478-0.68848-2.5478-2.4443v-5.1894h-1.3164v-1.4717h1.3164v-2.1426z"/>
+    <path d="m86.065 25.97c0-2.8486 1.6777-4.6387 4.294-4.6387 2.625 0 4.2949 1.79 4.2949 4.6387 0 2.8564-1.6611 4.6387-4.2949 4.6387-2.6329 0-4.294-1.7822-4.294-4.6387zm6.6953 0c0-1.9541-0.89551-3.1074-2.4014-3.1074s-2.4004 1.1621-2.4004 3.1074c0 1.9619 0.89453 3.1064 2.4004 3.1064s2.4013-1.1445 2.4013-3.1064z"/>
+    <path d="m96.186 21.442h1.7725v1.541h0.043a2.1594 2.1594 0 0 1 2.1777-1.6357 2.8662 2.8662 0 0 1 0.63672 0.06934v1.7383a2.5979 2.5979 0 0 0-0.835-0.1123 1.8726 1.8726 0 0 0-1.9365 2.083v5.3701h-1.8584z"/>
+    <path d="m109.38 27.837c-0.25 1.6436-1.8506 2.7715-3.8984 2.7715-2.6338 0-4.2686-1.7646-4.2686-4.5957 0-2.8398 1.6436-4.6816 4.1904-4.6816 2.5049 0 4.0801 1.7207 4.0801 4.4658v0.63672h-6.3945v0.1123a2.358 2.358 0 0 0 2.4356 2.5644 2.0483 2.0483 0 0 0 2.0908-1.2734zm-6.2822-2.7022h4.5264a2.1773 2.1773 0 0 0-2.2207-2.2978 2.292 2.292 0 0 0-2.3057 2.2979z"/>
+  </g>
+  <text x="33.771507" y="14.804743" fill="#ffffff" font-family="Arial" font-size="8.5px" letter-spacing=".5px" xml:space="preserve"><tspan x="33.771507" y="14.804743">${text}</tspan></text>
+</svg>`

package/src/wcs/components/store-badges/store-badges.js

@@ -0,0 +1,93 @@
+import { google, apple } from './badges.js'
+import { NAVIGATION_CLOSE } from '#acinguiux-preact/main/shared/icons.js'
+import { encodeQR } from 'qr'
+
+const { h, t, register, matter, preactHooks } = globalThis.ami
+const { useState, useMemo } = preactHooks
+const { Box, Heading, Link, SVG, Popup, Button } = matter
+
+function StoreBadges ({
+  title,
+  text,
+  'app-store-link': appStoreLink,
+  'play-store-link': playStoreLink,
+}) {
+  return h(Box, { className: 'rounded-2xl bg-bga text-txa h-full' },
+    title && h(Heading, { _level: 3, _align: 'center' }, title),
+    text && h('p', { className: 'text-center' }, text),
+    h('div', { className: 'flex gap-5 justify-center max-h-16' },
+      h(StoreLink, {
+        name: t('Download on the {0}', ''),
+        value: appStoreLink,
+        'aria-label': t('Download on the {0}', 'App Store'),
+        iconFunc: apple
+      }),
+      h(StoreLink, {
+        name: t('Get it on {0}', ''),
+        value: playStoreLink,
+        'aria-label': t('Get it on {0}', 'Google Play'),
+        iconFunc: google
+      })
+    )
+  )
+}
+
+function StoreLink ({ name, value, 'aria-label': ariaLabel, iconFunc }) {
+  const popupTitle = t('Scan the QR code to download the app or click the link below')
+  const [showPopup, setShowPopup] = useState(false)
+  const isMobile = useMemo(() => /iPad|iPhone|iPod|Android/.test(navigator.userAgent), [])
+  const qrCode = useMemo(() => value ? encodeQR(value, 'svg', { ecc: 'low' }) : null, [value])
+
+  if (isMobile || !value) {
+    return h(Link, { _model: { name, value }, 'aria-label': ariaLabel, className: 'h-16' },
+      h(SVG, { _tall: true, _model: { src: iconFunc(name) } })
+    )
+  }
+
+  return [
+    h('button', {
+      className: 'clickable cursor-pointer h-16',
+      'aria-label': ariaLabel,
+      'aria-haspopup': 'dialog',
+      type: 'button',
+      onClick: () => {
+        setShowPopup(true)
+      },
+      children: h(SVG, { _tall: true, _model: { src: iconFunc(name) } }),
+    }),
+    h(Popup, {
+      _show: showPopup,
+      _layout: 'center',
+      // Synchronise state with native popup open/close.
+      onBeforeToggle: event => setShowPopup(event.newState === 'open'),
+      children: [
+        h('div', { className: 'flex gap-2' },
+          h('div', { className: 'shrink-0 grow-0 order-last' },
+            h(Button, {
+              _variant: 'plain',
+              _textless: true,
+              _size: 'xs',
+              _model: {
+                name: t('Dismiss'),
+                icon: NAVIGATION_CLOSE
+              },
+              onClick: event => {
+                event.preventDefault()
+                setShowPopup(false)
+              }
+            })
+          ),
+          h(Heading, { _level: 3 }, popupTitle)
+        ),
+        qrCode && h('div', { style: 'fill: currentColor', className: 'm-auto w-4/5' },
+          h(SVG, { _model: { src: qrCode, alt: popupTitle } })
+        ),
+        h('div',
+          h(Link, { _variant: 'underline', _model: { name: ariaLabel, value } })
+        )
+      ]
+    })
+  ]
+}
+
+register(StoreBadges, 'store-badges')

package/src/wcs/components/topbar-button/person.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#404040" class="block w-full h-full"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 12c2.213 0 4-1.787 4-4s-1.787-4-4-4-4 1.787-4 4 1.787 4 4 4Zm0 2c-2.667 0-8 1.61-8 4.537v.963a.5.5 0 0 0 .5.5h15a.5.5 0 0 0 .5-.5v-.963C20 15.61 14.667 14 12 14Z"></path></svg>

package/src/wcs/components/topbar-button/topbar-button.js

@@ -0,0 +1,22 @@
+const { h, register, matter, MEDIUM } = globalThis.ami
+const { Button } = matter
+
+const DEFAULT_POSITION = 'absolute'
+
+function TopbarButton ({ label, href, icon, position }) {
+  return h('div', {
+    className: `top-2 ${position ?? DEFAULT_POSITION} z-10`,
+    style: 'inset-inline-end: max(8px, calc((100vw - var(--page-width)) / 2))',
+    children: h(Button, {
+      _size: 'xs',
+      _style: id => `
+        @media screen and (max-width: ${MEDIUM - 1}px) {
+          ${id} > *:first-child { display: none }
+        }
+      `,
+      _model: { name: label, value: href, icon },
+    }),
+  })
+}
+
+register(TopbarButton, 'topbar-button')