@seamly/web-ui 18.3.0 → 19.0.0-beta.3

package/src/javascripts/ui/hooks/seamly-entry-hooks.js

@@ -4,7 +4,7 @@ import { useSeamlyStateContext } from './seamly-state-hooks'
 import useSeamlyDispatchContext from './use-seamly-dispatch'
 import { useSeamlyOptions } from './seamly-option-hooks'
 import useSeamlyCommands from './use-seamly-commands'
-import { useConfig } from '../../domains/config'
+import { typingTimeout } from '../../config'
 
 const {
   SET_BLOCK_AUTO_ENTRY_SWITCH,
@@ -14,19 +14,18 @@ const {
 
 export const useSeamlyTyping = () => {
   const { sendAction } = useSeamlyCommands()
-  const { typing: typingConfig } = useConfig()
   const { features } = useSeamlyOptions()
   const { typingPeekahead } = features || {}
-  const typingTimeout = useRef(null)
-  const sendEndTypingTimeout = useRef(null)
+  const typingTimerId = useRef(null)
+  const sendEndTypingTimerId = useRef(null)
   const isTyping = useRef(false)
-  const typingInterval = useRef(null)
+  const typingIntervalId = useRef(null)
 
   useEffect(() => {
     return () => {
-      clearInterval(typingInterval.current)
-      clearTimeout(typingTimeout.current)
-      clearTimeout(sendEndTypingTimeout.current)
+      clearInterval(typingIntervalId.current)
+      clearTimeout(typingTimerId.current)
+      clearTimeout(sendEndTypingTimerId.current)
     }
   }, [])
 
@@ -48,33 +47,30 @@ export const useSeamlyTyping = () => {
     if ((e.code && e.code === 'Enter') || e.keyCode === 13) {
       return
     }
-    if (!typingConfig) {
-      return
-    }
 
     isTyping.current = true
-    if (!typingInterval.current) {
+    if (!typingIntervalId.current) {
       sendTypingState(true, e.target.value)
-      typingInterval.current = setInterval(() => {
+      typingIntervalId.current = setInterval(() => {
         if (!isTyping.current) {
-          clearInterval(typingInterval.current)
-          typingInterval.current = null
+          clearInterval(typingIntervalId.current)
+          typingIntervalId.current = null
         } else if (typingPeekahead && typingPeekahead.enabled) {
           sendTypingState(true, e.target.value)
         }
-      }, typingConfig.timeout)
+      }, typingTimeout)
     }
 
-    clearTimeout(typingTimeout.current)
-    clearTimeout(sendEndTypingTimeout.current)
+    clearTimeout(typingTimerId.current)
+    clearTimeout(sendEndTypingTimerId.current)
 
-    typingTimeout.current = setTimeout(() => {
+    typingTimerId.current = setTimeout(() => {
       isTyping.current = false
     }, 300)
 
-    sendEndTypingTimeout.current = setTimeout(() => {
+    sendEndTypingTimerId.current = setTimeout(() => {
       sendTypingState(false, e.target.value)
-    }, typingConfig.timeout)
+    }, typingTimeout)
   }
 }
 

package/src/javascripts/ui/hooks/seamly-hooks.js

@@ -24,7 +24,6 @@ export {
 export {
   useSeamlyApiContext,
   useSeamlyConversationUrl,
-  useSeamlyHasUserResponded,
 } from './seamly-api-hooks'
 export { default as useSeamlyDispatchContext } from './use-seamly-dispatch'
 export {

package/src/javascripts/ui/hooks/use-seamly-commands.js

@@ -2,7 +2,6 @@ import { useCallback, useContext } from 'preact/hooks'
 import {
   useSeamlyApiContext,
   useSeamlyHasConversation,
-  useSeamlyHasUserResponded,
 } from './seamly-api-hooks'
 import {
   useSeamlyStateContext,
@@ -17,6 +16,7 @@ import { actionTypes, seamlyActions } from '../utils/seamly-utils'
 import { useStableCallback } from './utility-hooks'
 import { Actions as InterruptActions } from '../../domains/interrupt'
 import { useConfig } from '../../domains/config'
+import { useUserHasResponded } from '../../domains/app'
 
 const {
   ADD_EVENT,
@@ -37,7 +37,7 @@ const useSeamlyCommands = () => {
   const dispatch = useSeamlyDispatchContext()
   const eventBus = useContext(SeamlyEventBusContext)
 
-  const hasResponded = useSeamlyHasUserResponded()
+  const hasResponded = useUserHasResponded()
   const hasConversation = useSeamlyHasConversation()
   const { visible: visibility } = useSeamlyStateContext()
   const unreadMessageCount = useSeamlyUnreadCount()
@@ -75,8 +75,8 @@ const useSeamlyCommands = () => {
   ])
 
   const reset = useCallback(async () => {
-    dispatch({ type: CLEAR_EVENTS })
     dispatch(InterruptActions.clear())
+    dispatch({ type: CLEAR_EVENTS })
     dispatch({
       type: SET_IS_LOADING,
       isLoading: true,
@@ -96,11 +96,10 @@ const useSeamlyCommands = () => {
     })
 
     try {
-      const { accountConfig = {}, initialState = {} } = await api.reset()
-      const { features } = accountConfig || {}
+      const { features } = await api.reset()
 
       dispatch({ type: SET_FEATURES, features })
-      dispatch({ type: SET_INITIAL_STATE, initialState })
+      dispatch({ type: SET_INITIAL_STATE, initialState: {} })
     } catch (error) {
       dispatch(InterruptActions.set(error))
     }

package/src/javascripts/ui/hooks/use-seamly-visibility.js

@@ -5,10 +5,7 @@ import {
 } from './seamly-state-hooks'
 import useSeamlyCommands from './use-seamly-commands'
 import useSeamlyDispatchContext from './use-seamly-dispatch'
-import {
-  useSeamlyHasConversation,
-  useSeamlyHasUserResponded,
-} from './seamly-api-hooks'
+import { useSeamlyHasConversation } from './seamly-api-hooks'
 import useSeamlyStoredVisibility from './use-seamly-stored-visibility'
 import {
   calculateVisibility,
@@ -16,6 +13,7 @@ import {
   visibilityStates,
 } from '../utils/seamly-utils'
 import { useConfig } from '../../domains/config'
+import { useUserHasResponded } from '../../domains/app'
 
 const { SET_VISIBILITY } = seamlyActions
 
@@ -26,7 +24,7 @@ const useSeamlyVisibility = () => {
   const { emitEvent } = useSeamlyCommands()
   const dispatch = useSeamlyDispatchContext()
   const [storedVisibility, setStoredVisibility] = useSeamlyStoredVisibility()
-  const hasResponded = useSeamlyHasUserResponded()
+  const hasResponded = useUserHasResponded()
   const hasConversation = useSeamlyHasConversation()
   const unreadMessageCount = useSeamlyUnreadCount()
   const isVisible = visible ? visible !== visibilityStates.hidden : false

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

@@ -13,6 +13,8 @@ const useSingleFileUpload = (formId, name) => {
   // This hook HAS to be used inside the FormBoundary of the file upload.
   const { currentUploads } = useFileUploads()
 
+  const hasFile = fileList && fileList.length > 0
+
   let uploadHandle = null
   let hasServerError = false
   let progress = 0
@@ -24,7 +26,8 @@ const useSingleFileUpload = (formId, name) => {
   }
 
   return {
-    selectedFileName: fileList && fileList.length > 0 ? fileList[0].name : '',
+    hasFile,
+    selectedFileName: hasFile ? fileList[0].name : '',
     uploadHandle,
     hasServerError,
     progress,

package/src/javascripts/ui/utils/general-utils.js

@@ -195,21 +195,14 @@ export const getRelativeDate = (date, currentDate) => {
   }
 }
 
-export const flattenObject = (obj, prefix = '') =>
-  Object.keys(obj).reduce((acc, k) => {
-    const pre = prefix.length ? `${prefix}.` : ''
-    if (
-      typeof obj[k] === 'object' &&
-      obj[k] !== null &&
-      Object.keys(obj[k]).length > 0
-    )
-      Object.assign(acc, flattenObject(obj[k], pre + k))
-    else acc[pre + k] = obj[k]
-    return acc
-  }, {})
-
 export const pick = (obj, keys) =>
   keys.reduce((accum, key) => {
     if (key in obj) accum[key] = obj[key]
     return accum
   }, {})
+
+export const omit = (obj, keys) =>
+  Object.keys(obj).reduce((accum, key) => {
+    if (!keys.includes(key)) accum[key] = obj[key]
+    return accum
+  }, {})

package/src/stylesheets/1-settings/_config.scss

@@ -81,7 +81,8 @@ $app-started-width: 375px !default;
 $app-full-height: 720px !default;
 $app-collapsed-height: 54px !default;
 
-$app-inline-height: 480px !default;
+$app-inline-min-height: 480px !default;
+$app-inline-max-height: 720px !default;
 
 $post-full-height: 170px !default;
 $post-collapsed-height: 65px !default;

package/src/stylesheets/3-app/_app.scss

@@ -31,16 +31,15 @@ $app-header-bgcolor: $brand3;
   right: auto;
   bottom: auto;
   width: auto;
-  height: 100vh;
-  min-height: $spacer * 24;
-  max-height: $spacer * 32;
+  height: 90vh;
+  min-height: $app-inline-min-height;
+  max-height: $app-inline-max-height;
   transition: height $transition, width $transition;
   background-color: initial;
   box-shadow: none;
 
   @include media('>phablet-l') {
     display: block;
-    height: $app-inline-height;
     border: 0 none;
   }
 }

package/src/stylesheets/5-components/_faq.scss

@@ -9,8 +9,6 @@
 
 &.#{$n}-app--layout-window .#{$n}-faqs {
   overscroll-behavior: contain;
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -ms-scroll-chaining: none;
 }
 
 &.#{$n}-app--layout-inline .#{$n}-faqs {
@@ -20,9 +18,9 @@
     left: 50%;
     flex-direction: column;
     width: 50%;
-    height: $app-inline-height;
-    min-height: $spacer * 24;
-    max-height: 100%;
+    height: 100%;
+    min-height: 100%;
+    overflow: hidden;
     transform: translateX(-100%);
     border: $thin-border solid set-border-color($app-bg);
     border-left: 0;
@@ -59,9 +57,6 @@
 
 &.#{$n}-app--layout-inline .#{$n}-faqs.#{$n}-transition--in {
   @include media('>phablet-l') {
-    height: $app-inline-height;
-    min-height: $spacer * 24;
-    max-height: 100%;
     overflow-y: initial;
     transform: translateX(0%);
   }

package/src/stylesheets/5-components/_modal.scss

@@ -130,9 +130,9 @@ $button-transition: $transition;
 
   &:hover {
     background-color: $brand3;
+  }
 
-    svg path {
-      fill: $app-bg;
-    }
+  &:hover .cvco-icon svg path {
+    fill: $white;
   }
 }

package/webpack/config.package.js

@@ -16,7 +16,6 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
   const {
     BUILD_ROOT,
     SRC_ROOT,
-    TRANSLATIONS_ROOT,
 
     ROOT,
 
@@ -43,7 +42,6 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
       ...Object.keys(pkg.peerDependencies || {}).map(
         (key) => new RegExp(`^${key}(\\/.*)`, 'i'),
       ),
-      /^@seamly\/web-ui\/translations(\/.*)?/i,
     ],
     module: {
       rules: [
@@ -101,21 +99,6 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
     externals: [/^@seamly\/web-ui(\/.*)?/i],
   })
 
-  const translationFiles = glob.sync(path.join(TRANSLATIONS_ROOT, '*.js'))
-  const translationEntries = translationFiles.reduce((entries, file) => {
-    const fileName = path.parse(file).name
-    return {
-      ...entries,
-      [fileName]: file,
-    }
-  }, {})
-  const translationsConfig = webpackMerge(baseConfig, {
-    entry: translationEntries,
-    output: {
-      path: path.join(BUILD_ROOT, '/dist/translations'),
-    },
-  })
-
   const standalonePackageConfig = {
     ...packageConfig,
     output: {
@@ -193,7 +176,6 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
     standalonePackageConfig,
     styleguideConfig,
     externalsConfig,
-    translationsConfig,
   ]
 
   const configsMinimized = configs.map((config) =>

package/webpack/config.site.js

@@ -1,6 +1,7 @@
 /* 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')
@@ -24,6 +25,11 @@ module.exports = (env = {}, argv = {}, configOverrides = {}, options = {}) => {
     implConfig
 
   let config = {
+    plugins: [
+      new CopyPlugin({
+        patterns: [{ from: 'public/static', to: 'static' }],
+      }),
+    ],
     entry: {
       // Changelog
       changelog: path.join(ROOT, 'CHANGELOG.md'),

package/webpack/defaults.js

@@ -6,7 +6,6 @@ const BROWSERS = 'last 1 version, > 1%, not dead, not ie 11, not ie_mob 11'
 const ROOT = path.resolve(__dirname, '..')
 const BUILD_ROOT = path.join(ROOT, 'build')
 const SRC_ROOT = path.join(ROOT, 'src')
-const TRANSLATIONS_ROOT = path.join(ROOT, 'translations')
 const PUBLIC_ROOT = path.join(ROOT, 'public')
 const PUBLIC_TEST_ROOT = path.join(PUBLIC_ROOT, 'test')
 const PUBLIC_STYLEGUIDE_ROOT = path.join(PUBLIC_ROOT, 'style-guide')
@@ -43,7 +42,6 @@ const ALIASSES = {
     SRC_ROOT,
     'javascripts/style-guide.js',
   ),
-  '@seamly/web-ui/translations': TRANSLATIONS_ROOT,
   '@seamly/web-ui/src/stylesheets/styles.scss': path.resolve(
     SRC_ROOT,
     'stylesheets',
@@ -64,7 +62,6 @@ module.exports = {
   ROOT,
   BUILD_ROOT,
   SRC_ROOT,
-  TRANSLATIONS_ROOT,
   PUBLIC_ROOT,
 
   PUBLIC_TEST_ROOT,