@seamly/web-ui 19.1.1 → 20.0.0-beta.1

package/src/javascripts/ui/components/widgets/lightbox.js

@@ -10,13 +10,18 @@ import Icon from '../layout/icon'
 import { useConfig } from '../../../domains/config'
 
 const Lightbox = ({ url, description, onClose: onCloseHandler }) => {
-  const { zIndex } = useConfig()
+  const { zIndex, layoutMode, namespace } = useConfig()
   const onActivityHandler = useSeamlyActivityEventHandler()
   const appContainerClassNames = useSeamlyAppContainerClassNames()
   const focusContainer = useRef(null)
   const { t } = useI18n()
 
-  const classNames = ['modal', ...appContainerClassNames]
+  // TODO: Change incorrect usage of css modifiers
+  const defaultClassNames = [
+    `app--layout-${layoutMode}`,
+    `namespace--${namespace}`,
+  ]
+  const classNames = ['modal', ...defaultClassNames, ...appContainerClassNames]
 
   const onFrameClickHandler = (e) => {
     e.stopPropagation()

package/src/javascripts/ui/hooks/component-helper-hooks.js

@@ -1,5 +1,3 @@
-import { useSeamlyStateContext } from './seamly-state-hooks'
-import { useElementFocusingById } from './focus-helper-hooks'
 import { useConfig } from '../../domains/config'
 
 export const useSeamlyAppContainerClassNames = () => {
@@ -20,10 +18,3 @@ export const useSeamlyMessageContainerClassNames = (event) => {
 
   return classNames
 }
-
-export const useCobrowsingContainer = () => {
-  const { cobrowsingContainerId: id } = useSeamlyStateContext()
-  const focusContainer = useElementFocusingById(id)
-
-  return { id, focusContainer }
-}

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

@@ -29,7 +29,6 @@ export { default as useSeamlyDispatchContext } from './use-seamly-dispatch'
 export {
   useSeamlyAppContainerClassNames,
   useSeamlyMessageContainerClassNames,
-  useCobrowsingContainer,
 } from './component-helper-hooks'
 export { useSeamlyOptions, useOptionButton } from './seamly-option-hooks'
 export { useFileUploadMeta, useFileUploads } from './file-upload-hooks'

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

@@ -1,15 +1,40 @@
 import { createSelector } from 'reselect'
 import { useSelector } from '../../domains/redux'
 import { microsecondsToMilliseconds } from '../utils/general-utils'
-import { Selectors as ConfigSelectors, useConfig } from '../../domains/config'
+import * as ConfigSelectors from '../../domains/config/selectors'
+import * as AppSelectors from '../../domains/app/selectors'
+import { useConfig } from '../../domains/config/hooks'
 
 export const selectState = (state) => state.state
 export const useSeamlyStateContext = () => useSelector(selectState)
 
-export const selectEvents = createSelector(
+export const selectEventsWithSuggestion = createSelector(
   selectState,
   ConfigSelectors.selectConfig,
-  ({ events }, config) => {
+  AppSelectors.selectUserHasResponded,
+  ({ events, serviceData }, config, userHasResponded) => {
+    if (
+      userHasResponded ||
+      config.layoutMode === 'inline' ||
+      !serviceData.suggestion ||
+      !serviceData.suggestion?.body.length
+    ) {
+      return events
+    }
+
+    const suggestionsEvent = {
+      type: 'service_data',
+      payload: serviceData.suggestion,
+    }
+
+    return [...events, suggestionsEvent]
+  },
+)
+
+export const selectEvents = createSelector(
+  selectEventsWithSuggestion,
+  ConfigSelectors.selectConfig,
+  (events, config) => {
     const { enabled, threshold } = config?.messages?.timeIndicator ?? {}
     if (!enabled) {
       return events
@@ -91,7 +116,6 @@ export const useSeamlyLayoutMode = () => {
 
   return {
     isInline: layoutMode === 'inline',
-    isModal: layoutMode === 'modal',
     isWindow: layoutMode === 'window',
     isResolving: !layoutMode,
   }

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

@@ -7,11 +7,13 @@ import { useSeamlyHasConversation } from './seamly-api-hooks'
 import { useLiveRegion } from './live-region-hooks'
 import { seamlyActions } from '../utils/seamly-utils'
 import { useVisibility, visibilityStates } from '../../domains/visibility'
+import { useConfig } from '../../domains/config'
 
 const { SET_IS_LOADING } = seamlyActions
 
 const useSeamlyChat = () => {
   const { t } = useI18n()
+  const { layoutMode } = useConfig()
   const { isOpen, isVisible, setVisibility } = useVisibility()
   const dispatch = useSeamlyDispatchContext()
   const events = useEvents()
@@ -88,7 +90,7 @@ const useSeamlyChat = () => {
     // multiple in-flight connection processes.
 
     if (
-      (!isOpen && !hasConversation) ||
+      (layoutMode === 'window' && !isOpen && !hasConversation) ||
       connectCalled.current ||
       !apiConfigReady
     ) {
@@ -104,13 +106,20 @@ const useSeamlyChat = () => {
         isLoading: false,
       })
     }
-
     connect().then(() => {
       start()
     })
 
     connectCalled.current = true
-  }, [isOpen, hasConversation, apiConfigReady, start, connect, dispatch])
+  }, [
+    isOpen,
+    hasConversation,
+    apiConfigReady,
+    start,
+    connect,
+    dispatch,
+    layoutMode,
+  ])
 
   const openChat = () => {
     setVisibility(visibilityStates.open)

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

@@ -12,16 +12,11 @@ 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, Actions as AppActions } from '../../domains/app'
+import * as AppActions from '../../domains/app/actions'
+import { useUserHasResponded } from '../../domains/app/hooks'
 import { useVisibility } from '../../domains/visibility'
 
-const {
-  ADD_EVENT,
-  SET_IS_LOADING,
-  SET_HEADER_SUB_TITLE,
-  SET_INITIAL_STATE,
-  SET_FEATURES,
-} = seamlyActions
+const { ADD_EVENT, SET_INITIAL_STATE } = seamlyActions
 
 const useSeamlyCommands = () => {
   const api = useSeamlyApiContext()
@@ -68,29 +63,7 @@ const useSeamlyCommands = () => {
 
   const reset = useCallback(async () => {
     dispatch(AppActions.reset())
-    dispatch(InterruptActions.clear())
-
-    dispatch({
-      type: SET_IS_LOADING,
-      isLoading: true,
-    })
-
-    const { agentName } = appConfig.defaults || {}
-
-    dispatch({
-      type: SET_HEADER_SUB_TITLE,
-      title: agentName || '',
-    })
-
-    try {
-      const { features } = await api.reset()
-
-      dispatch({ type: SET_FEATURES, features })
-      dispatch({ type: SET_INITIAL_STATE, initialState: {} })
-    } catch (error) {
-      dispatch(InterruptActions.set(error))
-    }
-  }, [api, dispatch, appConfig])
+  }, [dispatch])
 
   const getMessageBase = useCallback(
     (type) => ({

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

@@ -19,6 +19,7 @@ export const payloadTypes = {
   countdown: 'countdown',
   upload: 'upload',
   cta: 'cta',
+  splash: 'splash',
 }
 
 export const entryTypes = {
@@ -61,7 +62,6 @@ export const dividerKeys = {
 }
 
 export const featureKeys = {
-  cobrowsing: 'cobrowsing',
   sendTranscript: 'sendTranscript',
   typingPeekahead: 'typingPeekahead',
   uploads: 'uploads',
@@ -433,7 +433,7 @@ export const seamlyStateReducer = (state, action) => {
         }
       }
 
-      const { cobrowsing, entry, uploads } = activeServiceSettings
+      const { entry, uploads } = activeServiceSettings
 
       const historyNewEntryMeta = calculateNewEntryMeta(
         {
@@ -447,16 +447,6 @@ export const seamlyStateReducer = (state, action) => {
 
       let newFeatures = { ...state.options.features }
 
-      // Only set cobrowsing if it was initialised by the account config.
-      if (newFeatures.hasOwnProperty(featureKeys.cobrowsing)) {
-        newFeatures = {
-          ...newFeatures,
-          cobrowsing: {
-            enabled: !!(cobrowsing && cobrowsing.enabled),
-          },
-        }
-      }
-
       const newFeaturesHasUpload = newFeatures.hasOwnProperty(
         featureKeys.uploads,
       )
@@ -626,8 +616,6 @@ export const seamlyStateReducer = (state, action) => {
         },
       }
     case SET_FEATURE_ENABLED_STATE:
-      // Only set cobrowsing if it already exists in the object.
-      // Otherwise we may set if for accounts not allowing it at all.
       return state.options.features.hasOwnProperty(action.key)
         ? {
             ...state,

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

@@ -1,8 +1,4 @@
-// ##### ANIMATIONS #####
-// ======================
-
 // LOADER
-
 @keyframes #{$n}-loader {
   0%,
   75%,
@@ -18,7 +14,6 @@
 }
 
 // FADEIN
-
 @keyframes #{$n}-fadeIn {
   0% {
     opacity: 0;
@@ -30,7 +25,6 @@
 }
 
 // BLINK
-
 @keyframes #{$n}-blink {
   0%,
   100% {

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

@@ -14,19 +14,13 @@ $n: $app-name !default;
 $image-path: '../../img/' !default;
 
 // BRAND COLORS
-
 $brand1: #003a5d !default; // 'primary'
 $brand2: #223182 !default; // 'secondary'
 $brand3: #4a48c1 !default; // 'tertiary'
 
 // UI COLORS
-
 $interaction: $brand3 !default;
-
-$highlight: #ffc700 !default;
-
-$positive: #00875e !default;
-$positive-light: #19b183 !default;
+$interaction-dark: $brand2 !default;
 
 $negative: #db1639 !default;
 $negative-dark: #ad001f !default;
@@ -43,73 +37,78 @@ $white: #fff !default;
 $black: #000 !default;
 
 // BACKGROUND COLORS
-
 $app-bg: $white !default;
 
-// TYPOGRAPHY
+$threadlist-agent-text-bgcolor: $grey-a;
+$threadlist-user-text-bgcolor: $brand2;
 
+// TYPOGRAPHY
 $fontsize-tiny: 10px !default;
 $fontsize-small: 12px !default;
 $fontsize-medium: 14px !default;
 $fontsize-default: 16px !default;
 $fontsize-large: 18px !default;
 $fontsize-xlarge: 21px !default;
+$fontsize-xxlarge: 24px !default;
 
+$fontweight-light: 300 !default;
+$fontweight-regular: 400 !default;
+$fontweight-semibold: 600 !default;
 $fontweight-bold: 700 !default;
 
 $fontfamily-default: arial, helvetica, sans-serif !default;
 
 // SPACER
-
 $spacer: 20px !default;
-$flex-spacer: 2vw !default;
 
 // BORDER
-
 $thin-border: 1px !default;
 
 // BORDER-RADIUS
-
 $borderradius: $spacer * 0.5 !default;
 $borderradius-small: $borderradius * 0.5 !default;
+$borderradius-large: $borderradius * 2 !default;
 
 // DIMENSIONS
+$app-window-width: $spacer * 18 !default;
+$app-window-height: $spacer * 36 !default;
 
-$app-initial-width: 195px !default;
-$app-started-width: 375px !default;
+$app-inline-height: $spacer * 32 !default;
+$app-inline-maxheight: 90vh !default;
 
-$app-full-height: 720px !default;
-$app-collapsed-height: 54px !default;
-
-$app-inline-min-height: 480px !default;
-$app-inline-max-height: 720px !default;
-
-$post-full-height: 170px !default;
-$post-collapsed-height: 65px !default;
+$app-suggestions-maxheight: $spacer * 16 !default;
 
 $viewport-width: 100vw !default;
 $viewport-height: 100vh !default;
 
-$badge-touch-size: 32px !default;
+$iconsize-small: 16px !default;
+$iconsize: 24px !default;
+$iconsize-large: 32px !default;
 
-// Z-INDEX
+$buttonsize-small: 32px !default;
+$buttonsize: 40px !default;
 
-$z-index: 1 !default;
+$avatarsize: 32px !default;
+$avatarsize-large: 48px !default;
 
-// BOX SHADOWS
+$dividersize: 32px !default;
 
-$boxshadow: 0 0 $spacer 0 rgba($black, 0.4) !default;
-$boxshadow-light: 0 0 $spacer 0 rgba($black, 0.2) !default;
-$boxshadow-ultralight: 0 0 $spacer 0 rgba($black, 0.1) !default;
-$boxshadow-button: 0 $spacer * 0.2 $spacer * 0.2 0 rgba($black, 0.2) !default;
+$messagecountsize: $spacer * 1.25;
 
-// TRANSITIONS
+// Z-INDEX
+$z-index: 1 !default;
 
-$transition: 0.3s ease-in-out !default;
-$transition-slow: 0.75s ease-in-out !default;
+// BOX SHADOWS
+$boxshadow: 0 $spacer * 0.25 $spacer * 1.5 hsla(204, 26%, 28%, 0.15),
+  0 $spacer * 0.15 $spacer * 0.5 hsla(204, 26%, 28%, 0.2) !default;
+$boxshadow-soft: 0 0 $spacer 0 rgba($black, 0.1) !default;
 
-// BREAKPOINT
+// TRANSITIONS
+$transition: 0.3s ease !default;
+$transition-delay: 0.3s 0.2s ease !default;
+$transition-slow: 0.6s ease !default;
 
+// BREAKPOINTS
 $breakpoints: (
   phablet: 480px,
   phablet-l: 640px,

package/src/stylesheets/2-tools/_functions.scss

@@ -1,8 +1,4 @@
-// ##### FUNCTIONS #####
-// =====================
-
 // SET TEXT COLOR
-
 @function set-text-color($color) {
   @if (lightness($color) > 66.66) {
     @return $grey-e;
@@ -12,7 +8,6 @@
 }
 
 // SET BORDER COLOR
-
 @function set-border-color($color) {
   @if (lightness($color) > 66.66) {
     @return $grey-c;

package/src/stylesheets/2-tools/_mixins.scss

@@ -1,11 +1,5 @@
 /* stylelint-disable selector-max-universal */
-
-// ##### MIXINS #####
-// ==================
-
 // BOX-SIZING
-// ----------
-
 @mixin boxSizing($value: border-box) {
   box-sizing: $value;
 
@@ -17,17 +11,15 @@
 }
 
 // RESPONSIVE APP SIZING
-// ---------------------
-
 @mixin responsiveAppSizing() {
-  max-width: calc(#{$viewport-width} - #{$flex-spacer * 2});
-  max-height: calc(#{$viewport-height * 0.85} - #{$flex-spacer * 2});
+  max-width: calc(#{$viewport-width} - #{$spacer * 2});
+  max-height: calc(#{$viewport-height * 0.85} - #{$spacer * 2});
 
   @include media('>phablet-l') {
-    max-height: calc(#{$viewport-height} - #{$flex-spacer * 2});
+    max-height: calc(#{$viewport-height} - #{$spacer * 2});
     // iOS Safari needs a bit more space
     @supports (-webkit-overflow-scrolling: touch) {
-      max-height: calc(#{$viewport-height * 0.9} - #{$flex-spacer * 2});
+      max-height: calc(#{$viewport-height * 0.9} - #{$spacer * 2});
     }
   }
 
@@ -43,8 +35,6 @@
 }
 
 // UNLIST
-// ------
-
 @mixin unList() {
   margin: 0;
   padding: 0;
@@ -52,8 +42,6 @@
 }
 
 // STYLE PLACEHOLDER
-// -----------------
-
 @mixin stylePlaceholder() {
   &::-webkit-input-placeholder {
     // Chrome/Opera/Safari