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

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;
-}