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

package/build/dist/lib/style-guide.js

@@ -1553,12 +1553,12 @@ const selectEventsWithSuggestion = createSelector(seamly_state_hooks_selectState
   return [...events, suggestionsEvent];
 });
 const selectEvents = createSelector(selectEventsWithSuggestion, selectConfig, (events, config) => {
-  var _config$messages$time, _config$messages;
+  var _config$messages;
 
   const {
     enabled,
     threshold
-  } = (_config$messages$time = config === null || config === void 0 ? void 0 : (_config$messages = config.messages) === null || _config$messages === void 0 ? void 0 : _config$messages.timeIndicator) !== null && _config$messages$time !== void 0 ? _config$messages$time : {};
+  } = (config === null || config === void 0 ? void 0 : (_config$messages = config.messages) === null || _config$messages === void 0 ? void 0 : _config$messages.timeIndicator) ?? {};
 
   if (!enabled) {
     return events;
@@ -1940,8 +1940,8 @@ function utils_validate(values, schema = {}) {
       validations = [validations];
     }
 
-    for (let i = 0; (_ref = i < ((_validations = validations) === null || _validations === void 0 ? void 0 : _validations.length)) !== null && _ref !== void 0 ? _ref : 0; i++) {
-      var _ref, _validations;
+    for (let i = 0; i < ((_validations = validations) === null || _validations === void 0 ? void 0 : _validations.length) ?? 0; i++) {
+      var _validations;
 
       if (!validations[i].fn(values[key], validations[i].compareValue)) {
         errors[key] = validations[i].errorText;
@@ -2267,9 +2267,7 @@ function updateFormControl(state, formId, name, controlState) {
     formId,
     persistData
   }) => {
-    var _state$formId2;
-
-    const formState = persistData ? (_state$formId2 = state[formId]) !== null && _state$formId2 !== void 0 ? _state$formId2 : reducer_objectSpread(reducer_objectSpread({}, initialFormState), {}, {
+    const formState = persistData ? state[formId] ?? reducer_objectSpread(reducer_objectSpread({}, initialFormState), {}, {
       persistData
     }) : reducer_objectSpread(reducer_objectSpread({}, initialFormState), {}, {
       persistData
@@ -6812,6 +6810,7 @@ const categoryKeys = {
   messages: 'messages',
   errors: 'errors',
   uploads: 'uploads',
+  faq: 'faq',
   features: 'features',
   options: 'options',
   suggestions: 'suggestions',
@@ -6836,6 +6835,10 @@ const categories = {
     heading: 'File uploads',
     description: ''
   },
+  [categoryKeys.faq]: {
+    heading: 'FAQ',
+    description: ''
+  },
   [categoryKeys.features]: {
     heading: 'Other features',
     description: ''
@@ -6911,6 +6914,142 @@ const cardTopic = {
     }
   }
 };
+const faq = {
+  faqEmptyList: states_objectSpread(states_objectSpread({
+    category: categoryKeys.faq,
+    headingText: 'Empty FAQ list',
+    description: ''
+  }, baseState), {}, {
+    config: states_objectSpread(states_objectSpread({}, baseState.config), {}, {
+      showFaq: true
+    }),
+    serviceData: {
+      suggestion: {
+        body: []
+      }
+    }
+  }),
+  faqList: states_objectSpread(states_objectSpread({
+    category: categoryKeys.faq,
+    headingText: 'FAQ list',
+    description: ''
+  }, baseState), {}, {
+    config: states_objectSpread(states_objectSpread({}, 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: states_objectSpread(states_objectSpread({
+    category: categoryKeys.faq,
+    headingText: 'Long FAQ list',
+    description: ''
+  }, baseState), {}, {
+    config: states_objectSpread(states_objectSpread({}, 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: states_objectSpread(states_objectSpread({
     category: categoryKeys.unstarted,
@@ -6928,7 +7067,7 @@ const standardState = {
     serviceInfo: {
       activeServiceSessionId: '3942159e-9878-469e-9120-f44fd6be0f35'
     },
-    events: [splashMessage, participantMessage, infoMessage, shortTextMessage, states_objectSpread(states_objectSpread({}, choicePromptMessage), {}, {
+    events: [participantMessage, infoMessage, shortTextMessage, states_objectSpread(states_objectSpread({}, choicePromptMessage), {}, {
       payload: states_objectSpread(states_objectSpread({}, choicePromptMessage.payload), {}, {
         id: `${choicePromptMessage.payload.id}XXX`
       })
@@ -7155,19 +7294,6 @@ const standardState = {
       }
     }]
   }),
-  suggestionsMessage: states_objectSpread(states_objectSpread({
-    category: categoryKeys.messages,
-    headingText: 'Suggestions message',
-    description: ''
-  }, baseState), {}, {
-    events: [{
-      type: 'service_data',
-      payload: {
-        type: 'suggestion',
-        body: suggestions
-      }
-    }]
-  }),
   errorWithAction: states_objectSpread(states_objectSpread({
     // Important: This cannot pick up the language files so the text is hard set here.
     category: categoryKeys.errors,
@@ -7624,9 +7750,74 @@ const inlineInterface = {
     })
   }
 };
+const standardWindowStates = {
+  minimizedWindow: {
+    category: categoryKeys.minimizedWindow,
+    headingText: 'Unstarted minimized',
+    description: '',
+    window: states_objectSpread(states_objectSpread({}, baseState), {}, {
+      config: states_objectSpread(states_objectSpread({}, baseState.config), {}, {
+        layoutMode: 'window'
+      }),
+      visibility: states_objectSpread(states_objectSpread({}, baseState.visibility), {}, {
+        visibility: web_ui_namespaceObject.visibilityStates.minimized
+      })
+    })
+  },
+  minimizedWindowStarted: {
+    category: categoryKeys.minimizedWindow,
+    headingText: 'Started minimized',
+    description: '',
+    window: states_objectSpread(states_objectSpread({}, baseState), {}, {
+      config: states_objectSpread(states_objectSpread({}, baseState.config), {}, {
+        layoutMode: 'window'
+      }),
+      visibility: states_objectSpread(states_objectSpread({}, baseState.visibility), {}, {
+        visibility: web_ui_namespaceObject.visibilityStates.minimized
+      }),
+      participantInfo,
+      headerTitles
+    })
+  },
+  minimizedWindowStartedUnread: {
+    category: categoryKeys.minimizedWindow,
+    headingText: 'Minimized with unread messages',
+    description: '',
+    window: states_objectSpread(states_objectSpread({}, baseState), {}, {
+      config: states_objectSpread(states_objectSpread({}, baseState.config), {}, {
+        layoutMode: 'window'
+      }),
+      visibility: states_objectSpread(states_objectSpread({}, baseState.visibility), {}, {
+        visibility: web_ui_namespaceObject.visibilityStates.minimized
+      }),
+      participantInfo,
+      headerTitles,
+      unreadEvents: 12
+    })
+  }
+};
+const newInterface = {
+  suggestionsMessage: states_objectSpread(states_objectSpread({
+    category: categoryKeys.messages,
+    headingText: 'Suggestions message',
+    description: ''
+  }, baseState), {}, {
+    events: [{
+      type: 'service_data',
+      payload: {
+        type: 'suggestion',
+        body: suggestions
+      }
+    }]
+  })
+};
 
-const buildStandardState = (layoutModes, customComponentEventBodies = []) => {
-  const intermediateState = states_objectSpread(states_objectSpread({}, standardState), customComponentEventBodies.reduce((acc, eventBody) => {
+const buildStandardState = (layoutModes, customComponentEventBodies = [], isNewInterface) => {
+  const intermediateState = states_objectSpread(states_objectSpread(states_objectSpread({}, isNewInterface ? states_objectSpread(states_objectSpread({}, standardState), {}, {
+    fullConversation: states_objectSpread(states_objectSpread({}, standardState.fullConversation), {}, {
+      events: [splashMessage, ...standardState.fullConversation.events]
+    })
+  }) : standardState), isNewInterface ? newInterface : faq), customComponentEventBodies.reduce((acc, eventBody) => {
     const {
       key,
       headingText,
@@ -7670,51 +7861,8 @@ const buildStandardState = (layoutModes, customComponentEventBodies = []) => {
   }, {});
 };
 
-const getStateObj = (layoutModes, customComponentEventBodies) => states_objectSpread(states_objectSpread(states_objectSpread({}, buildStandardState(layoutModes, customComponentEventBodies)), layoutModes.indexOf('window') !== -1 ? {
-  minimizedWindow: {
-    category: categoryKeys.minimizedWindow,
-    headingText: 'Unstarted minimized',
-    description: '',
-    window: states_objectSpread(states_objectSpread({}, baseState), {}, {
-      config: states_objectSpread(states_objectSpread({}, baseState.config), {}, {
-        layoutMode: 'window'
-      }),
-      visibility: states_objectSpread(states_objectSpread({}, baseState.visibility), {}, {
-        visibility: web_ui_namespaceObject.visibilityStates.minimized
-      })
-    })
-  },
-  minimizedWindowStarted: {
-    category: categoryKeys.minimizedWindow,
-    headingText: 'Started minimized',
-    description: '',
-    window: states_objectSpread(states_objectSpread({}, baseState), {}, {
-      config: states_objectSpread(states_objectSpread({}, baseState.config), {}, {
-        layoutMode: 'window'
-      }),
-      visibility: states_objectSpread(states_objectSpread({}, baseState.visibility), {}, {
-        visibility: web_ui_namespaceObject.visibilityStates.minimized
-      }),
-      participantInfo,
-      headerTitles
-    })
-  },
-  minimizedWindowStartedUnread: {
-    category: categoryKeys.minimizedWindow,
-    headingText: 'Minimized with unread messages',
-    description: '',
-    window: states_objectSpread(states_objectSpread({}, baseState), {}, {
-      config: states_objectSpread(states_objectSpread({}, baseState.config), {}, {
-        layoutMode: 'window'
-      }),
-      visibility: states_objectSpread(states_objectSpread({}, baseState.visibility), {}, {
-        visibility: web_ui_namespaceObject.visibilityStates.minimized
-      }),
-      participantInfo,
-      headerTitles,
-      unreadEvents: 12
-    })
-  },
+const getDeprecatedStateObj = (layoutModes, customComponentEventBodies) => states_objectSpread(states_objectSpread({}, buildStandardState(layoutModes, customComponentEventBodies)), layoutModes.indexOf('window') !== -1 ? standardWindowStates : {});
+const getStateObj = (layoutModes, customComponentEventBodies) => states_objectSpread(states_objectSpread(states_objectSpread({}, buildStandardState(layoutModes, customComponentEventBodies, true)), layoutModes.indexOf('window') !== -1 ? states_objectSpread(states_objectSpread({}, standardWindowStates), {}, {
   minimizedWindowPrechat: {
     category: categoryKeys.minimizedWindow,
     headingText: 'Minimized with pre-chat messages',
@@ -7731,7 +7879,7 @@ const getStateObj = (layoutModes, customComponentEventBodies) => states_objectSp
       headerTitles
     })
   }
-} : {}), inlineInterface);
+}) : {}), inlineInterface);
 ;// CONCATENATED MODULE: ./src/javascripts/style-guide/components/links.js
 const links_excluded = ["headingText", "descriptionId", "description"];
 
@@ -7875,8 +8023,9 @@ const StyleGuideApp = ({
     stateUpdateCallback,
     customMessageEventBodies
   } = styleGuideConfig;
+  const stateObjFunc = config.isDeprecated ? getDeprecatedStateObj : getStateObj;
   const [mainState] = (0,hooks_namespaceObject.useState)(() => {
-    const mainStateObj = getStateObj(styleGuideConfig.showLayoutModes || ['inline', 'window'], customMessageEventBodies);
+    const mainStateObj = stateObjFunc(styleGuideConfig.showLayoutModes || ['inline', 'window'], customMessageEventBodies);
     return Object.keys(mainStateObj).reduce((acc, key) => app_objectSpread(app_objectSpread({}, acc), {}, {
       [key]: app_objectSpread(app_objectSpread({}, mainStateObj[key]), {}, {
         descriptionId: (0,web_ui_namespaceObject.randomId)()