@seamly/web-ui 18.2.0 → 19.0.0-beta.1

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

@@ -1,9 +1,3 @@
-import {
-  layoutMode as defaultLayoutmode,
-  appContainerClassNames,
-  defaultConfig,
-  typing as defaultTyping,
-} from '../../config'
 import { getTimeFromSeconds } from './general-utils'
 
 export const eventTypes = {
@@ -91,12 +85,9 @@ export const seamlyActions = {
   SET_PARTICIPANT: 'SET_PARTICIPANT',
   SET_HEADER_TITLE: 'SET_HEADER_TITLE',
   SET_HEADER_SUB_TITLE: 'SET_HEADER_SUB_TITLE',
-  SET_INTERRUPT: ' SET_INTERRUPT',
-  CLEAR_INTERRUPT: 'CLEAR_INTERRUPT',
   SET_VISIBILITY: 'SET_VISIBILITY',
   RESET_HISTORY_LOADED_FLAG: 'RESET_HISTORY_LOADED_FLAG',
   SET_ACTIVE_SERVICE: 'SET_ACTIVE_SERVICE',
-  SET_SHOW_DISCLAIMER: 'SET_SHOW_DISCLAIMER',
   INIT_IDLE_DETACH_COUNTDOWN: 'INIT_IDLE_DETACH_COUNTDOWN',
   DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER:
     'DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER',
@@ -105,7 +96,6 @@ export const seamlyActions = {
   INIT_RESUME_CONVERSATION_PROMPT: 'INIT_RESUME_CONVERSATION_PROMPT',
   CLEAR_RESUME_CONVERSATION_PROMPT: 'CLEAR_RESUME_CONVERSATION_PROMPT',
   SET_SERVICE_DATA_ITEM: 'SET_SERVICE_DATA_ITEM',
-  UPDATE_CONFIG: 'UPDATE_CONFIG',
   SET_FEATURES: 'SET_FEATURES',
   SET_FEATURE_ENABLED_STATE: 'SET_FEATURE_ENABLED_STATE',
   CLEAR_FEATURES: 'CLEAR_FEATURES',
@@ -146,12 +136,9 @@ const {
   SET_PARTICIPANT,
   SET_HEADER_TITLE,
   SET_HEADER_SUB_TITLE,
-  SET_INTERRUPT,
-  CLEAR_INTERRUPT,
   SET_VISIBILITY,
   RESET_HISTORY_LOADED_FLAG,
   SET_ACTIVE_SERVICE,
-  SET_SHOW_DISCLAIMER,
   INIT_IDLE_DETACH_COUNTDOWN,
   DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER,
   STOP_IDLE_DETACH_COUNTDOWN_COUNTER,
@@ -159,7 +146,6 @@ const {
   INIT_RESUME_CONVERSATION_PROMPT,
   CLEAR_RESUME_CONVERSATION_PROMPT,
   SET_SERVICE_DATA_ITEM,
-  UPDATE_CONFIG,
   SET_FEATURES,
   SET_FEATURE_ENABLED_STATE,
   CLEAR_FEATURES,
@@ -187,7 +173,7 @@ export const isUnreadMessage = ({ type, payload }) =>
   (type === eventTypes.message && !payload.fromClient) ||
   (type === eventTypes.info && payload.type === payloadTypes.text)
 
-const orderHistory = events => {
+const orderHistory = (events) => {
   return events.sort(
     (
       { payload: { occurredAt: occurredAtA } },
@@ -199,10 +185,10 @@ const orderHistory = events => {
 export const mergeHistory = (stateEvents, historyEvents) => {
   const newHistoryEvents = historyEvents
     .filter(
-      historyEvent =>
+      (historyEvent) =>
         // Deduplicate the event streams
         !stateEvents.find(
-          stateEvent => stateEvent.payload.id === historyEvent.payload.id,
+          (stateEvent) => stateEvent.payload.id === historyEvent.payload.id,
         ) &&
         // Remove all non displayable participant messages
         !(
@@ -274,27 +260,6 @@ const headerTitlesReducer = (state, action) => {
   }
 }
 
-const interruptReducer = (state, action) => {
-  switch (action.type) {
-    case SET_INTERRUPT:
-      return {
-        ...state,
-        hasInterrupt: true,
-        meta: {
-          ...action.interrupt,
-        },
-      }
-    case CLEAR_INTERRUPT:
-      return {
-        ...state,
-        hasInterrupt: false,
-        meta: {},
-      }
-    default:
-      return state
-  }
-}
-
 const calculateNewEntryMeta = (entryMeta, payload) => {
   const { entry } = payload
   const { blockAutoEntrySwitch } = entryMeta
@@ -360,7 +325,7 @@ export const seamlyStateReducer = (state, action) => {
       // We check for duplicated and ignore them as in some error of the websocket
       // a duplicate join can be active for a while until the server connection
       // times out.
-      const eventExists = state.events.find(e => e.payload.id === payload.id)
+      const eventExists = state.events.find((e) => e.payload.id === payload.id)
       if (eventExists) {
         return state
       }
@@ -402,7 +367,7 @@ export const seamlyStateReducer = (state, action) => {
       }
 
       const matchedEvent = state.events.find(
-        m => m.payload.transactionId === action.event.payload.transactionId,
+        (m) => m.payload.transactionId === action.event.payload.transactionId,
       )
 
       const { id, occurredAt } = action.event.payload
@@ -411,7 +376,7 @@ export const seamlyStateReducer = (state, action) => {
         ? {
             ...state,
             events: orderHistory(
-              state.events.map(m =>
+              state.events.map((m) =>
                 m.payload.id === matchedEvent.payload.id
                   ? {
                       ...m,
@@ -429,7 +394,7 @@ export const seamlyStateReducer = (state, action) => {
       return {
         ...state,
         unreadEvents: 0,
-        events: state.events.map(event => {
+        events: state.events.map((event) => {
           if (action.ids.indexOf(event.payload.id) !== -1) {
             return {
               ...event,
@@ -465,7 +430,7 @@ export const seamlyStateReducer = (state, action) => {
         .slice()
         .reverse()
         .find(
-          m =>
+          (m) =>
             (m.type === 'message' || m.type === 'participant') &&
             !m.payload.fromClient,
         )
@@ -525,12 +490,13 @@ export const seamlyStateReducer = (state, action) => {
       const returnState = {
         ...state,
         unreadEvents: events.filter(
-          event =>
+          (event) =>
             event.type === 'message' &&
             event.payload.messageStatus === readStates.received,
         ).length,
         events: events.filter(
-          e => e.type !== 'participant' || !!e.payload.participant.introduction,
+          (e) =>
+            e.type !== 'participant' || !!e.payload.participant.introduction,
         ),
         participantInfo: {
           ...state.participantInfo,
@@ -656,16 +622,6 @@ export const seamlyStateReducer = (state, action) => {
         ...state,
         headerTitles: headerTitlesReducer(state.headerTitles, action),
       }
-    case SET_INTERRUPT:
-    case CLEAR_INTERRUPT:
-      return {
-        ...state,
-        interrupt: interruptReducer(state.interrupt, action),
-      }
-    case SET_SHOW_DISCLAIMER:
-      return { ...state, showDisclaimer: action.showDisclaimer }
-    case UPDATE_CONFIG:
-      return { ...state, config: { ...state.config, ...action.config } }
     case SET_INITIAL_STATE:
       return { ...state, initialState: action.initialState }
     case SET_SERVICE_DATA_ITEM:
@@ -810,7 +766,7 @@ export const seamlyStateReducer = (state, action) => {
     case SET_UPLOAD_PROGRESS:
       return {
         ...state,
-        currentUploads: state.currentUploads.map(fileUpload => {
+        currentUploads: state.currentUploads.map((fileUpload) => {
           if (fileUpload.id === action.fileId) {
             return {
               ...fileUpload,
@@ -826,7 +782,7 @@ export const seamlyStateReducer = (state, action) => {
     case SET_UPLOAD_ERROR:
       return {
         ...state,
-        currentUploads: state.currentUploads.map(fileUpload => {
+        currentUploads: state.currentUploads.map((fileUpload) => {
           if (fileUpload.id === action.fileId) {
             return {
               ...fileUpload,
@@ -842,7 +798,7 @@ export const seamlyStateReducer = (state, action) => {
     case SET_UPLOAD_COMPLETE:
       return {
         ...state,
-        currentUploads: state.currentUploads.map(fileUpload => {
+        currentUploads: state.currentUploads.map((fileUpload) => {
           if (fileUpload.id === action.fileId) {
             return {
               ...fileUpload,
@@ -856,7 +812,7 @@ export const seamlyStateReducer = (state, action) => {
       return {
         ...state,
         currentUploads: state.currentUploads.filter(
-          fileUpload => fileUpload.id !== action.fileId,
+          (fileUpload) => fileUpload.id !== action.fileId,
         ),
       }
     case CLEAR_ALL_UPLOADS:
@@ -894,30 +850,6 @@ export const seamlyStateReducer = (state, action) => {
   }
 }
 
-export const getSeamlyConfig = config => {
-  const { messages: messagesConfig, typing, ...rest } = config
-  const { messages: defaultMessagesConfig, ...defaultRest } = defaultConfig
-  return {
-    ...defaultRest,
-    namespace: 'default',
-    visible:
-      config.layoutMode && config.layoutMode === 'inline'
-        ? visibilityStates.open
-        : visibilityStates.minimized,
-    layoutMode: defaultLayoutmode,
-    appContainerClassNames,
-    messages: {
-      ...defaultMessagesConfig,
-      ...messagesConfig,
-    },
-    typing: {
-      ...defaultTyping,
-      ...typing,
-    },
-    ...rest,
-  }
-}
-
 export const calculateVisibility = ({
   hasResponded,
   previousVisibility,

package/src/javascripts/ui/utils/validations.js

@@ -9,13 +9,16 @@ export const validateFileSize = (fileList, maxSize) => {
   return isValid
 }
 
-export const fileListObjectIsNotEmpty = fileListObj => !!fileListObj?.length > 0
+export const fileListObjectIsNotEmpty = (fileListObj) =>
+  !!fileListObj?.length > 0
 
-export const isEmailString = val => {
-  /* eslint-disable-next-line no-control-regex */
-  const 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
-
-  return !!(val && val.match(regex))
+/* eslint-disable no-control-regex */
+export const isEmailString = (val) => {
+  const 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
+export const isNotEmptyString = (val) => !!val

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/_card.scss

@@ -40,7 +40,6 @@
   display: block;
   width: 100%;
   margin-bottom: $spacer;
-  font-size: $fontsize-medium;
 
   &:last-child {
     margin-bottom: 0;

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/_message.scss

@@ -192,6 +192,12 @@ $avatar-size: $badge-touch-size;
       }
     }
   }
+
+  &.cvco-message--source-user .#{$n}-message__body {
+    a {
+      color: $white;
+    }
+  }
 }
 
 // Loading
@@ -294,6 +300,10 @@ $avatar-size: $badge-touch-size;
     color: inherit;
     text-align: left;
     word-break: break-all;
+
+    &:hover {
+      text-decoration: none;
+    }
   }
 
   .#{$n}-icon {

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/src/stylesheets/5-components/_options.scss

@@ -123,7 +123,6 @@
   flex-direction: column;
   width: calc(100% - #{$spacer});
   max-width: $spacer * 15;
-  max-height: $spacer * 15;
   margin: 0;
   padding: 0;
   transform: scaleY(0) translateY($spacer * 5);
@@ -156,6 +155,9 @@
 }
 
 .#{$n}-options__body {
+  display: flex;
+  flex-direction: column;
+  max-height: $spacer * 15;
   transition: opacity 0.1s 0.1s ease;
   opacity: 0;
 }
@@ -206,7 +208,6 @@
   flex-wrap: wrap;
   align-items: flex-start;
   width: 100%;
-  max-height: $spacer * 11; // IE11 FIX
   padding: 0 $spacer;
   overflow: auto;
 

package/webpack/config.common.js

@@ -2,8 +2,8 @@
 const path = require('path')
 const webpackMerge = require('webpack-merge').merge
 const site = require('@seamly/doc-site/lib/config/site')
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
-  .BundleAnalyzerPlugin
+const BundleAnalyzerPlugin =
+  require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 
 const generateBabelLoaderBrowserPluginsPart = require('./parts/babel-loader-browser-plugins')
 const generateDevServerPart = require('./parts/dev-server')
@@ -50,7 +50,7 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
       rules: [
         {
           test: /\.js$/,
-          include: BABEL_TRANSPILE_MODULES.map(moduleName =>
+          include: BABEL_TRANSPILE_MODULES.map((moduleName) =>
             path.resolve('node_modules', moduleName),
           ),
           loader: 'babel-loader',

package/webpack/config.package.js

@@ -16,7 +16,6 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
   const {
     BUILD_ROOT,
     SRC_ROOT,
-    TRANSLATIONS_ROOT,
 
     ROOT,
 
@@ -41,15 +40,14 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
     externals: [
       ...Object.keys(pkg.peerDependencies || {}),
       ...Object.keys(pkg.peerDependencies || {}).map(
-        key => new RegExp(`^${key}(\\/.*)`, 'i'),
+        (key) => new RegExp(`^${key}(\\/.*)`, 'i'),
       ),
-      /^@seamly\/web-ui\/translations(\/.*)?/i,
     ],
     module: {
       rules: [
         {
           test: /\.js$/,
-          include: BABEL_TRANSPILE_MODULES.map(moduleName =>
+          include: BABEL_TRANSPILE_MODULES.map((moduleName) =>
             path.resolve('node_modules', moduleName),
           ),
           loader: 'babel-loader',
@@ -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: {
@@ -132,7 +115,7 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
     externals: {},
     module: {
       ...packageConfig.module,
-      rules: packageConfig.module.rules.map(rule => {
+      rules: packageConfig.module.rules.map((rule) => {
         if (rule.loader === 'babel-loader') {
           rule = {
             ...rule,
@@ -193,10 +176,9 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
     standalonePackageConfig,
     styleguideConfig,
     externalsConfig,
-    translationsConfig,
   ]
 
-  const configsMinimized = configs.map(config =>
+  const configsMinimized = configs.map((config) =>
     webpackMerge(config, {
       optimization: {
         minimize: true,

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')
@@ -20,14 +21,15 @@ 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, PUBLIC_STYLEGUIDE_ROOT } =
+    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,