@seamly/web-ui 24.5.0 → 25.1.0-beta.1

package/src/javascripts/core/ui/hooks/use-seamly-idle-detach-countdown.ts

@@ -1,4 +1,3 @@
-import { useCallback } from 'preact/hooks'
 import { screenReaderDebounceDelaySeconds } from 'config'
 import { useI18n } from 'domains/i18n/hooks'
 import { useAppDispatch } from 'domains/store'
@@ -9,6 +8,7 @@ import {
   stopIdleDetachCountdownCounter,
 } from 'domains/store/slice'
 import { useVisibility } from 'domains/visibility/hooks'
+import { useCallback, useRef } from 'preact/hooks'
 import {
   getTimeFromSeconds,
   millisecondsToSeconds,
@@ -34,6 +34,18 @@ const useSeamlyIdleDetachCountdown = () => {
 
   const { isOpen } = useVisibility()
 
+  // We create a ref here, and explicitly overwrite the current values, because the
+  // `endCountdown` call initiated by the server has a different lifecycle from the
+  // `IdleDetachWarning` component.
+  const countdownState = useRef({
+    hasCountdown: false,
+    wasStopped: false,
+  })
+  countdownState.current = {
+    hasCountdown,
+    wasStopped: wasStopped || false,
+  }
+
   const { emitEvent, sendAction } = useSeamlyCommands()
   const { t } = useI18n()
   const { sendAssertive, sendPolite } = useLiveRegion()
@@ -81,6 +93,7 @@ const useSeamlyIdleDetachCountdown = () => {
     (_continueChat?: boolean | undefined, _isServerAction?: boolean) => void
   >(
     (continueChat = undefined, isServerAction = false) => {
+      const { hasCountdown, wasStopped } = countdownState.current
       if (!hasCountdown) {
         return
       }
@@ -98,15 +111,7 @@ const useSeamlyIdleDetachCountdown = () => {
 
       dispatch(clearIdleDetachCountdown())
     },
-    [
-      dispatch,
-      emitEvent,
-      hasCountdown,
-      sendAction,
-      sendAssertiveIfOpen,
-      t,
-      wasStopped,
-    ],
+    [dispatch, emitEvent, sendAction, sendAssertiveIfOpen, t],
   )
 
   const decrementCountdown = useCallback(() => {

package/src/javascripts/core/ui/hooks/use-session-expired-command.ts

@@ -1,8 +1,8 @@
-import { useEffect, useRef } from 'preact/hooks'
 import SeamlyGeneralError from 'api/errors/seamly-general-error'
 import { useInterrupt } from 'domains/interrupt/hooks'
 import { setInterrupt } from 'domains/interrupt/slice'
 import { useAppDispatch } from 'domains/store'
+import { useEffect, useRef } from 'preact/hooks'
 import useSeamlyCommands from './use-seamly-commands'
 
 export default function useSessionExpiredCommand() {

package/src/javascripts/core/ui/hooks/use-single-file-upload.ts

@@ -1,6 +1,6 @@
-import { useSelector } from 'react-redux'
 import { getControlValueByName } from 'domains/forms/selectors'
 import { CurrentUpload } from 'domains/store/store.types'
+import { useSelector } from 'react-redux'
 import { useFileUploads } from './seamly-hooks'
 
 const useSingleFileUpload = (formId, name) => {

package/src/javascripts/core/ui/hooks/utility-hooks.ts

@@ -1,10 +1,9 @@
-import { useCallback, useReducer, useState } from 'preact/hooks'
 import { randomId } from 'lib/id'
+import { useCallback, useReducer, useState } from 'preact/hooks'
 
 export const useForceUpdate = () => {
   // This is an escape hatch mentioned in the React docs:
   // https://reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate
-  /* eslint-disable-next-line no-unused-vars */
   const [_, forceUpdate] = useReducer((x) => x + 1, 0)
 
   return useCallback(() => {

package/src/javascripts/core/ui/utils/seamly-utils.ts

@@ -16,7 +16,6 @@ export const payloadTypes = {
   message: 'message',
   countdown: 'countdown',
   upload: 'upload',
-  cta: 'cta',
   splash: 'splash',
 }
 
@@ -43,7 +42,6 @@ export const actionTypes = {
   setTopic: 'set_topic',
   setTranslation: 'set_translation',
   setContext: 'set_context',
-  clickCta: 'click_cta',
   clickCard: 'click_card',
 }
 

package/src/javascripts/core/ui/utils/validations.ts

@@ -11,13 +11,12 @@ export const validateFileSize = (fileList, maxSize) => {
 
 export const fileListObjectIsNotEmpty = (fileListObj) => !!fileListObj?.length
 
-/* eslint-disable no-control-regex */
 export const isEmailString = (val) => {
   const regex =
+    // eslint-disable-next-line no-control-regex
     /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/i
   const trimmedVal = val && val.trim()
   return !!(trimmedVal && trimmedVal.match(regex))
 }
-/* eslint-enable no-control-regex */
 
 export const isNotEmptyString = (val) => !!val

package/src/javascripts/style-guide/components/app.tsx

@@ -1,10 +1,10 @@
-import { FC } from 'preact/compat'
-import { useCallback, useEffect, useState } from 'preact/hooks'
 import {
   randomId,
   getSearchParamsByKeys,
   getUrlSearchParams,
 } from '@seamly/web-ui'
+import { FC } from 'preact/compat'
+import { useCallback, useEffect, useState } from 'preact/hooks'
 import { getStateObj } from '../states'
 import StyleGuideLinks from './links'
 import StyleGuideView from './view'

package/src/javascripts/style-guide/components/static-core.tsx

@@ -1,6 +1,4 @@
 import { configureStore } from '@reduxjs/toolkit'
-import { FC } from 'preact/compat'
-import { useMemo, useRef } from 'preact/hooks'
 import {
   ComponentFilter,
   SeamlyApiContext,
@@ -28,6 +26,8 @@ import {
   visibilityReducer,
   SeamlyActivityEventContext,
 } from '@seamly/web-ui'
+import { FC } from 'preact/compat'
+import { useMemo, useRef } from 'preact/hooks'
 
 const bareApi = {
   send: () => {

package/src/javascripts/style-guide/components/view.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'preact/hooks'
 import { View, timeout } from '@seamly/web-ui'
+import { useEffect, useState } from 'preact/hooks'
 import StyleGuideStaticCore from './static-core'
 
 const StyleGuideView = ({

package/src/javascripts/style-guide/state-helpers/index.ts

@@ -9,7 +9,6 @@ export const payloadTypes = {
   message: 'message',
   countdown: 'countdown',
   upload: 'upload',
-  cta: 'cta',
 }
 const defaultTranslatedBody = {
   direction: 'to_translation_locale',
@@ -20,7 +19,6 @@ const defaultTranslatedBody = {
 
 export function addTranslationData(event) {
   switch (event.payload.type) {
-    case payloadTypes.cta:
     case payloadTypes.image:
     case payloadTypes.text:
     case payloadTypes.choicePrompt:

package/src/javascripts/style-guide/states.ts

@@ -359,32 +359,6 @@ const splashMessage = {
   },
 }
 
-const ctaMessage = {
-  type: 'message',
-  payload: {
-    body: {
-      description:
-        'Thanks for chatting!\n\nMore info about our <strong>products</strong>?',
-      buttonLink: 'https://seamly.ai',
-      buttonText: 'View website',
-      buttonNewTab: true,
-    },
-    type: 'cta',
-    fromClient: false,
-    fromHistory: true,
-    id: 'f5351010-0def-452d-818f-ca22ac61792z',
-    messageStatus: 'read',
-    participant: 'agent',
-    service: {
-      meta: { additions: { hideFeedback: 'true' } },
-      name: 'bot',
-      serviceSessionId: '3942159e-9878-469e-9120-f44fd6be0f35',
-    },
-    transactionId: 'd0cc13da-337a-4108-9db1-cb8a3b3a1446',
-    transactionLast: false,
-  },
-}
-
 const longTextMessage = {
   type: 'message',
   payload: {
@@ -1103,7 +1077,6 @@ const standardState = {
       textMesageWithBullets,
       textMesageWithOrderedList,
       choicePromptMessage,
-      ctaMessage,
     ],
   },
   userMessages: {
@@ -1151,14 +1124,6 @@ const standardState = {
       textMesageWithOrderedList,
     ],
   },
-  ctaMessages: {
-    category: categoryKeys.messages,
-    headingText: 'CTA (call to action) messages',
-    description: '',
-    ...baseState,
-    participantInfo,
-    events: [ctaMessage],
-  },
   imageVideoMessages: {
     category: categoryKeys.messages,
     headingText: 'Download, image and video messages',
@@ -1888,7 +1853,6 @@ const standardState = {
       textMesageWithBullets,
       textMesageWithOrderedList,
       choicePromptMessage,
-      ctaMessage,
       newTranslationDividerStop,
     ].map(addTranslationData),
     translations: {
@@ -1928,7 +1892,6 @@ const standardState = {
           textMesageWithBullets,
           textMesageWithOrderedList,
           choicePromptMessage,
-          ctaMessage,
         ].map((p) => p.payload.id),
       },
       languages: [
@@ -2041,7 +2004,7 @@ const inlineInterface = {
   },
   minimizedInlinePrechat: {
     category: categoryKeys.minimizedInline,
-    headingText: 'Inline minimized with pre-chat messages',
+    headingText: 'Inline minimized with collapsed chat messages',
     description: '',
     inline: {
       ...baseState,
@@ -2058,7 +2021,7 @@ const inlineInterface = {
   },
   minimizedInlinePrechatSuggestions: {
     category: categoryKeys.minimizedInline,
-    headingText: 'Inline minimized with pre-chat messages & suggestions',
+    headingText: 'Inline minimized with collapsed chat messages & suggestions',
     description: '',
     inline: {
       ...baseState,
@@ -2248,7 +2211,7 @@ export const getStateObj = (layoutModes, customComponentEventBodies) => {
           ...standardWindowStates,
           minimizedWindowPrechat: {
             category: categoryKeys.minimizedWindow,
-            headingText: 'Minimized with pre-chat messages',
+            headingText: 'Minimized with collapsed chat messages',
             description: '',
             window: {
               ...baseState,
@@ -2267,7 +2230,7 @@ export const getStateObj = (layoutModes, customComponentEventBodies) => {
           },
           minimizedWindowPrechatDelayed: {
             category: categoryKeys.minimizedWindow,
-            headingText: 'Minimized with delayed pre-chat messages',
+            headingText: 'Minimized with delayed collapsed chat messages',
             description: '',
             window: {
               ...baseState,
@@ -2290,7 +2253,7 @@ export const getStateObj = (layoutModes, customComponentEventBodies) => {
           },
           minimizedWindowPrechatDisabled: {
             category: categoryKeys.minimizedWindow,
-            headingText: 'Minimized with disabled pre-chat messages',
+            headingText: 'Minimized with disabled collapsed chat messages',
             description: '',
             window: {
               ...baseState,

package/src/javascripts/style-guide/style-guide-engine.tsx

@@ -1,5 +1,5 @@
-import { render } from 'preact'
 import { Engine, API } from '@seamly/web-ui'
+import { render } from 'preact'
 import StyleGuideApp from './components/app'
 
 class SeamlyStyleGuideInstance extends Engine {

package/src/stylesheets/5-components/_message-body.scss

@@ -212,16 +212,6 @@
   line-height: 1.35;
 }
 
-// CTA
-.#{$n}-message--type-cta .#{$n}-message__body {
-  display: flex;
-  flex-direction: column;
-  gap: $spacer * 0.5;
-  width: 100%;
-  padding: $spacer * 0.75;
-  background-color: $brand2;
-}
-
 // Cards
 .#{$n}-message--type-card .#{$n}-message__body {
   display: flex;

package/src/stylesheets/6-default-implementation/_hover.scss

@@ -44,13 +44,6 @@
       }
     }
 
-    .#{$n}-message--type-cta .#{$n}-button {
-      &:hover {
-        background-color: $white;
-        color: $interaction-dark;
-      }
-    }
-
     .#{$n}-message__body :is(a, [role='button']) {
       transition:
         background-color $transition,

package/src/stylesheets/styles.scss

@@ -21,7 +21,6 @@
   @import '5-components/message-translation-info';
   @import '5-components/message-card';
   @import '5-components/message-carousel';
-  @import '5-components/message-cta';
   @import '5-components/icon';
   @import '5-components/form';
   @import '5-components/input';

package/webpack/config.common.js

@@ -1,17 +1,14 @@
-/* eslint-disable */
 const path = require('path')
-const webpack = require('webpack')
-const webpackMerge = require('webpack-merge').merge
 const { styleScssLoaders } = require('@seamly/doc-site/lib/config/site')
-const BundleAnalyzerPlugin =
-  require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
+const webpack = require('webpack')
+const webpackMerge = require('webpack-merge').merge
 
+const defaultConfig = require('./defaults')
 const generateBabelLoaderBrowserPluginsPart = require('./parts/babel-loader-browser-plugins')
+const babelLoaderPresets = require('./parts/babel-loader-presets')
 const generateDevServerPart = require('./parts/dev-server')
 // Paths
-const defaultConfig = require('./defaults')
-const babelLoaderPresets = require('./parts/babel-loader-presets')
 
 module.exports = (env = {}, argv = {}, configOverrides = {}) => {
   const implConfig = {
@@ -48,10 +45,6 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
     new ForkTsCheckerWebpackPlugin(),
   ]
 
-  if (env.analyze) {
-    plugins.push(new BundleAnalyzerPlugin())
-  }
-
   let config = {
     plugins,
     output: {

package/webpack/config.dev.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 const site = require('@seamly/doc-site/lib/config/site')
 const webpackMerge = require('webpack-merge').merge
 const generateCommonConfig = require('./config.common')

package/webpack/config.package.js

@@ -1,16 +1,14 @@
-/* eslint-disable */
-const webpackDefinePlugin = require('webpack').DefinePlugin
-const webpackMerge = require('webpack-merge').merge
-const SourceMapDevToolPlugin = require('webpack').SourceMapDevToolPlugin
 const path = require('path')
 const { assetScssLoaders } = require('@seamly/doc-site/lib/config/site')
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
+const webpackDefinePlugin = require('webpack').DefinePlugin
+const SourceMapDevToolPlugin = require('webpack').SourceMapDevToolPlugin
+const webpackMerge = require('webpack-merge').merge
 const defaultConfig = require('./defaults')
 const generateBabelLoaderPluginsPart = require('./parts/babel-loader-plugins')
-const generateBabelLoaderBrowserPluginsPart = require('./parts/babel-loader-browser-plugins')
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
 const babelLoaderPresets = require('./parts/babel-loader-presets')
 
-module.exports = (env = {}, argv = {}, configOverrides = {}) => {
+module.exports = (configOverrides = {}) => {
   const implConfig = {
     ...defaultConfig,
     ...configOverrides,

package/webpack/config.site.js

@@ -1,10 +1,9 @@
-/* eslint-disable */
 const path = require('path')
 const site = require('@seamly/doc-site/lib/config/site')
 const CopyPlugin = require('copy-webpack-plugin')
 const webpackMerge = require('webpack-merge').merge
-const defaultConfig = require('./defaults')
 const generateCommonConfig = require('./config.common')
+const defaultConfig = require('./defaults')
 
 const defaultOptions = {
   mergeCommon: true,
@@ -21,8 +20,7 @@ module.exports = (env = {}, argv = {}, configOverrides = {}, options = {}) => {
     ...options,
   }
 
-  const { ROOT, PUBLIC_ROOT, PUBLIC_TEST_ROOT, PUBLIC_STYLEGUIDE_ROOT } =
-    implConfig
+  const { ROOT, PUBLIC_ROOT, PUBLIC_TEST_ROOT } = implConfig
 
   let config = {
     plugins: [

package/webpack/config.test.js

@@ -1,9 +1,8 @@
-/* eslint-disable */
 const path = require('path')
 const site = require('@seamly/doc-site/lib/config/site')
 const webpackMerge = require('webpack-merge').merge
-const defaultConfig = require('./defaults')
 const generateCommonConfig = require('./config.common')
+const defaultConfig = require('./defaults')
 
 const defaultOptions = {
   mergeCommon: true,

package/webpack/defaults.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path')
 
 const BABEL_TRANSPILE_MODULES = ['phoenix']

package/webpack/parts/babel-loader-browser-plugins.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 const babelLoaderPlugins = require('./babel-loader-plugins')
 
 module.exports = (env, argv, config) => [

package/webpack/parts/dev-server.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path')
 
 module.exports = (env, argv, { PUBLIC_PATH, SRC_ROOT }) => ({

package/src/javascripts/core/ui/components/conversation/event/cta.tsx

@@ -1,54 +0,0 @@
-import { useCallback } from 'preact/hooks'
-import { MessageCTA } from 'domains/store/store.types'
-import { useTranslatedEventData } from 'domains/translations/hooks'
-import { className } from 'lib/css'
-import MessageContainer from 'ui/components/conversation/message-container'
-import { useGeneratedId, useSeamlyCommands } from 'ui/hooks/seamly-hooks'
-import { actionTypes } from 'ui/utils/seamly-utils'
-import useEventLinkClickHandler from './hooks/use-event-link-click-handler'
-
-const Cta = ({ event }: { event: MessageCTA }) => {
-  const { body } = useTranslatedEventData(event)
-  const eventClick = useEventLinkClickHandler({
-    originMessage: event.payload.id,
-    transactionId: event.payload.transactionId,
-  })
-  const { emitEvent } = useSeamlyCommands()
-
-  const descriptionId = useGeneratedId()
-  const onClickHandler = useCallback(
-    () =>
-      emitEvent(`action.${actionTypes.clickCta}`, {
-        type: actionTypes.clickCta,
-        originMessage: event.payload.id,
-        link: {
-          url: body?.buttonLink,
-        },
-      }),
-    [emitEvent, body, event],
-  )
-  return (
-    <MessageContainer type="cta" event={event}>
-      <div
-        className={className('cta__content')}
-        id={descriptionId}
-        dangerouslySetInnerHTML={
-          body?.description ? { __html: body.description } : undefined
-        }
-        onClick={eventClick}
-      />
-      <a
-        className={className('button', 'button--primary')}
-        aria-describedby={descriptionId}
-        href={body?.buttonLink}
-        rel="noreferrer"
-        target={body?.buttonNewTab ? '_blank' : '_self'}
-        onClick={onClickHandler}
-      >
-        {body?.buttonText}
-      </a>
-    </MessageContainer>
-  )
-}
-
-export default Cta

package/src/stylesheets/5-components/_message-cta.scss

@@ -1,17 +0,0 @@
-.#{$n}-cta__content {
-  color: $white;
-  font-size: $fontsize-medium;
-  line-height: 1.5;
-}
-
-.#{$n}-cta__content p {
-  color: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-}
-
-.#{$n}-message--type-cta .#{$n}-button {
-  line-height: 2;
-  text-decoration: none;
-}