acinguiux-preact-components 0.0.1

package/src/wcs/components/formstack-form/fields/radio.js

@@ -0,0 +1,24 @@
+const { h, matter } = globalThis.ami
+
+export function Radio ({ field }) {
+  const label = field.required === '1' ? `${field.label} *` : field.label
+  let id = 1
+
+  return h('fieldset', { className: 'block space-y-1' },
+    h('legend', { className: 'block font-bold' }, label),
+    field.options.map(option =>
+      h('label', { className: 'space-x-2 flex items-center cursor-pointer' },
+        h(matter.Input, {
+          ...field.attrs,
+          id: `${field.attrs.id}_${id++}`,
+          type: 'radio',
+          value: option.value,
+          checked: field.attrs.value === option.value ? true : null,
+          'data-label': field.label
+        }),
+        h('span', option.label)
+      )
+    ),
+    field.description && h('span', { className: 'text-sm' }, field.description)
+  )
+}

package/src/wcs/components/formstack-form/fields/rating.js

@@ -0,0 +1,53 @@
+const { h, preactHooks } = globalThis.ami
+const { useState } = preactHooks
+
+export function Rating ({ field }) {
+  const [clicked, setClicked] = useState(false)
+
+  const label = field.required === '1' ? `${field.label} *` : field.label
+  return h('fieldset', { role: 'radiogroup', className: 'block' },
+    h('legend', { id: `legend-${field.id}`, className: 'font-bold' }, label),
+    h('div', {
+      className: 'flex justify-start',
+      children: Array.from({ length: field.count }, (_, ii) => {
+        const index = ii + 1
+        const id = `field_${field.id}_${index}`
+        return [
+          h('label', { className: 'sr-only', for: id }, index),
+          h('input', {
+            ...field.attrs,
+            value: index,
+            id,
+            onClick: () => setClicked(true),
+            type: 'radio',
+            className: 'relative inline-block appearance-none w-8 h-8',
+            'data-label': field.label,
+            _style: styleId => `
+              ${styleId}::before {
+                cursor:pointer;
+                position: absolute;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: hsl(var(--color-txa));
+                opacity: ${clicked ? '1' : '0.2'};
+                left: 0;
+                right: 0;
+                top: 0;
+                bottom: 0;
+                content: "★";
+                font-size: 28px;
+                transition: opacity var(--anim-time);
+                text-shadow: 0 0 2px hsl(var(--color-txa));
+              }
+              input:checked ~ input${styleId}::before {
+                opacity: 0.2;
+              }
+            `
+          })
+        ]
+      })
+    }
+    )
+  )
+}

package/src/wcs/components/formstack-form/fields/section.js

@@ -0,0 +1,8 @@
+import { Wrapper } from './wrapper'
+const { h, matter } = globalThis.ami
+
+export function Section ({ field }) {
+  return h(Wrapper, { field },
+    h(matter.Heading, { _level: 4 }, field.section_heading)
+  )
+}

package/src/wcs/components/formstack-form/fields/select.js

@@ -0,0 +1,10 @@
+import { Wrapper } from './wrapper'
+const { h, matter } = globalThis.ami
+
+export function Select ({ field }) {
+  return h(Wrapper, { field },
+    h(matter.Input, { ...field.attrs, className: 'w-full', 'data-label': field.label },
+      field.options.map(option => h('option', { value: option.value }, option.label))
+    )
+  )
+}

package/src/wcs/components/formstack-form/fields/textarea.js

@@ -0,0 +1,8 @@
+import { Wrapper } from './wrapper'
+const { h, matter } = globalThis.ami
+
+export function Textarea ({ field }) {
+  return h(Wrapper, { field },
+    h(matter.Input, { ...field.attrs, 'data-label': field.label })
+  )
+}

package/src/wcs/components/formstack-form/fields/wrapper.js

@@ -0,0 +1,11 @@
+const { h } = globalThis.ami
+
+export function Wrapper ({ field, children }) {
+  const labelText = field.hide_label === '1' ? '' : field.label
+  const label = field.required === '1' ? `${labelText} *` : labelText
+  return h('div',
+    h('label', { for: field.attrs.id, className: 'block font-bold' }, label),
+    children,
+    field.description && h('span', { className: 'text-sm' }, field.description)
+  )
+}

package/src/wcs/components/formstack-form/formstack-form.js

@@ -0,0 +1,280 @@
+/* global process, DOMParser, alert, FileReader */
+import { Address } from './fields/address.js'
+import { Checkbox } from './fields/checkbox.js'
+import { DateTime } from './fields/date.js'
+import { Description } from './fields/description.js'
+import { Input } from './fields/input.js'
+import { Name } from './fields/name.js'
+import { Radio } from './fields/radio.js'
+import { Rating } from './fields/rating.js'
+import { Section } from './fields/section.js'
+import { Select } from './fields/select.js'
+import { Textarea } from './fields/textarea.js'
+
+const { h, register, preactHooks, matter } = globalThis.ami
+const { useState, useEffect } = preactHooks
+const { Box, Button, Icon, RichText, Form } = matter
+
+const ICON_SUCCESS = `
+<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="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM6.35355 13.3535L9.64645 16.6464C9.84171 16.8417 10.1583 16.8417 10.3536 16.6464L17.6477 9.35229C17.8425 9.15752 17.843 8.8419 17.6489 8.64644L16.9435 7.93604C16.7485 7.7396 16.4309 7.73904 16.2352 7.93479L10 14.17L7.76355 11.9422C7.56818 11.7476 7.25212 11.7479 7.05713 11.9429L6.35355 12.6464C6.15829 12.8417 6.15829 13.1583 6.35355 13.3535Z" fill="#343434"/>
+</svg>
+`
+
+const CAPTCHA_CONTAINER_ID = 'captcha-container'
+const SUCCESS_CODE = 200
+const DEFAULTS = {
+  FUNCTION_URL: process.env.FORMSTACK_FUNCTION_URL,
+  CAPTCHA_SITE_KEY: process.env.CAPTCHA_SITE_KEY,
+  SUCCESS_TEXT: 'Thank you. The form was submitted successfully.',
+  ERROR_TEXT: 'There was an error submitting the form. Please try again.',
+  CAPTCHA_POLICY_TEXT: `
+    This site is protected by reCAPTCHA and the Google
+    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
+    <a href="https://policies.google.com/terms">Terms of Service</a> apply.
+  `
+}
+
+// -----------------------------------------------------------------------------
+// Helper functions
+// -----------------------------------------------------------------------------
+
+function getStep (decimals) {
+  if (decimals === 0) {
+    return 'any'
+  }
+
+  if (!decimals) {
+    return undefined
+  }
+
+  return `.${Array.from({ length: decimals - 1 }, () => 0).join('')}1`
+}
+
+function getFieldType (field) {
+  return { phone: 'tel', name: 'text', address: 'text' }[field.type] ?? field.type
+}
+
+async function blobToBase64 (blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(reader.result.split(',')[1])
+    reader.onerror = reject
+    reader.readAsDataURL(blob)
+  })
+}
+
+async function getQueryString (formElement, captchaToken) {
+  const formData = new FormData(formElement)
+
+  // Convert blobs to base64.
+  for (const [fieldName, fieldValue] of formData) {
+    if (fieldValue instanceof Blob) {
+      const contents = await blobToBase64(fieldValue)
+      formData.set(fieldName, `${fieldValue.name};${contents}`)
+    }
+  }
+
+  // Add recaptcha token to the form data.
+  formData.append('g-recaptcha-response', captchaToken)
+
+  // Avoid encoding of square brackets in field names to match the Formstack API.
+  return `${new URLSearchParams(formData)}`
+    .split('&')
+    .map(par => {
+      const [name, value] = par.split('=')
+      return `${name.replaceAll('%5B', '[').replaceAll('%5D', ']')}=${value}`
+    })
+    .join('&')
+}
+
+function updateFormData (form) {
+  const dp = new DOMParser()
+  const doc = dp.parseFromString(form.html, 'text/html')
+  const formElement = doc.querySelector('form')
+
+  for (const field of form.fields) {
+    const fieldName = `field_${field.id}`
+    field.attrs = {
+      id: fieldName,
+      name: fieldName,
+      type: getFieldType(field),
+      size: field.size,
+      minlength: field.minlength || null,
+      maxlength: field.maxlength || null,
+      required: (field.required === '1' && field.hidden !== '1') || null,
+      disabled: field.readonly === '1' || null,
+      value: formElement.value ?? field.default ?? null,
+      placeholder: field.placeholder,
+      min: field.min_value,
+      max: field.max_value,
+      step: getStep(Number(field.decimals))
+    }
+
+    // Get default submit value.
+    form.submit_button_title ||= formElement.querySelector('input[type="submit"]').value
+
+    field.subfields = field?.visible_subfields?.reduce((obj, subfieldName) => {
+      // Extract subfield label.
+      obj[subfieldName] = {
+        label: formElement.querySelector(`label.fsSupporting[for="field${field.id}-${subfieldName}"]`).textContent
+      }
+
+      // Extract subfield options.
+      const options = formElement.querySelectorAll(`#field${field.id}-${subfieldName} option`)
+      if (options.length > 0) {
+        obj[subfieldName].options = [...options].map(option => ({
+          name: option.textContent,
+          value: option.value
+        }))
+      }
+
+      return obj
+    }, {})
+  }
+}
+
+function initCaptcha (sitekey) {
+  // Do not run if captcha has already been initialised or is disabled.
+  if (!sitekey || document.getElementById(CAPTCHA_CONTAINER_ID)) {
+    return
+  }
+
+  // Create a hidden global container for the captcha script and widget.
+  // Recaptcha does not work in Shadow DOM.
+  const captchaContainer = el('div', { id: CAPTCHA_CONTAINER_ID, style: 'display: none' }, [
+    el('script', { src: 'https://www.google.com/recaptcha/api.js?render=explicit&onload=captchaCallback' }),
+    el('div')
+  ])
+
+  // Callback to initialise the captcha widget once the API script is loaded.
+  globalThis.captchaCallback = () =>
+    globalThis.grecaptcha.render(captchaContainer.lastChild, { sitekey, badge: 'inline', size: 'invisible' })
+
+  document.body.appendChild(captchaContainer)
+}
+
+function el (tag, attrs, children) {
+  const element = document.createElement(tag)
+  Object.assign(element, attrs)
+  children && element.append(...children)
+  return element
+}
+
+// -----------------------------------------------------------------------------
+// Main components
+// -----------------------------------------------------------------------------
+
+export function FormstackForm (props) {
+  const {
+    'form-id': formId,
+    'success-text': successText = DEFAULTS.SUCCESS_TEXT,
+    'error-text': errorText = DEFAULTS.ERROR_TEXT,
+    'function-url': functionUrl = DEFAULTS.FUNCTION_URL,
+    'captcha-site-key': captchaSiteKey = DEFAULTS.CAPTCHA_SITE_KEY,
+    'captcha-policy-text': captchaPolicyText = DEFAULTS.CAPTCHA_POLICY_TEXT,
+  } = props
+
+  if (!formId) {
+    console.error('Missing form ID.')
+    return null
+  }
+
+  const getFormUrl = `${functionUrl}/api/get-form/${formId}`
+  const submitFormUrl = `${functionUrl}/api/submit-form/${formId}`
+
+  const [form, setForm] = useState(null)
+  const [success, setSuccess] = useState(false)
+
+  useEffect(() => {
+    initCaptcha(captchaSiteKey)
+    fetch(getFormUrl).then(res => res.json()).then(formData => {
+      updateFormData(formData)
+      setForm(formData)
+    })
+  }, [formId])
+
+  if (!form) {
+    return null
+  }
+
+  if (success) {
+    return h('div', { className: 'bg-bga text-txa rounded-2xl overflow-hidden', ariaLive: 'polite' },
+      h(Box,
+        h('div', { className: 'flex items-center justify-center flex-col space-y-2' },
+          h(Icon, ICON_SUCCESS),
+          h('span', { className: 'text-lg' }, successText)
+        )
+      )
+    )
+  }
+
+  async function submitForm (formElement, captchaToken) {
+    const res = await fetch(submitFormUrl, {
+      method: 'POST',
+      body: await getQueryString(formElement, captchaToken)
+    })
+
+    if (res.status === SUCCESS_CODE) {
+      setSuccess(true)
+    } else {
+      // Show alert in case of failure. This prevents the form from being wiped out.
+      alert(errorText)
+    }
+  }
+
+  return h(Form, {
+    name: form.name,
+    async onSubmit (event) {
+      const formElement = event.target
+      event.preventDefault()
+      // Prevent submission if recaptcha is not loaded.
+      if (!globalThis.grecaptcha) {
+        alert(errorText)
+        return
+      }
+
+      // Get the recaptcha token and submit the form.
+      globalThis.grecaptcha.ready(async () => {
+        const token = await globalThis.grecaptcha.execute()
+        await submitForm(formElement, token)
+      })
+    },
+    children: h(Box, { className: 'text-txa bg-bga rounded-2xl animate-fade' },
+      form.fields.map(field => h(Field, { field })),
+      h(Button, {
+        type: 'submit',
+        _model: { name: form.submit_button_title }
+      }),
+      h('div', { className: 'text-sm' },
+        h(RichText, captchaPolicyText)
+      )
+    )
+  })
+}
+
+function Field ({ field }) {
+  const fieldMap = [
+    { types: ['section'], field: Section },
+    { types: ['text', 'email', 'phone', 'number', 'file'], field: Input },
+    { types: ['textarea'], field: Textarea },
+    { types: ['datetime'], field: DateTime },
+    { types: ['select'], field: Select },
+    { types: ['radio'], field: Radio },
+    { types: ['checkbox'], field: Checkbox },
+    { types: ['name'], field: Name },
+    { types: ['rating'], field: Rating },
+    { types: ['address'], field: Address },
+    { types: ['richtext'], field: Description }
+  ]
+
+  const ResolvedField = fieldMap.find(entry => entry.types.includes(field.type))?.field
+  if (!ResolvedField) {
+    return null
+  }
+
+  const resolvedFieldComponent = h(ResolvedField, { field })
+  return field.hidden === '1' ? h('div', { className: 'hidden' }, resolvedFieldComponent) : resolvedFieldComponent
+}
+
+register(FormstackForm, 'formstack-form')

package/src/wcs/components/fuel-prices/fuel-prices.js

@@ -0,0 +1,45 @@
+const { h, register, matter, preactHooks } = globalThis.ami
+const { Box, Heading, Table } = matter
+const { useState, useEffect } = preactHooks
+
+// Define Preact component.
+function FuelPrices ({ src }) {
+  const [data, setData] = useState()
+
+  if (!src) {
+    console.error('Missing data source.')
+    return null
+  }
+
+  useEffect(() => {
+    (async () => {
+      const res = await fetch(src)
+      if (!res.ok) {
+        console.error(`Error fetching ${src}. Status: ${res.status}`)
+        return
+      }
+      const obj = await res.json()
+      setData({ ...obj, trail: [] })
+    })().catch(console.error)
+  }, [src])
+
+  if (!data) {
+    return null
+  }
+
+  const prices = data?.listPrices?.[0] ?? {}
+  const products = prices.products ?? []
+
+  return h(Box, { className: 'rounded-2xl bg-bga text-txa h-full' },
+    h(Heading, { _level: 3 }, data.title),
+    h('p', prices.date),
+    products.length > 0 && h(Table, products.map(p =>
+      h('tr',
+        h('th', { className: 'w-1/2' }, p.type),
+        h('td', { className: 'text-right' }, `${Number(p.price).toFixed(2)}\xa0${p.currencyCode}`)
+      )
+    ))
+  )
+}
+
+register(FuelPrices, 'fuel-prices')

package/src/wcs/components/furniture-overview/furniture-overview.js

@@ -0,0 +1,115 @@
+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 PromoWithPopup from '#acinguiux-preact/wcs/shared/promo-with-popup/promo-with-popup.js'
+
+const { h, register } = globalThis.ami
+
+const LABELS = {
+  SEARCH_TEXT: 'Search',
+  ORDER_BY: 'Sort by',
+  LOAD_MORE: 'Load more',
+  RESET_FILTERS: 'Reset filters',
+  ASCENDING: 'ascending',
+  DESCENDING: 'descending',
+  BACK_TO_OVERVIEW: 'Back to overview',
+  PREVIOUS_ITEM: 'Go to the previous item',
+  NEXT_ITEM: 'Go to the next item'
+}
+
+const FIELDS = {
+  REGION: 'Region',
+  PRODUCT_TYPE: 'Product Type',
+  MANUFACTURER: 'Manufacturer',
+  PRODUCT_NAME: 'Product name',
+  NOTES: 'Notes',
+  LOCATIONS: 'Locations',
+  BIGTALL: 'Big/Tall',
+  247: '24/7',
+  IMAGE_PATH: 'Image Path',
+  CHARACTERISTICS: 'Characteristics',
+  DESCRIPTION: 'Description'
+}
+
+// -----------------------------------------------------------------------------
+// Filtered Data hooks & helpers
+// -----------------------------------------------------------------------------
+function valueToArray (item, key) {
+  return item[key]?.split(',').map(value => value.trim())
+}
+
+async function getData ({ src, imageRoot }) {
+  const items = await fetchCsv(src)
+  const sanitizedImageRoot = (imageRoot ?? '').replace(/\/$/, '')
+
+  return items
+    .filter(item => item[FIELDS.PRODUCT_NAME])
+    .map(item => ({
+      ...item,
+      [FIELDS.REGION]: valueToArray(item, FIELDS.REGION),
+      [FIELDS.LOCATIONS]: valueToArray(item, FIELDS.LOCATIONS),
+      [FIELDS.CHARACTERISTICS]: valueToArray(item, FIELDS.CHARACTERISTICS),
+      [FIELDS.IMAGE_PATH]: `${sanitizedImageRoot}/${item[FIELDS.IMAGE_PATH]}`
+    }))
+}
+
+function Items ({ items }) {
+  // Convert items to models.
+  const models = items.map(item => ({
+    image: { src: item[FIELDS.IMAGE_PATH], alt: item[FIELDS.PRODUCT_NAME] },
+    title: item[FIELDS.PRODUCT_NAME],
+    text: item[FIELDS.REGION],
+    links: [
+      { name: FIELDS.REGION, value: item[FIELDS.REGION] },
+      { name: FIELDS.PRODUCT_TYPE, value: item[FIELDS.PRODUCT_TYPE] },
+      { name: FIELDS.MANUFACTURER, value: item[FIELDS.MANUFACTURER] },
+      { name: FIELDS.NOTES, value: item[FIELDS.NOTES] },
+      { name: FIELDS.LOCATIONS, value: item[FIELDS.LOCATIONS] },
+      { name: FIELDS.BIGTALL, value: item[FIELDS.BIGTALL] },
+      { name: FIELDS['247'], value: item[FIELDS['247']] },
+      { name: FIELDS.CHARACTERISTICS, value: item[FIELDS.CHARACTERISTICS] },
+      { name: FIELDS.DESCRIPTION, value: item[FIELDS.DESCRIPTION] }
+    ]
+  }))
+
+  return h('div', { className: 'grid gap-5 grid-cols-4 md:grid-cols-2 sm:grid-cols-1', role: 'list' }, models.map((_m, index) =>
+    h(PromoWithPopup, { models, currentModelIndex: index })
+  ))
+}
+
+function FurnitureOverview ({ src, 'image-root': imageRoot }) {
+  if (!src) {
+    return null
+  }
+  return h(FilteredData, {
+    getData,
+    filters: [{
+      type: 'text',
+      label: LABELS.SEARCH_TEXT,
+      keys: [FIELDS.PRODUCT_TYPE, FIELDS.MANUFACTURER, FIELDS.PRODUCT_NAME, FIELDS.NOTES, FIELDS.LOCATIONS, FIELDS.CHARACTERISTICS, FIELDS.DESCRIPTION]
+    }, {
+      type: 'select',
+      keys: ['', FIELDS.REGION]
+    }, {
+      type: 'select',
+      keys: ['', FIELDS.PRODUCT_TYPE]
+    }, {
+      type: 'select',
+      keys: ['', FIELDS.MANUFACTURER]
+    }, {
+      type: 'select',
+      keys: ['', FIELDS.LOCATIONS]
+    }, {
+      type: 'select',
+      keys: ['', FIELDS.CHARACTERISTICS]
+    }, {
+      type: 'order',
+      label: LABELS.ORDER_BY,
+      keys: [FIELDS.REGION, `-${FIELDS.REGION}`, FIELDS.PRODUCT_TYPE, `-${FIELDS.PRODUCT_TYPE}`, FIELDS.MANUFACTURER, `-${FIELDS.MANUFACTURER}`]
+    }],
+    Items,
+    src,
+    imageRoot
+  })
+}
+
+register(FurnitureOverview, 'furniture-overview')

package/src/wcs/components/gauge-value/gauge-value.js

@@ -0,0 +1,65 @@
+const { h, register, matter } = globalThis.ami
+const { Box } = matter
+
+// Default values for medium and low gauges
+const DEFAULT_MEDIUM = 89
+const DEFAULT_LOW = 50
+// Single percent of the circle is 360 / 100
+const SINGLE_PERCENT = 3.6
+// Default circle radius
+const DEFAULT_RADIUS = 30
+// We need to double Pi to calculate the circumference
+const DEFAULT_DOUBLE_PI = 2
+// Ensure the circle fill starts from the top of the circle
+const DEFAULT_TOPSTART = 4
+// Set the default circle perimeter
+const DEFAULT_CIRCLEPERIMETER = 360
+// Default circumference
+const DEFAULT_CIRCUMFERENCE = DEFAULT_DOUBLE_PI * Math.PI * DEFAULT_RADIUS
+// Default stroke dash offset
+const DEFAULT_STROKE_DASH_OFFSET = (1 / DEFAULT_TOPSTART) * DEFAULT_CIRCUMFERENCE
+
+function GaugeValue ({ score, label, medium, low }) {
+  // If medium or low are set, use those values
+  const mediumScore = medium ?? DEFAULT_MEDIUM
+  const lowScore = low ?? DEFAULT_LOW
+
+  // Set colours based on score, default is green
+  let stroke, fill, textFill
+
+  if (score <= lowScore) {
+    stroke = '#DD1D21'; fill = '#FFF2F0'; textFill = '#DD1D21'
+  } else if (score <= mediumScore) {
+    stroke = '#ED8A00'; fill = '#FFF3E5'; textFill = '#D54410'
+  } else {
+    stroke = '#008557'; fill = '#EFF7F2'; textFill = '#008557'
+  }
+
+  // Circle calculations to display the right gauge
+  const number = (score * SINGLE_PERCENT)
+  const angle = Number.parseFloat(number) || 0
+  const strokeDashArray = (angle / DEFAULT_CIRCLEPERIMETER) * DEFAULT_CIRCUMFERENCE
+
+  return h(Box, { className: 'bg-bga text-txa h-full rounded-2xl overflow-hidden' },
+    h('div', { className: 'items-center justify-center' },
+      h('div', { className: 'flex items-center h-full justify-center' },
+        h('svg', {
+          height: '64',
+          width: '64',
+          xmlns: 'http://www.w3.org/2000/svg',
+          _style: id => `
+            svg${id} { stroke-width: 4px; stroke: ${stroke}; fill: ${fill}; }
+            svg${id} text { font-family: var(--font-headers); font-size: 22px; stroke: none; fill: ${textFill}; }
+          `
+        },
+        h('circle', { cx: '32', cy: '32', r: '30', 'stroke-dasharray': [strokeDashArray, DEFAULT_CIRCUMFERENCE - strokeDashArray], 'stroke-dashoffset': DEFAULT_STROKE_DASH_OFFSET }),
+        h('text', { x: '50%', y: '52%', 'dominant-baseline': 'middle', 'text-anchor': 'middle' }, score)
+        )
+      ),
+      h('div', { className: 'flex items-center h-full justify-center' },
+        h('h4', { className: 'pt-2' }, label)
+      )
+    )
+  )
+}
+register(GaugeValue, 'gauge-value')