@seamly/web-ui 20.0.0 → 20.2.0-alpha.1

package/build/dist/lib/index.js

@@ -9225,6 +9225,29 @@ const setLocale = i18n_utils_createThunk('setLocale', async (locale, {
     return api.getTranslations(locale);
   });
 });
+;// CONCATENATED MODULE: ./src/javascripts/domains/translations/utils.js
+
+const {
+  createActions: utils_createActions,
+  createReducer: translations_utils_createReducer,
+  selectState: translations_utils_selectState
+} = createDomain('translations');
+;// CONCATENATED MODULE: ./src/javascripts/domains/translations/actions.js
+
+const [enable, disable] = utils_createActions('translate', {
+  enable: locale => ({
+    locale
+  }),
+  disable: () => ({})
+});
+const [enableEvent, disableEvent] = utils_createActions('event', {
+  enable: payloadId => ({
+    payloadId
+  }),
+  disable: payloadId => ({
+    payloadId
+  })
+});
 ;// CONCATENATED MODULE: ./src/javascripts/domains/app/utils.js
 
 const {
@@ -9243,7 +9266,7 @@ const selectUserHasResponded = createSelector(app_utils_selectState, state => st
 
 const {
   createAction: visibility_utils_createAction,
-  createActions: utils_createActions,
+  createActions: visibility_utils_createActions,
   createThunk: visibility_utils_createThunk,
   createReducer: visibility_utils_createReducer,
   selectState: visibility_utils_selectState
@@ -9509,6 +9532,7 @@ class SeamlyBaseError extends Error {
     if (originalError !== null && originalError !== void 0 && originalError.payload) {
       this.originalEvent = originalError;
       this.originalError = originalError.payload.error;
+      this.message = `Event of type ${originalError.payload.type} encountered`;
     }
 
     if (originalError !== null && originalError !== void 0 && originalError.error) {
@@ -9549,6 +9573,7 @@ const clear = interrupt_utils_createAction('clear');
 
 
 
+
 const setHasResponded = app_utils_createAction('setHasResponded', hasResponded => ({
   hasResponded
 }));
@@ -9591,7 +9616,7 @@ const app_actions_initialize = app_utils_createThunk('initialize', async (_, {
 
     if (agentParticipant !== null && agentParticipant !== void 0 && agentParticipant.name) {
       dispatch({
-        type: seamlyActions.SET_HEADER_TITLE,
+        type: seamlyActions.SET_HEADER_SUB_TITLE,
         title: agentParticipant.name
       });
     }
@@ -9600,6 +9625,8 @@ const app_actions_initialize = app_utils_createThunk('initialize', async (_, {
   }
 
   try {
+    var _config$context2;
+
     if (api.hasConversation()) {
       var _initialState$transla;
 
@@ -9613,6 +9640,9 @@ const app_actions_initialize = app_utils_createThunk('initialize', async (_, {
       if ('userResponded' in initialState) {
         dispatch(setHasResponded(initialState.userResponded));
       }
+    } else if (config !== null && config !== void 0 && (_config$context2 = config.context) !== null && _config$context2 !== void 0 && _config$context2.translationLocale) {
+      locale = config.context.translationLocale;
+      dispatch(enable(locale));
     }
   } catch (e) {
     if (e instanceof SeamlySessionExpiredError) {
@@ -11848,29 +11878,6 @@ const app_reducer_initialState = {
 
 
 
-;// CONCATENATED MODULE: ./src/javascripts/domains/translations/utils.js
-
-const {
-  createActions: translations_utils_createActions,
-  createReducer: translations_utils_createReducer,
-  selectState: translations_utils_selectState
-} = createDomain('translations');
-;// CONCATENATED MODULE: ./src/javascripts/domains/translations/actions.js
-
-const [enable, disable] = translations_utils_createActions('translate', {
-  enable: locale => ({
-    locale
-  }),
-  disable: () => ({})
-});
-const [enableEvent, disableEvent] = translations_utils_createActions('event', {
-  enable: payloadId => ({
-    payloadId
-  }),
-  disable: payloadId => ({
-    payloadId
-  })
-});
 ;// CONCATENATED MODULE: ./src/javascripts/domains/redux/utils.js
 const arrayContentEquals = (a, b) => {
   if (a === b) {
@@ -12635,10 +12642,14 @@ function FormProvider(_ref) {
     });
   }, [setExternalErrors]);
   const handleSubmit = (0,hooks_namespaceObject.useCallback)(e => {
-    e.preventDefault();
-    setIsSubmitted(true);
+    var _e$submitter;
 
-    if (validationIsValid) {
+    e.preventDefault(); // If the submitter is set to being aria-disabled, block the submit action
+
+    const ariaDisabled = ((_e$submitter = e.submitter) === null || _e$submitter === void 0 ? void 0 : _e$submitter.ariaDisabled) === 'true';
+    setIsSubmitted(!ariaDisabled);
+
+    if (!ariaDisabled && validationIsValid) {
       onSubmit(values, {
         updateControlValue,
         setError
@@ -19575,8 +19586,10 @@ const UploadContent = ({
   href: url,
   download: true,
   target: target || undefined,
+  className: css_className(['download', 'download-link']),
   children: children
 }) : (0,jsx_runtime_namespaceObject.jsx)("span", {
+  className: css_className('download'),
   children: children
 });
 
@@ -19606,22 +19619,19 @@ const Upload = _ref => {
     event: event,
     type: "upload"
   }, props), {}, {
-    children: (0,jsx_runtime_namespaceObject.jsxs)("div", {
-      className: css_className('download'),
+    children: (0,jsx_runtime_namespaceObject.jsxs)(UploadContent, {
+      url: url,
+      target: !fromClient ? '_blank' : undefined,
       children: [(0,jsx_runtime_namespaceObject.jsx)(icon, {
         name: "download",
         size: "16"
-      }), (0,jsx_runtime_namespaceObject.jsxs)(UploadContent, {
-        url: url,
-        target: !fromClient ? '_blank' : undefined,
-        children: [(0,jsx_runtime_namespaceObject.jsx)("span", {
-          "aria-hidden": "true",
-          className: css_className('file-download'),
-          children: filename
-        }), (0,jsx_runtime_namespaceObject.jsx)("span", {
-          className: css_className('visually-hidden'),
-          children: srText
-        })]
+      }), (0,jsx_runtime_namespaceObject.jsx)("span", {
+        "aria-hidden": "true",
+        className: css_className('file-download'),
+        children: filename
+      }), (0,jsx_runtime_namespaceObject.jsx)("span", {
+        className: css_className('visually-hidden'),
+        children: srText
       })]
     })
   }));
@@ -20741,7 +20751,7 @@ function TextEntryForm({
     }), (0,jsx_runtime_namespaceObject.jsx)("button", {
       className: css_className('button', 'input__submit'),
       type: "submit",
-      disabled: !hasValue || reachedCharacterLimit,
+      "aria-disabled": !hasValue || reachedCharacterLimit ? 'true' : null,
       children: (0,jsx_runtime_namespaceObject.jsx)(icon, {
         name: "send",
         size: "32",
@@ -20875,9 +20885,9 @@ const UploadToggle = () => {
         children: (0,jsx_runtime_namespaceObject.jsx)("button", {
           className: css_className(['button', 'button--secondary', 'upload-toggle']),
           ref: uploadButton,
-          disabled: !showUploadButton ? 'true' : null,
+          "aria-disabled": !showUploadButton ? 'true' : null,
           type: "button",
-          onClick: onClickHandler,
+          onClick: showUploadButton ? onClickHandler : null,
           children: (0,jsx_runtime_namespaceObject.jsx)(icon, {
             name: "file",
             size: "32",
@@ -21724,7 +21734,7 @@ const OptionsButton = () => {
             ref: item => {
               menuItemButtons.current[i] = item;
             },
-            className: css_className(['button', 'button--secondary', ...(available ? [] : ['button--disabled'])]),
+            className: css_className(['button', 'button--secondary']),
             onKeyDown: e => onMenuItemKeyDownHandler(e, i),
             onKeyPress: e => onKeyPressHandler(e, i),
             onClick: () => onMenuItemClickHandler(name, available),
@@ -21741,7 +21751,7 @@ const OptionsButton = () => {
       })
     }), (0,jsx_runtime_namespaceObject.jsxs)("button", {
       type: "button",
-      className: css_className(['button', 'button--secondary', 'chat__options__button', ...(!multiMenu && firstOptionName ? [`chat__options__button--${firstOptionName}`] : []), ...(!multiMenu && !firstOption.available ? ['button--disabled'] : [])]),
+      className: css_className(['button', 'button--secondary', 'chat__options__button', ...(!multiMenu && firstOptionName ? [`chat__options__button--${firstOptionName}`] : [])]),
       id: id,
       onClick: onClickHandler,
       onKeyDown: multiMenu ? onButtonKeyDownHandler : null,
@@ -24921,15 +24931,6 @@ function getTimeZone() {
   }
 }
 
-function getEnvironment() {
-  return {
-    screenResolution: `${window.screen.width}x${window.screen.height}`,
-    userAgent: navigator.userAgent,
-    currentUrl: window.location.toString(),
-    timezone: getTimeZone()
-  };
-}
-
 class API {
   /**
    * Creates an instance of API.
@@ -24939,14 +24940,17 @@ class API {
    * @param {string} config.secure Connect securely
    * @param {string} config.externalId Unique visitor identifier (optional)
    * @param {boolean} config.sendEnvironment
+   * @param {string} layoutMode
    * @param {string} namespace
-   * @param {Object} [context={ channelName: undefined, variables: undefined, locale: undefined }]
+   * @param {Object} [context={ channelName: undefined, variables: undefined, locale: undefined, translationLocale: undefined }]
    * @param {string} context.channelName
    * @param {object} context.variables
    * @param {string} context.locale
+   * @param {string} context.translationLocale
    * @memberof API
    */
   constructor({
+    layoutMode,
     namespace,
     config = {},
     context = {}
@@ -24966,6 +24970,7 @@ class API {
     this.connected = false;
     this.configReady = false;
     this.externalId = config.externalId;
+    this.layoutMode = layoutMode;
     this.internalProducer = new EventProducer('API');
     this.internal$ = xstream_default().create(this.internalProducer).flatten();
     this.connection$ = this.internal$.filter(event => event.type === 'connection');
@@ -25090,7 +25095,7 @@ class API {
       v: apiVersion
     }).send({
       context: api_objectSpread(api_objectSpread({}, this.config.context), {}, {
-        environment: this.config.sendEnvironment === true ? getEnvironment() : this.config.sendEnvironment
+        environment: this.config.sendEnvironment === true ? this.getEnvironment() : this.config.sendEnvironment
       })
     }).then(({
       body
@@ -25104,7 +25109,7 @@ class API {
       }
 
       if (error.status >= 500) {
-        throw new SeamlyGeneralError();
+        throw new SeamlyGeneralError(error);
       }
 
       throw error;
@@ -25178,7 +25183,7 @@ class API {
 
     if (this.config.sendEnvironment) {
       this.send('context', {
-        environment: this.config.sendEnvironment === true ? getEnvironment() : this.config.sendEnvironment
+        environment: this.config.sendEnvironment === true ? this.getEnvironment() : this.config.sendEnvironment
       }, false);
     }
 
@@ -25271,6 +25276,7 @@ class API {
   sendContext(context = {}) {
     const {
       locale,
+      translationLocale,
       variables
     } = context;
     const payload = {};
@@ -25283,6 +25289,14 @@ class API {
       payload.locale = locale;
     }
 
+    if (translationLocale) {
+      if (typeof translationLocale !== 'string') {
+        throw new Error('Translation locale must be a string');
+      }
+
+      payload.translationLocale = translationLocale;
+    }
+
     if (variables) {
       if (typeof variables !== 'object') {
         throw new Error('Variables must be an object');
@@ -25303,6 +25317,18 @@ class API {
     return this.internal$.filter(event => event.type !== 'connection');
   }
 
+  getEnvironment() {
+    return {
+      clientName: "@seamly/web-ui",
+      clientVariant: this.layoutMode,
+      clientVersion: "20.2.0-alpha.1",
+      currentUrl: window.location.toString(),
+      screenResolution: `${window.screen.width}x${window.screen.height}`,
+      timezone: getTimeZone(),
+      userAgent: navigator.userAgent
+    };
+  }
+
 }
 ;// CONCATENATED MODULE: ./node_modules/redux-thunk/es/index.js
 function createThunkMiddleware(extraArgument) {
@@ -25496,6 +25522,7 @@ class Engine {
     this.parentElement = parentElement;
     this.externalApi = externalApi;
     this.api = new API({
+      layoutMode: config.layoutMode,
       namespace: config.namespace,
       config: config.api,
       context: config.context