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

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,6 +709,44 @@ 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',
@@ -742,8 +754,9 @@ const categoryKeys = {
   uploads: 'uploads',
   features: 'features',
   options: 'options',
-  faq: 'faq',
-  minimized: 'minimized',
+  suggestions: 'suggestions',
+  minimizedWindow: 'minimizedWindow',
+  minimizedInline: 'minimizedInline',
   translations: 'translations',
 }
 
@@ -772,11 +785,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: '',
@@ -856,6 +876,7 @@ const standardState = {
       activeServiceSessionId: '3942159e-9878-469e-9120-f44fd6be0f35',
     },
     events: [
+      splashMessage,
       participantMessage,
       infoMessage,
       shortTextMessage,
@@ -973,7 +994,6 @@ const standardState = {
           body: {
             text: 'Long ago when a dialog started',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1035,7 +1055,6 @@ const standardState = {
           body: {
             text: 'Long ago when a dialog started',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1048,7 +1067,6 @@ const standardState = {
           body: {
             text: 'Above me should be a time indicator showing the full date',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1061,7 +1079,6 @@ const standardState = {
           body: {
             text: 'Another message',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1074,7 +1091,6 @@ const standardState = {
           body: {
             text: 'And another message',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1087,7 +1103,6 @@ const standardState = {
           body: {
             text: 'Above me should be a time indicator showing "yesterday"',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1100,7 +1115,6 @@ const standardState = {
           body: {
             text: 'Another message',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1113,7 +1127,6 @@ const standardState = {
           body: {
             text: 'And another message',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1126,7 +1139,6 @@ const standardState = {
           body: {
             text: 'Above me should be a time indicator showing me the dialog continues today',
             type: 'text',
-            variables: {},
           },
         },
       },
@@ -1167,6 +1179,21 @@ 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,
@@ -1202,9 +1229,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 +1401,7 @@ const standardState = {
     ...baseState,
     options: {
       ...baseState.options,
-      features: { cobrowsing: { enabled: true } },
+      features: { sendTranscript: { enabled: true } },
     },
   },
   optionsSingleTriggerUnavailable: {
@@ -1378,7 +1411,7 @@ const standardState = {
     ...baseState,
     options: {
       ...baseState.options,
-      features: { cobrowsing: { enabled: false } },
+      features: { sendTranscript: { enabled: false } },
     },
   },
   optionsMultiple: {
@@ -1407,52 +1440,6 @@ const standardState = {
       },
     },
   },
-  optionCobrowseOff: {
-    category: categoryKeys.options,
-    headingText: 'Cobrowse option off',
-    description: '',
-    ...baseState,
-    options: {
-      ...baseState.options,
-      optionActive: 'cobrowsing',
-      panelActive: true,
-      features: {
-        cobrowsing: { enabled: true },
-        sendTranscript: { enabled: true },
-      },
-    },
-  },
-  optionCobrowseOn: {
-    category: categoryKeys.options,
-    headingText: 'Cobrowse option on',
-    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',
@@ -1463,191 +1450,10 @@ const standardState = {
       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',
@@ -1670,7 +1476,6 @@ const standardState = {
     options: {
       ...baseState.options,
       features: {
-        cobrowsing: { enabled: true },
         sendTranscript: { enabled: true },
       },
     },
@@ -1754,6 +1559,86 @@ const standardState = {
   },
 }
 
+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 buildStandardState = (layoutModes, customComponentEventBodies = []) => {
   const intermediateState = {
     ...standardState,
@@ -1797,8 +1682,8 @@ export const getStateObj = (layoutModes, customComponentEventBodies) => ({
   ...buildStandardState(layoutModes, customComponentEventBodies),
   ...(layoutModes.indexOf('window') !== -1
     ? {
-        minimized: {
-          category: categoryKeys.minimized,
+        minimizedWindow: {
+          category: categoryKeys.minimizedWindow,
           headingText: 'Unstarted minimized',
           description: '',
           window: {
@@ -1810,8 +1695,8 @@ export const getStateObj = (layoutModes, customComponentEventBodies) => ({
             },
           },
         },
-        minimizedStarted: {
-          category: categoryKeys.minimized,
+        minimizedWindowStarted: {
+          category: categoryKeys.minimizedWindow,
           headingText: 'Started minimized',
           description: '',
           window: {
@@ -1825,8 +1710,8 @@ export const getStateObj = (layoutModes, customComponentEventBodies) => ({
             headerTitles,
           },
         },
-        minimizedStartedUnread: {
-          category: categoryKeys.minimized,
+        minimizedWindowStartedUnread: {
+          category: categoryKeys.minimizedWindow,
           headingText: 'Minimized with unread messages',
           description: '',
           window: {
@@ -1841,6 +1726,26 @@ export const getStateObj = (layoutModes, customComponentEventBodies) => ({
             unreadEvents: 12,
           },
         },
+        minimizedWindowPrechat: {
+          category: categoryKeys.minimizedWindow,
+          headingText: 'Minimized with pre-chat messages',
+          description: '',
+          window: {
+            ...baseState,
+            config: {
+              ...baseState.config,
+              layoutMode: 'window',
+              preChatEvents: [splashMessage],
+            },
+            visibility: {
+              ...baseState.visibility,
+              visibility: visibilityStates.minimized,
+            },
+            participantInfo,
+            headerTitles,
+          },
+        },
       }
     : {}),
+  ...inlineInterface,
 })