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

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

@@ -65,7 +65,7 @@ const participantInfo = {
     'e65fa8dc-97ab-4711-8fec-82bae6461aa2': {
       avatar,
       id: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
-      introduction: "You're now talking to Mrs. Bot gimme a minit",
+      introduction: "You're now talking to {{name}} gimme a minit",
       name: 'Mrs. Bot',
       service: {
         expose: { map: {}, version: 2 },
@@ -77,7 +77,7 @@ const participantInfo = {
     },
     'e65fa8dc-97ab-4711-8fec-82bae6461aa3': {
       id: 'e65fa8dc-97ab-4711-8fec-82bae6461aa3',
-      introduction: "You're now talking to Mrs. Bot gimme a minit",
+      introduction: "You're now talking to {{name}} gimme a minit",
       name: 'Mrs. Bot',
       service: {
         expose: { map: {}, version: 2 },
@@ -173,6 +173,7 @@ const infoMessage = {
     body: {
       text: 'This is a system generated info message',
       type: 'text',
+      variables: {},
     },
     fromClient: false,
     id: randomId(),
@@ -215,7 +216,7 @@ const participantMessage = {
     participant: {
       avatar,
       id: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
-      introduction: "You're now talking to Mrs. Bot gimme a minit",
+      introduction: "You're now talking to {{name}} gimme a minit",
       name: 'Mrs. Bot',
       service: {
         expose: { map: {}, version: 2 },
@@ -239,7 +240,7 @@ const participantMessageDefaultIcon = {
     messageStatus: 'received',
     participant: {
       id: 'e65fa8dc-97ab-4711-8fec-82bae6461aa3',
-      introduction: "You're now talking to Mrs. Bot gimme a minit",
+      introduction: "You're now talking to {{name}} gimme a minit",
       name: 'Mrs. Bot',
       service: {
         expose: { map: {}, version: 2 },
@@ -261,6 +262,7 @@ const getCustomMessage = ({ type, data, text }) => ({
       type,
       text,
       data,
+      variables: {},
     },
     participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
     service: {
@@ -284,6 +286,7 @@ const shortTextMessage = {
     body: {
       text: 'What do you want to do?',
       type: 'text',
+      variables: {},
     },
     fromClient: false,
     fromHistory: true,
@@ -345,6 +348,7 @@ const longTextMessage = {
     body: {
       text: 'What do you want to do? This is a really long message from a bot that has a lot to say about a lot of things. Currently I am contemplating my own bot existence and constantly asking myself who I am. What do you want to do? This is a really long message from a bot that has a lot to say about a lot of things. Currently I am contemplating my own bot existence and constantly asking myself who I am. What do you want to do? This is a really long message from a bot that has a lot to say about a lot of things. Currently I am contemplating my own bot existence and constantly asking myself who I am.',
       type: 'text',
+      variables: {},
     },
     fromClient: false,
     fromHistory: true,
@@ -368,6 +372,7 @@ const textMessageBoldItalicUnderline = {
     body: {
       text: 'Bubble with **bold** *italic* <u>underline</u>',
       type: 'text',
+      variables: {},
     },
     fromClient: false,
     fromHistory: true,
@@ -389,8 +394,24 @@ const textMessageWithLinks = {
   type: 'message',
   payload: {
     body: {
-      text: '<a href="https://google.com" data-link-id="1">Link in same window</a> and <a href="https://google.com" data-link-id="2" target="_blank">link in new window</a> embedded in text',
+      text: '{{link_1}} and {{link_2}} embedded in text',
       type: 'text',
+      variables: {
+        link_1: {
+          id: '1',
+          name: 'Link in same window',
+          newTab: false,
+          type: 'link',
+          url: 'https://google.com',
+        },
+        link_2: {
+          id: '2',
+          name: 'link in new window',
+          newTab: true,
+          type: 'link',
+          url: 'https://google.com',
+        },
+      },
     },
     fromClient: false,
     fromHistory: true,
@@ -412,8 +433,17 @@ const textMessageWithLongLink = {
   type: 'message',
   payload: {
     body: {
-      text: 'Here is a long link <a href="https://google.com" data-link-id="1">click me click me please click me yoohoooo please please click me here I am click me now what are you waiting for click me now now now now now click meeeeeeeeeeeeee</a> embedded in text',
+      text: 'Here is a long link {{link_1}} embedded in text',
       type: 'text',
+      variables: {
+        link_1: {
+          id: '1',
+          name: 'click me click me please click me yoohoooo please please click me here I am click me now what are you waiting for click me now now now now now click meeeeeeeeeeeeee',
+          newTab: false,
+          type: 'link',
+          url: 'https://google.com',
+        },
+      },
     },
     fromClient: false,
     fromHistory: true,
@@ -437,6 +467,7 @@ const textMesageWithBullets = {
     body: {
       text: '<ul>\n<li>Bullets</li>\n<li>bullets</li>\n<li>bullets</li>\n</ul>\n',
       type: 'text',
+      variables: {},
     },
     fromClient: false,
     fromHistory: true,
@@ -591,6 +622,7 @@ const userMessage = {
     body: {
       text: 'This is what the user typed',
       type: 'text',
+      variables: {},
     },
     fromClient: true,
     fromHistory: true,
@@ -609,6 +641,7 @@ const userMessageLong = {
     body: {
       text: 'This is what the user typed. And sometimes the user has quite a lot to say and then we get longer lines that need to wrap well and not break the styling so here goes with just such a line right here!!',
       type: 'text',
+      variables: {},
     },
     fromClient: true,
     fromHistory: true,
@@ -752,6 +785,7 @@ const categoryKeys = {
   messages: 'messages',
   errors: 'errors',
   uploads: 'uploads',
+  faq: 'faq',
   features: 'features',
   options: 'options',
   suggestions: 'suggestions',
@@ -777,6 +811,10 @@ export const categories = {
     heading: 'File uploads',
     description: '',
   },
+  [categoryKeys.faq]: {
+    heading: 'FAQ',
+    description: '',
+  },
   [categoryKeys.features]: {
     heading: 'Other features',
     description: '',
@@ -858,6 +896,189 @@ const cardTopic = {
   },
 }
 
+const faq = {
+  faqEmptyList: {
+    category: categoryKeys.faq,
+    headingText: 'Empty FAQ list',
+    description: '',
+    ...baseState,
+    config: {
+      ...baseState.config,
+      showFaq: true,
+    },
+    serviceData: {
+      suggestion: {
+        body: [],
+      },
+    },
+  },
+  faqList: {
+    category: categoryKeys.faq,
+    headingText: 'FAQ list',
+    description: '',
+    ...baseState,
+
+    config: {
+      ...baseState.config,
+      showFaq: true,
+    },
+    serviceData: {
+      suggestion: {
+        body: [
+          {
+            id: 1,
+            question: 'Lorem ipsum dolor sit amet',
+            categories: ['short'],
+          },
+          {
+            id: 2,
+            question:
+              'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+            categories: ['short'],
+          },
+          {
+            id: 3,
+            question:
+              'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam',
+            categories: ['short'],
+          },
+        ],
+      },
+    },
+  },
+  faqListLong: {
+    category: categoryKeys.faq,
+    headingText: 'Long FAQ list',
+    description: '',
+    ...baseState,
+    config: {
+      ...baseState.config,
+      showFaq: true,
+    },
+    serviceData: {
+      suggestion: {
+        body: [
+          {
+            id: 1,
+            question: 'Lorem ipsum dolor sit amet',
+            categories: ['long'],
+          },
+          {
+            id: 2,
+            question:
+              'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+            categories: ['long'],
+          },
+          {
+            id: 3,
+            question:
+              'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam',
+            categories: ['long'],
+          },
+          {
+            id: 4,
+            question:
+              'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed',
+            categories: ['long'],
+          },
+          {
+            id: 5,
+            question: 'Lorem ipsum dolor sit amet',
+            categories: ['long'],
+          },
+          {
+            id: 6,
+            question:
+              'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+            categories: ['long'],
+          },
+          {
+            id: 7,
+            question:
+              'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam',
+            categories: ['long'],
+          },
+          {
+            id: 8,
+            question:
+              'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed',
+            categories: ['long'],
+          },
+          {
+            id: 9,
+            question: 'Lorem ipsum dolor sit amet',
+            categories: ['long'],
+          },
+          {
+            id: 10,
+            question:
+              'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+            categories: ['long'],
+          },
+          {
+            id: 11,
+            question:
+              'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam',
+            categories: ['long'],
+          },
+          {
+            id: 12,
+            question:
+              'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed',
+            categories: ['long'],
+          },
+          {
+            id: 13,
+            question: 'Lorem ipsum dolor sit amet',
+            categories: ['long'],
+          },
+          {
+            id: 14,
+            question:
+              'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+            categories: ['long'],
+          },
+          {
+            id: 15,
+            question:
+              'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam',
+            categories: ['long'],
+          },
+          {
+            id: 16,
+            question:
+              'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed',
+            categories: ['long'],
+          },
+          {
+            id: 17,
+            question: 'Lorem ipsum dolor sit amet',
+            categories: ['long'],
+          },
+          {
+            id: 18,
+            question:
+              'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+            categories: ['long'],
+          },
+          {
+            id: 19,
+            question:
+              'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam',
+            categories: ['long'],
+          },
+          {
+            id: 20,
+            question:
+              'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed',
+            categories: ['long'],
+          },
+        ],
+      },
+    },
+  },
+}
+
 const standardState = {
   base: {
     category: categoryKeys.unstarted,
@@ -876,7 +1097,6 @@ const standardState = {
       activeServiceSessionId: '3942159e-9878-469e-9120-f44fd6be0f35',
     },
     events: [
-      splashMessage,
       participantMessage,
       infoMessage,
       shortTextMessage,
@@ -994,6 +1214,7 @@ const standardState = {
           body: {
             text: 'Long ago when a dialog started',
             type: 'text',
+            variables: {},
           },
         },
       },
@@ -1055,6 +1276,7 @@ const standardState = {
           body: {
             text: 'Long ago when a dialog started',
             type: 'text',
+            variables: {},
           },
         },
       },
@@ -1067,6 +1289,7 @@ const standardState = {
           body: {
             text: 'Above me should be a time indicator showing the full date',
             type: 'text',
+            variables: {},
           },
         },
       },
@@ -1079,6 +1302,7 @@ const standardState = {
           body: {
             text: 'Another message',
             type: 'text',
+            variables: {},
           },
         },
       },
@@ -1091,6 +1315,7 @@ const standardState = {
           body: {
             text: 'And another message',
             type: 'text',
+            variables: {},
           },
         },
       },
@@ -1103,6 +1328,7 @@ const standardState = {
           body: {
             text: 'Above me should be a time indicator showing "yesterday"',
             type: 'text',
+            variables: {},
           },
         },
       },
@@ -1115,6 +1341,7 @@ const standardState = {
           body: {
             text: 'Another message',
             type: 'text',
+            variables: {},
           },
         },
       },
@@ -1127,6 +1354,7 @@ const standardState = {
           body: {
             text: 'And another message',
             type: 'text',
+            variables: {},
           },
         },
       },
@@ -1139,6 +1367,7 @@ const standardState = {
           body: {
             text: 'Above me should be a time indicator showing me the dialog continues today',
             type: 'text',
+            variables: {},
           },
         },
       },
@@ -1179,21 +1408,6 @@ const standardState = {
       },
     ],
   },
-  suggestionsMessage: {
-    category: categoryKeys.messages,
-    headingText: 'Suggestions message',
-    description: '',
-    ...baseState,
-    events: [
-      {
-        type: 'service_data',
-        payload: {
-          type: 'suggestion',
-          body: suggestions,
-        },
-      },
-    ],
-  },
   errorWithAction: {
     // Important: This cannot pick up the language files so the text is hard set here.
     category: categoryKeys.errors,
@@ -1639,9 +1853,87 @@ const inlineInterface = {
   },
 }
 
-const buildStandardState = (layoutModes, customComponentEventBodies = []) => {
+const standardWindowStates = {
+  minimizedWindow: {
+    category: categoryKeys.minimizedWindow,
+    headingText: 'Unstarted minimized',
+    description: '',
+    window: {
+      ...baseState,
+      config: { ...baseState.config, layoutMode: 'window' },
+      visibility: {
+        ...baseState.visibility,
+        visibility: visibilityStates.minimized,
+      },
+    },
+  },
+  minimizedWindowStarted: {
+    category: categoryKeys.minimizedWindow,
+    headingText: 'Started minimized',
+    description: '',
+    window: {
+      ...baseState,
+      config: { ...baseState.config, layoutMode: 'window' },
+      visibility: {
+        ...baseState.visibility,
+        visibility: visibilityStates.minimized,
+      },
+      participantInfo,
+      headerTitles,
+    },
+  },
+  minimizedWindowStartedUnread: {
+    category: categoryKeys.minimizedWindow,
+    headingText: 'Minimized with unread messages',
+    description: '',
+    window: {
+      ...baseState,
+      config: { ...baseState.config, layoutMode: 'window' },
+      visibility: {
+        ...baseState.visibility,
+        visibility: visibilityStates.minimized,
+      },
+      participantInfo,
+      headerTitles,
+      unreadEvents: 12,
+    },
+  },
+}
+
+const newInterface = {
+  suggestionsMessage: {
+    category: categoryKeys.messages,
+    headingText: 'Suggestions message',
+    description: '',
+    ...baseState,
+    events: [
+      {
+        type: 'service_data',
+        payload: {
+          type: 'suggestion',
+          body: suggestions,
+        },
+      },
+    ],
+  },
+}
+
+const buildStandardState = (
+  layoutModes,
+  customComponentEventBodies = [],
+  isNewInterface,
+) => {
   const intermediateState = {
-    ...standardState,
+    ...(isNewInterface
+      ? {
+          ...standardState,
+          fullConversation: {
+            ...standardState.fullConversation,
+            events: [splashMessage, ...standardState.fullConversation.events],
+          },
+        }
+      : standardState),
+    ...(isNewInterface ? newInterface : faq),
     ...customComponentEventBodies.reduce((acc, eventBody) => {
       const { key, headingText, description, body } = eventBody
       return {
@@ -1678,54 +1970,19 @@ const buildStandardState = (layoutModes, customComponentEventBodies = []) => {
   }, {})
 }
 
-export const getStateObj = (layoutModes, customComponentEventBodies) => ({
+export const getDeprecatedStateObj = (
+  layoutModes,
+  customComponentEventBodies,
+) => ({
   ...buildStandardState(layoutModes, customComponentEventBodies),
+  ...(layoutModes.indexOf('window') !== -1 ? standardWindowStates : {}),
+})
+
+export const getStateObj = (layoutModes, customComponentEventBodies) => ({
+  ...buildStandardState(layoutModes, customComponentEventBodies, true),
   ...(layoutModes.indexOf('window') !== -1
     ? {
-        minimizedWindow: {
-          category: categoryKeys.minimizedWindow,
-          headingText: 'Unstarted minimized',
-          description: '',
-          window: {
-            ...baseState,
-            config: { ...baseState.config, layoutMode: 'window' },
-            visibility: {
-              ...baseState.visibility,
-              visibility: visibilityStates.minimized,
-            },
-          },
-        },
-        minimizedWindowStarted: {
-          category: categoryKeys.minimizedWindow,
-          headingText: 'Started minimized',
-          description: '',
-          window: {
-            ...baseState,
-            config: { ...baseState.config, layoutMode: 'window' },
-            visibility: {
-              ...baseState.visibility,
-              visibility: visibilityStates.minimized,
-            },
-            participantInfo,
-            headerTitles,
-          },
-        },
-        minimizedWindowStartedUnread: {
-          category: categoryKeys.minimizedWindow,
-          headingText: 'Minimized with unread messages',
-          description: '',
-          window: {
-            ...baseState,
-            config: { ...baseState.config, layoutMode: 'window' },
-            visibility: {
-              ...baseState.visibility,
-              visibility: visibilityStates.minimized,
-            },
-            participantInfo,
-            headerTitles,
-            unreadEvents: 12,
-          },
-        },
+        ...standardWindowStates,
         minimizedWindowPrechat: {
           category: categoryKeys.minimizedWindow,
           headingText: 'Minimized with pre-chat messages',

package/src/javascripts/ui/components/app-options/index.js

@@ -17,17 +17,23 @@ export default function AppOptions() {
   }
 
   return (
-    <div className={className('app__options')}>
+    <div className={className('chat__options')}>
       {isTranslationsAvailable && (
         <div
-          className={className('app__options-item', 'app__options-item--left')}
+          className={className(
+            'chat__options-item',
+            'chat__options-item--left',
+          )}
         >
           <TranslationsOptionsButton />
         </div>
       )}
       {allowOptionSelection && (
         <div
-          className={className('app__options-item', 'app__options-item--right')}
+          className={className(
+            'chat__options-item',
+            'chat__options-item--right',
+          )}
         >
           <OptionsButton />
         </div>

package/src/javascripts/ui/components/conversation/conversation.js

@@ -72,7 +72,7 @@ const Conversation = () => {
           {t('skiplinkText')}
         </a>
       )}
-      <div className={className('app__body')} ref={appBodyContainer}>
+      <div className={className('chat__body')} ref={appBodyContainer}>
         <div className={className('conversation__container')}>
           <PrivacyDisclaimer />
           <ol className={className('conversation')}>

package/src/javascripts/ui/components/conversation/event/carousel-message/index.js

@@ -1,11 +1,13 @@
 import MessageContainer from '../../message-container'
 import CarouselComponent from '../carousel-component'
+import { useTranslatedEventData } from '../../../../../domains/translations'
 import CarouselMessageSlide from './components/slide'
 
 const getItemKey = (item, idx, prefix = '') => `${prefix}${item.title}:${idx}`
 const getItemLabel = (item) => item.title
 const CarouselMessage = ({ event }) => {
-  const slides = event.payload.body.cards
+  const [body] = useTranslatedEventData(event)
+  const slides = body.cards
 
   return (
     <MessageContainer event={event} modifiers={'type-carousel'}>

package/src/javascripts/ui/components/conversation/event/conversation-suggestions.js

@@ -1,4 +1,4 @@
-import { useCallback } from 'preact/hooks'
+import { useCallback, useState } from 'preact/hooks'
 import { className } from '../../../../lib/css'
 import { actionTypes } from '../../../utils/seamly-utils'
 import { useI18n } from '../../../../domains/i18n'
@@ -6,6 +6,7 @@ import { useTranslatedEventData } from '../../../../domains/translations'
 import MessageContainer from '../message-container'
 import { useSeamlyCommands } from '../../../hooks/seamly-hooks'
 import SuggestionsList from '../../suggestions/suggestions-list'
+import { useConfig } from '../../../../domains/config'
 
 export const useSuggestions = (event) => {
   const { payload } = event
@@ -18,6 +19,8 @@ export const useSuggestions = (event) => {
 }
 
 const ConversationSuggestions = ({ event, ...props }) => {
+  const { userResponded } = useConfig()
+  const [isExpanded, setIsExpanded] = useState(true)
   const { t } = useI18n()
   const headingText = t('suggestions.headingText')
   const footerText = t('suggestions.footerText')
@@ -26,6 +29,8 @@ const ConversationSuggestions = ({ event, ...props }) => {
   const handleClick = useCallback(
     ({ id, question }) => {
       // @todo Refactor to 'suggestionclick'
+      setIsExpanded(false)
+
       sendAction({
         type: actionTypes.custom,
         originMessage: payload.id,
@@ -40,13 +45,17 @@ const ConversationSuggestions = ({ event, ...props }) => {
 
       addMessageBubble(question)
     },
-    [payload, sendAction, addMessageBubble],
+    [payload, sendAction, addMessageBubble, setIsExpanded],
   )
 
+  if (!isExpanded || userResponded) {
+    return null
+  }
+
   return (
     <div className={className('suggestions', 'suggestions--conversation')}>
       {headingText && (
-        <h2 className={className('suggestions__heading')}>{headingText}</h2>
+        <p className={className('suggestions__heading')}>{headingText}</p>
       )}
       <MessageContainer
         type="suggestions"