acinguiux-preact-components 0.0.1

package/src/wcs/components/universal-gallery/universal-gallery.js

@@ -0,0 +1,308 @@
+import PromoWithPopup from '#acinguiux-preact/wcs/shared/promo-with-popup/promo-with-popup.js'
+
+const { h, register, preactHooks, matter } = globalThis.ami
+const { useState, useEffect, useMemo } = preactHooks
+const { Box, Button, Input } = matter
+
+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 SUBCATEGORIES = {
+  Sanitaryware: [
+    'Showers',
+    'Mixer & Diverters',
+    'Flushing System',
+    'Faucets',
+    'Wash Basin',
+    'Sinks',
+    'Mirror',
+    'Bath Tub',
+    'Kamod',
+    'Toilet Paper Holder',
+    'Towel Stand',
+    'Shelf & Corner',
+    'Hooks',
+    'Soap Dispenser',
+    'Water Heaters',
+    'Washing Machine'
+  ],
+  Hardware: [
+    'Tandom Box',
+    'Hinges',
+    'Drawer Channel (Normal & Softclose)',
+    'Sliding Channel',
+    'Handles',
+    'Locks (Digital Locks & Normal Locks)',
+    'Lockers',
+    'Doorclosers',
+    'Doorprofiles',
+    'Liftup system',
+    'Kitchen corners',
+    'Pantery Unit',
+    'Wardrobe',
+    'Door chain',
+    'Door Stoper',
+    'Door Eyes'
+  ],
+  'Kitchen Appliances': [
+    'Hob & Induction Hob',
+    'Chimney',
+    'Oven Microwave',
+    'Refrigerator',
+    'Deep Fryer',
+    'Barbeque Grill',
+    'Toaster',
+    'Electric Kettle',
+    'Dishwasher',
+    'Juicer Mixer Grinder',
+    'Coffee Maker',
+    'Warmer Drawer',
+    'Cooking Range',
+    'Cold Pressed Juicer',
+    'Food Waste Disposer'
+  ],
+  Plywood: [
+    'Commercial',
+    'Waterproof',
+    'Marine',
+    'Fire Retardant',
+    'Flexible',
+    'MDF',
+    'Particle Board',
+    'Laminates',
+    'Veneers',
+    'Adhesives',
+  ]
+}
+
+function Items ({ items }) {
+  const models = items.map(item => ({
+    image: item.image,
+    title: item.title,
+    text: item.text, // This is usually the price
+    links: [
+      { name: 'Brand', value: item.brand || 'Generic' },
+      { name: 'Category', value: item.subcategory },
+      { name: 'Product', value: item.text },
+      { name: 'Description', value: item.description || item.title }
+    ]
+  }))
+
+  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 UniversalGallery ({ items = [], src }) {
+  const [allItems, setAllItems] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [searchTerm, setSearchTerm] = useState('')
+  const [mainCategory, setMainCategory] = useState('')
+  const [subcategory, setSubcategory] = useState('')
+  const [brand, setBrand] = useState('')
+
+  // Load data on mount
+  useEffect(() => {
+    (async () => {
+      try {
+        let data = []
+        if (items.length) {
+          data = items
+        } else if (src) {
+          const response = await fetch(src)
+          if (!response.ok) { throw new Error('Failed to load data') }
+          data = await response.json()
+        }
+        setAllItems(data)
+      } catch (error) {
+        console.error('Failed to load products:', error)
+      } finally {
+        setLoading(false)
+      }
+    })()
+  }, [])
+
+  // Parse URL hash on mount and hash change
+  useEffect(() => {
+    const updateFromHash = () => {
+      const hash = globalThis.location.hash.substring(1)
+      const params = new URLSearchParams(hash)
+      setMainCategory(params.get('mainCategory') || '')
+      setSubcategory(params.get('subcategory') || '')
+      setBrand(params.get('brand') || '')
+      setSearchTerm(params.get('q') || '')
+    }
+
+    updateFromHash()
+    globalThis.addEventListener('hashchange', updateFromHash)
+    return () => globalThis.removeEventListener('hashchange', updateFromHash)
+  }, [])
+
+  // Get unique values for dropdowns
+  const mainCategories = useMemo(() =>
+    [...new Set(allItems.map(p => p.mainCategory).filter(Boolean))].sort(),
+  [allItems]
+  )
+
+  const availableSubcategories = useMemo(() => {
+    if (mainCategory && SUBCATEGORIES[mainCategory]) {
+      return SUBCATEGORIES[mainCategory]
+    }
+    return [...new Set(allItems.map(p => p.subcategory).filter(Boolean))].sort()
+  }, [mainCategory, allItems])
+
+  const brands = useMemo(() =>
+    [...new Set(allItems.map(p => p.brand).filter(Boolean))].sort(),
+  [allItems]
+  )
+
+  // Filter items
+  const filteredItems = useMemo(() => {
+    let result = allItems
+
+    if (searchTerm) {
+      const search = searchTerm.toLowerCase()
+      result = result.filter(p =>
+        p.title?.toLowerCase().includes(search) ||
+        p.subcategory?.toLowerCase().includes(search) ||
+        p.brand?.toLowerCase().includes(search) ||
+        p.description?.toLowerCase().includes(search)
+      )
+    }
+
+    if (mainCategory) {
+      result = result.filter(p => p.mainCategory === mainCategory)
+    }
+
+    if (subcategory) {
+      result = result.filter(p => p.subcategory === subcategory)
+    }
+
+    if (brand) {
+      result = result.filter(p => p.brand === brand)
+    }
+
+    return result
+  }, [allItems, searchTerm, mainCategory, subcategory, brand])
+
+  // Update URL hash
+  const updateHash = newFilters => {
+    const params = new URLSearchParams()
+    if (newFilters.mainCategory || mainCategory) { params.set('mainCategory', newFilters.mainCategory || mainCategory) }
+    if (newFilters.subcategory || subcategory) { params.set('subcategory', newFilters.subcategory || subcategory) }
+    if (newFilters.brand || brand) { params.set('brand', newFilters.brand || brand) }
+    if (newFilters.search || searchTerm) { params.set('q', newFilters.search || searchTerm) }
+    globalThis.location.hash = params.toString()
+  }
+
+  const handleMainCategoryChange = e => {
+    setMainCategory(e.target.value)
+    setSubcategory('')
+    updateHash({ mainCategory: e.target.value, subcategory: '' })
+  }
+
+  const handleSubcategoryChange = e => {
+    setSubcategory(e.target.value)
+    updateHash({ subcategory: e.target.value })
+  }
+
+  const handleBrandChange = e => {
+    setBrand(e.target.value)
+    updateHash({ brand: e.target.value })
+  }
+
+  const handleSearchChange = e => {
+    setSearchTerm(e.target.value)
+    updateHash({ search: e.target.value })
+  }
+
+  const handleResetFilters = () => {
+    setSearchTerm('')
+    setMainCategory('')
+    setSubcategory('')
+    setBrand('')
+    globalThis.location.hash = ''
+  }
+
+  if (loading) {
+    return h('div', { className: 'text-center py-8' }, 'Loading...')
+  }
+
+  if (!allItems.length) {
+    return null
+  }
+
+  return h('div', { className: 'space-y-6' },
+    // Filter Bar
+    h(Box, { className: 'text-txa bg-bga rounded-2xl p-6' },
+      h('div', { className: 'grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-6' },
+        // Search
+        h(Input, {
+          _size: 'sm',
+          type: 'search',
+          name: 'search',
+          placeholder: LABELS.SEARCH_TEXT,
+          value: searchTerm,
+          onInput: handleSearchChange
+        }),
+        // Main Category
+        h(Input, {
+          _size: 'sm',
+          type: 'select',
+          name: 'mainCategory',
+          value: mainCategory,
+          onChange: handleMainCategoryChange,
+          children: [
+            h('option', { value: '' }, 'All Main Categories'),
+            ...mainCategories.map(cat => h('option', { value: cat }, cat))
+          ]
+        }),
+        // Subcategory
+        h(Input, {
+          _size: 'sm',
+          type: 'select',
+          name: 'subcategory',
+          value: subcategory,
+          onChange: handleSubcategoryChange,
+          disabled: !mainCategory,
+          children: [
+            h('option', { value: '' }, 'All Subcategories'),
+            ...availableSubcategories.map(subcat => h('option', { value: subcat }, subcat))
+          ]
+        }),
+        // Brand
+        h(Input, {
+          _size: 'sm',
+          type: 'select',
+          name: 'brand',
+          value: brand,
+          onChange: handleBrandChange,
+          children: [
+            h('option', { value: '' }, 'All Brands'),
+            ...brands.map(b => h('option', { value: b }, b))
+          ]
+        }),
+        // Reset
+        h(Button, {
+          _model: { name: LABELS.RESET_FILTERS },
+          onClick: handleResetFilters,
+          className: 'px-4 py-2'
+        })
+      ),
+      h('p', { className: 'text-sm text-gray-600 mt-4' }, `Showing ${filteredItems.length} products`)
+    ),
+    // Items
+    h(Items, { items: filteredItems })
+  )
+}
+
+register(UniversalGallery, 'universal-gallery')

package/src/wcs/components/zendesk-chat/zendesk-chat.js

@@ -0,0 +1,133 @@
+const { h, register, preactHooks } = globalThis.ami
+const { useRef, useEffect, useState } = preactHooks
+
+function ZendeskChat ({ src, locale, department, 'button-label': buttonLabel }) {
+  const ref = useRef()
+  const [width, setWidth] = useState(148)
+
+  useEffect(() => createWidget(ref.current, src, locale, department, buttonLabel, setWidth), [])
+
+  // Use z-20 for floating elements.
+  return h('div', {
+    ref,
+    className: 'box-content bg-transparent fixed bottom-0 end-24 z-20 print:hidden',
+    _style: id => `
+      ${id} { width: ${width}px; height: 70px }
+      ${id}[data-mobile=true] { width: 88px }
+      ${id}[data-open=true] { width: 374px; height: 600px; max-height: 100dvh }
+      ${id}[data-open=true][data-mobile=true] {
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+      }
+    `
+  })
+}
+
+// Documentation: https://developer.zendesk.com/api-reference/widget/introduction/
+function createWidget (div, src, locale, department, buttonLabel, setWidth) {
+  div.style = 'margin: 0; padding: 0;'
+
+  // Create inner iframe.
+  // Outer div constraints the size.
+  // Inner iframe is 100dvh to make sure retarded Zendesk 'responsiveness' works.
+  const innerIframe = document.createElement('iframe')
+  innerIframe.style = `border: none; width: ${window.innerWidth}px; height: 100%; position: absolute; bottom: 0; right: 0`
+  div.appendChild(innerIframe)
+
+  const resizeHandler = () => {
+    innerIframe.style.height = `${window.innerHeight}px`
+  }
+  window.addEventListener('resize', resizeHandler)
+
+  const innerWindow = innerIframe.contentWindow
+  const innerDoc = innerWindow.document
+  const innerBody = innerDoc.body
+  innerBody.style = 'margin: 0; padding: 0;'
+
+  const updateWidth = () => {
+    const launcher = innerDoc.getElementById('launcher')
+    const launcherWidth = launcher.clientWidth
+    if (launcherWidth > 0) {
+      // Add some padding as button is getting cropped in windows.
+      setWidth(launcherWidth + 20)
+    }
+  }
+
+  // Watch for changes and detect if chat is open and if the retarded 'responsiveness' is enabled.
+  const observer = new MutationObserver(() => {
+    const launcher = innerDoc.getElementById('launcher')
+    const isOpen = innerDoc.getElementById('webWidget')
+    const isMobile = launcher?.style.width === '48px'
+    div.dataset.mobile = !!isMobile
+    div.dataset.open = !!isOpen
+
+    if (launcher && !isOpen) {
+      updateWidth()
+    }
+  })
+
+  // Start observing body.
+  observer.observe(innerBody, { attributes: true, childList: true, subtree: true })
+
+  // Add Zendesk configuration.
+  innerWindow.zESettings = {
+    webWidget: {
+      ...(buttonLabel && {
+        launcher: {
+          label: {
+            '*': buttonLabel
+          }
+        }
+      }),
+      chat: {
+        departments: {
+          enabled: department ? [''] : undefined,
+          select: department
+        }
+      }
+    }
+  }
+
+  // Add Zendesk script.
+  // For some reason locale can only be set after the script is loaded.
+  // There does not seem to be a setting for this in zESettings.
+  const safeLocale = locale || document.documentElement.lang || navigator.language
+  const script = innerDoc.createElement('script')
+  script.src = src
+  script.id = 'ze-snippet'
+  script.addEventListener('load', () => {
+    innerWindow.zE('webWidget', 'setLocale', safeLocale)
+    const style = innerDoc.createElement('style')
+    style.textContent = `
+      #launcher {
+        margin: 0;
+      }
+    `
+    innerDoc.head.appendChild(style)
+
+    // Suppress chat if the department is offline.
+    if (!department) {
+      return
+    }
+
+    innerWindow.zE('webWidget:on', 'chat:connected', () => {
+      const offline = innerWindow.zE('webWidget:get', 'chat:department', department)?.status === 'offline'
+      if (offline) {
+        innerWindow.zE('webWidget', 'updateSettings', { webWidget: { chat: { suppress: true } } })
+      }
+    })
+  })
+
+  innerBody.appendChild(script)
+
+  return () => {
+    observer.disconnect()
+    window.removeEventListener('resize', resizeHandler)
+  }
+}
+
+register(ZendeskChat, 'zendesk-chat')

package/src/wcs/shared/chat-bot/README.md

@@ -0,0 +1,61 @@
+# ChatBot
+
+## Overview
+
+A generic chat button and chat window widget.
+
+## Attributes
+
+- `buttonText` - Text to show on a button that triggers the chat; default is `Ask us`.
+- `headerText` - Text to show on the top bar of the chat window; default is `Chatbot`.
+- `closeText` - Text to show on the close chat button; default is `Close window`.
+- `sendText` - Label for send button; default is `Send`.
+- `attachText` - Label for attachment button; default is `Attach`.
+- `inputText` - Input placeholder; default is `Type your message`.
+- `icon` - SVG icon to show on top on the button.
+- `messages` - List of messages. Each message is an object with the following properties:
+  - `children` - A list of Preact's `h` objects. Any arbitrary structure is supported.
+  - `isBot` - Flag to mark if a message comes from a bot.
+  - `timestamp` - Optional Date object. If present, it will be rendered at the top of each message with `toLocaleString()` method using the locale of the current site (or the browser if not present).
+- `forceOpen` - When set to true, it will show the chat window. Showing the chat always triggers `onInit()`
+- `isBusy` - When set to `true`, sending messages is blocked.
+- `onInit` - Callback triggered when a user clicks on the button for the first time. When `forceShow` is set to true, it will be called automatically.
+- `onSend` - Callback triggered when a user sends a message.
+- `onAttach` - Callback triggered when attachment button is clicked. The attachment button only appears when the callback is provided.
+- `onClose` - Callback triggered on `beforeunload`. Note that clicking the `x` button does not trigger it as it only minimises the chat window.
+
+## Examples
+
+```js
+h(ChatBot, {
+  buttonText: 'Ask us',
+  headerText: 'My chatbot',
+  closeText: 'Close window',
+  sendText: 'Send',
+  attachText: 'Attach',
+  inputText: 'Type your message',
+  icon: 'path/to/icon.svg'
+  forceOpen: false,
+  isBusy: false,
+  onInit () {
+
+  },
+  onSend (text) {
+
+  },
+  onAttach (file) {
+
+  },
+  onClose () {
+
+  },
+  messages: [{
+    children: [],           // Preact children
+    timestamp: new Date()   // Optional
+  }, {
+    children: [],           // Preact children
+    timestamp: new Date(),  // Optional
+    isBot: true             // Mark if bot response, otherwise user input
+  }]
+})
+```