@seamly/web-ui 19.1.3 → 20.0.0-beta.3

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

@@ -40,7 +40,6 @@ const baseState = {
   historyLoaded: false,
   skiplinkTargetId: randomId(),
   optionsButtonId: randomId(),
-  cobrowseContainerId: randomId(),
   serviceData: {},
   options: {
     features: {},
@@ -66,7 +65,7 @@ const participantInfo = {
     'e65fa8dc-97ab-4711-8fec-82bae6461aa2': {
       avatar,
       id: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
-      introduction: "You're now talking to {{name}} gimme a minit",
+      introduction: "You're now talking to Mrs. Bot gimme a minit",
       name: 'Mrs. Bot',
       service: {
         expose: { map: {}, version: 2 },
@@ -78,7 +77,7 @@ const participantInfo = {
     },
     'e65fa8dc-97ab-4711-8fec-82bae6461aa3': {
       id: 'e65fa8dc-97ab-4711-8fec-82bae6461aa3',
-      introduction: "You're now talking to {{name}} gimme a minit",
+      introduction: "You're now talking to Mrs. Bot gimme a minit",
       name: 'Mrs. Bot',
       service: {
         expose: { map: {}, version: 2 },
@@ -174,7 +173,6 @@ const infoMessage = {
     body: {
       text: 'This is a system generated info message',
       type: 'text',
-      variables: {},
     },
     fromClient: false,
     id: randomId(),
@@ -217,7 +215,7 @@ const participantMessage = {
     participant: {
       avatar,
       id: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
-      introduction: "You're now talking to {{name}} gimme a minit",
+      introduction: "You're now talking to Mrs. Bot gimme a minit",
       name: 'Mrs. Bot',
       service: {
         expose: { map: {}, version: 2 },
@@ -241,7 +239,7 @@ const participantMessageDefaultIcon = {
     messageStatus: 'received',
     participant: {
       id: 'e65fa8dc-97ab-4711-8fec-82bae6461aa3',
-      introduction: "You're now talking to {{name}} gimme a minit",
+      introduction: "You're now talking to Mrs. Bot gimme a minit",
       name: 'Mrs. Bot',
       service: {
         expose: { map: {}, version: 2 },
@@ -263,7 +261,6 @@ const getCustomMessage = ({ type, data, text }) => ({
       type,
       text,
       data,
-      variables: {},
     },
     participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
     service: {
@@ -287,7 +284,6 @@ const shortTextMessage = {
     body: {
       text: 'What do you want to do?',
       type: 'text',
-      variables: {},
     },
     fromClient: false,
     fromHistory: true,
@@ -305,6 +301,19 @@ const shortTextMessage = {
   },
 }
 
+const splashMessage = {
+  type: 'message',
+  payload: {
+    type: 'splash',
+    id: randomId(),
+    body: {
+      text: 'Example splash message ✨',
+      type: 'text',
+      variables: {},
+    },
+  },
+}
+
 const ctaMessage = {
   type: 'message',
   payload: {
@@ -336,7 +345,6 @@ 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,
@@ -360,7 +368,6 @@ const textMessageBoldItalicUnderline = {
     body: {
       text: 'Bubble with **bold** *italic* <u>underline</u>',
       type: 'text',
-      variables: {},
     },
     fromClient: false,
     fromHistory: true,
@@ -382,24 +389,8 @@ const textMessageWithLinks = {
   type: 'message',
   payload: {
     body: {
-      text: '{{link_1}} and {{link_2}} embedded in text',
+      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',
       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,
@@ -421,17 +412,8 @@ const textMessageWithLongLink = {
   type: 'message',
   payload: {
     body: {
-      text: 'Here is a long link {{link_1}} embedded in text',
+      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',
       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,
@@ -455,7 +437,6 @@ 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,
@@ -563,11 +544,6 @@ const choicePromptMessage = {
           text: 'T-Dialog',
           type: 'choice',
         },
-        {
-          id: '3555079c-6f60-45e1-82c7-5d5832634a3f',
-          text: 'Escalation - Cobrowser',
-          type: 'choice',
-        },
         {
           id: 'a8ba3ce8-3324-4e7a-accc-944ff78ac890',
           text: 'Customers',
@@ -615,7 +591,6 @@ const userMessage = {
     body: {
       text: 'This is what the user typed',
       type: 'text',
-      variables: {},
     },
     fromClient: true,
     fromHistory: true,
@@ -634,7 +609,6 @@ 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,
@@ -735,15 +709,55 @@ const translationsSlice = {
   containerId: randomId(),
 }
 
+const suggestions = [
+  {
+    id: '1',
+    question: 'Invoices',
+    categories: ['mixed', 'short'],
+  },
+  {
+    id: '2',
+    question: 'Temporary subscription pause',
+    categories: ['mixed', 'medium'],
+  },
+  {
+    id: '3',
+    question: 'Cancellation',
+    categories: ['mixed', 'short'],
+  },
+  {
+    id: '4',
+    question: 'Apps',
+    categories: ['mixed', 'medium'],
+  },
+  {
+    id: '5',
+    question: 'At what date will my subscription end?',
+    categories: ['mixed', 'long'],
+  },
+  {
+    id: 'A',
+    question: 'Quotes',
+    categories: ['short'],
+  },
+  {
+    id: 'B',
+    question: 'How to get in touch with us',
+    categories: ['long'],
+  },
+]
+
 const categoryKeys = {
   unstarted: 'unstarted',
   messages: 'messages',
   errors: 'errors',
   uploads: 'uploads',
+  faq: 'faq',
   features: 'features',
   options: 'options',
-  faq: 'faq',
-  minimized: 'minimized',
+  suggestions: 'suggestions',
+  minimizedWindow: 'minimizedWindow',
+  minimizedInline: 'minimizedInline',
   translations: 'translations',
 }
 
@@ -764,6 +778,10 @@ export const categories = {
     heading: 'File uploads',
     description: '',
   },
+  [categoryKeys.faq]: {
+    heading: 'FAQ',
+    description: '',
+  },
   [categoryKeys.features]: {
     heading: 'Other features',
     description: '',
@@ -772,11 +790,18 @@ export const categories = {
     heading: 'Options',
     description: '',
   },
-  [categoryKeys.faq]: {
-    heading: 'FAQ',
+  [categoryKeys.suggestions]: {
+    heading: 'Suggestions',
+    description: '',
+  },
+  [categoryKeys.minimizedWindow]: {
+    heading: 'Minimized window',
+    desciption: '',
+  },
+  [categoryKeys.minimizedInline]: {
+    heading: 'Minimized Inline',
     description: '',
   },
-  [categoryKeys.minimized]: { heading: 'Minimized window', desciption: '' },
   [categoryKeys.translations]: {
     heading: 'Translations',
     description: '',
@@ -838,6 +863,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,
@@ -973,7 +1181,6 @@ const standardState = {
           body: {
             text: 'Long ago when a dialog started',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1035,7 +1242,6 @@ const standardState = {
           body: {
             text: 'Long ago when a dialog started',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1048,7 +1254,6 @@ const standardState = {
           body: {
             text: 'Above me should be a time indicator showing the full date',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1061,7 +1266,6 @@ const standardState = {
           body: {
             text: 'Another message',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1074,7 +1278,6 @@ const standardState = {
           body: {
             text: 'And another message',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1087,7 +1290,6 @@ const standardState = {
           body: {
             text: 'Above me should be a time indicator showing "yesterday"',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1100,7 +1302,6 @@ const standardState = {
           body: {
             text: 'Another message',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1113,7 +1314,6 @@ const standardState = {
           body: {
             text: 'And another message',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1126,7 +1326,6 @@ const standardState = {
           body: {
             text: 'Above me should be a time indicator showing me the dialog continues today',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1202,9 +1401,15 @@ const standardState = {
     headingText: `Chat status bar`,
     description: '',
     ...baseState,
-    options: {
-      features: { cobrowsing: { enabled: true } },
-      userSelectedOptions: { cobrowsing: true },
+    translations: {
+      ...translationsSlice,
+      currentLocale: 'nl',
+      isActive: true,
+      isAvailable: true,
+      languages: [
+        { locale: 'nl', nativeName: 'Dutch' },
+        { locale: 'en', nativeName: 'English' },
+      ],
     },
   },
   characterLimit: {
@@ -1368,7 +1573,7 @@ const standardState = {
     ...baseState,
     options: {
       ...baseState.options,
-      features: { cobrowsing: { enabled: true } },
+      features: { sendTranscript: { enabled: true } },
     },
   },
   optionsSingleTriggerUnavailable: {
@@ -1378,7 +1583,7 @@ const standardState = {
     ...baseState,
     options: {
       ...baseState.options,
-      features: { cobrowsing: { enabled: false } },
+      features: { sendTranscript: { enabled: false } },
     },
   },
   optionsMultiple: {
@@ -1407,270 +1612,42 @@ const standardState = {
       },
     },
   },
-  optionCobrowseOff: {
+  optionSendTranscript: {
     category: categoryKeys.options,
-    headingText: 'Cobrowse option off',
-    description: '',
+    headingText: 'Send transcript option',
+    description: 'Press submit to view error message',
     ...baseState,
     options: {
       ...baseState.options,
-      optionActive: 'cobrowsing',
+      optionActive: 'sendTranscript',
       panelActive: true,
       features: {
-        cobrowsing: { enabled: true },
         sendTranscript: { enabled: true },
       },
     },
   },
-  optionCobrowseOn: {
-    category: categoryKeys.options,
-    headingText: 'Cobrowse option on',
+  translationsAvailable: {
+    category: categoryKeys.translations,
+    headingText: 'Show translations available',
+    description: '',
+    ...baseState,
+    translations: {
+      ...translationsSlice,
+      isAvailable: true,
+      languages: [
+        { locale: 'nl', nativeName: 'Dutch' },
+        { locale: 'en', nativeName: 'English' },
+      ],
+    },
+  },
+  translationsAvailableWithOptions: {
+    category: categoryKeys.translations,
+    headingText: 'Show translations available with other options available',
     description: '',
     ...baseState,
     options: {
       ...baseState.options,
-      optionActive: 'cobrowsing',
-      panelActive: true,
-      userSelectedOptions: { cobrowsing: true },
       features: {
-        cobrowsing: { enabled: true },
-        sendTranscript: { enabled: true },
-      },
-    },
-  },
-  optionCobrowseUnavailable: {
-    category: categoryKeys.options,
-    headingText: 'Cobrowse option unavailable',
-    description: '',
-    ...baseState,
-    options: {
-      ...baseState.options,
-      optionActive: 'cobrowsing',
-      panelActive: true,
-      features: {
-        cobrowsing: { enabled: false },
-        sendTranscript: { enabled: true },
-      },
-    },
-  },
-  optionSendTranscript: {
-    category: categoryKeys.options,
-    headingText: 'Send transcript option',
-    description: 'Press submit to view error message',
-    ...baseState,
-    options: {
-      ...baseState.options,
-      optionActive: 'sendTranscript',
-      panelActive: true,
-      features: {
-        cobrowsing: { enabled: true },
-        sendTranscript: { enabled: true },
-      },
-    },
-  },
-  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'],
-          },
-        ],
-      },
-    },
-  },
-  translationsAvailable: {
-    category: categoryKeys.translations,
-    headingText: 'Show translations available',
-    description: '',
-    ...baseState,
-    translations: {
-      ...translationsSlice,
-      isAvailable: true,
-      languages: [
-        { locale: 'nl', nativeName: 'Dutch' },
-        { locale: 'en', nativeName: 'English' },
-      ],
-    },
-  },
-  translationsAvailableWithOptions: {
-    category: categoryKeys.translations,
-    headingText: 'Show translations available with other options available',
-    description: '',
-    ...baseState,
-    options: {
-      ...baseState.options,
-      features: {
-        cobrowsing: { enabled: true },
         sendTranscript: { enabled: true },
       },
     },
@@ -1754,9 +1731,167 @@ const standardState = {
   },
 }
 
-const buildStandardState = (layoutModes, customComponentEventBodies = []) => {
+const inlineInterface = {
+  minimizedInline: {
+    category: categoryKeys.minimizedInline,
+    headingText: 'Inline minimized',
+    description: '',
+    inline: {
+      ...baseState,
+      config: {
+        ...baseState.config,
+        layoutMode: 'inline',
+      },
+      visibility: {
+        ...baseState.visibility,
+        visibility: visibilityStates.minimized,
+      },
+    },
+  },
+  minimizedInlinePrechat: {
+    category: categoryKeys.minimizedInline,
+    headingText: 'Inline minimized with pre-chat messages',
+    description: '',
+    inline: {
+      ...baseState,
+      config: {
+        ...baseState.config,
+        layoutMode: 'inline',
+        preChatEvents: [splashMessage],
+      },
+      visibility: {
+        ...baseState.visibility,
+        visibility: visibilityStates.minimized,
+      },
+    },
+  },
+  minimizedInlinePrechatSuggestions: {
+    category: categoryKeys.minimizedInline,
+    headingText: 'Inline minimized with pre-chat messages & suggestions',
+    description: '',
+    inline: {
+      ...baseState,
+      config: {
+        ...baseState.config,
+        layoutMode: 'inline',
+        preChatEvents: [splashMessage],
+      },
+      serviceData: {
+        suggestion: {
+          body: suggestions,
+        },
+      },
+      visibility: {
+        ...baseState.visibility,
+        visibility: visibilityStates.minimized,
+      },
+    },
+  },
+  inlineWithSuggestions: {
+    category: categoryKeys.suggestions,
+    headingText: 'Suggestions',
+    description: '',
+    inline: {
+      ...baseState,
+      config: {
+        ...baseState.config,
+        layoutMode: 'inline',
+        showFaq: true,
+      },
+      visibility: {
+        ...baseState.visibility,
+        visibility: visibilityStates.open,
+      },
+      serviceData: {
+        suggestion: {
+          body: suggestions,
+        },
+      },
+    },
+  },
+}
+
+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 {
@@ -1793,54 +1928,39 @@ 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
     ? {
-        minimized: {
-          category: categoryKeys.minimized,
-          headingText: 'Unstarted minimized',
+        ...standardWindowStates,
+        minimizedWindowPrechat: {
+          category: categoryKeys.minimizedWindow,
+          headingText: 'Minimized with pre-chat messages',
           description: '',
           window: {
             ...baseState,
-            config: { ...baseState.config, layoutMode: 'window' },
-            visibility: {
-              ...baseState.visibility,
-              visibility: visibilityStates.minimized,
+            config: {
+              ...baseState.config,
+              layoutMode: 'window',
+              preChatEvents: [splashMessage],
             },
-          },
-        },
-        minimizedStarted: {
-          category: categoryKeys.minimized,
-          headingText: 'Started minimized',
-          description: '',
-          window: {
-            ...baseState,
-            config: { ...baseState.config, layoutMode: 'window' },
-            visibility: {
-              ...baseState.visibility,
-              visibility: visibilityStates.minimized,
-            },
-            participantInfo,
-            headerTitles,
-          },
-        },
-        minimizedStartedUnread: {
-          category: categoryKeys.minimized,
-          headingText: 'Minimized with unread messages',
-          description: '',
-          window: {
-            ...baseState,
-            config: { ...baseState.config, layoutMode: 'window' },
             visibility: {
               ...baseState.visibility,
               visibility: visibilityStates.minimized,
             },
             participantInfo,
             headerTitles,
-            unreadEvents: 12,
           },
         },
       }
     : {}),
+  ...inlineInterface,
 })