@seamly/web-ui 20.1.0-alpha.1 → 20.2.0-alpha.2

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
@@ -9265,6 +9288,12 @@ const calculateVisibility = ({
 
   if (layoutMode === 'window' && hideOnNoUserResponse && requestedVisibility !== visibilityStates.open) {
     return hasResponded ? requestedVisibility || previousVisibility || visibilityStates.open : visibilityStates.hidden;
+  } // Allow users to continue a conversation (if they have responded and no visibility is requested)
+  // when switching from the window layout to the inline layout
+
+
+  if (layoutMode === 'inline' && hasResponded && !requestedVisibility) {
+    return previousVisibility || visibilityStates.open;
   }
 
   const baseVisibility = visibilityStates.minimized;
@@ -9509,6 +9538,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 +9579,8 @@ const clear = interrupt_utils_createAction('clear');
 
 
 
+
+
 const setHasResponded = app_utils_createAction('setHasResponded', hasResponded => ({
   hasResponded
 }));
@@ -9591,7 +9623,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 +9632,8 @@ const app_actions_initialize = app_utils_createThunk('initialize', async (_, {
   }
 
   try {
+    var _config$context2;
+
     if (api.hasConversation()) {
       var _initialState$transla;
 
@@ -9613,6 +9647,16 @@ 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;
+      api.send('action', {
+        type: actionTypes.setTranslation,
+        body: {
+          enabled: true,
+          locale
+        }
+      });
+      dispatch(enable(locale));
     }
   } catch (e) {
     if (e instanceof SeamlySessionExpiredError) {
@@ -11848,29 +11892,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 +12656,14 @@ function FormProvider(_ref) {
     });
   }, [setExternalErrors]);
   const handleSubmit = (0,hooks_namespaceObject.useCallback)(e => {
-    e.preventDefault();
-    setIsSubmitted(true);
+    var _e$submitter;
+
+    e.preventDefault(); // If the submitter is set to being aria-disabled, block the submit action
 
-    if (validationIsValid) {
+    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
@@ -20740,7 +20765,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",
@@ -20874,9 +20899,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",
@@ -21723,7 +21748,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),
@@ -21740,7 +21765,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,
@@ -24920,15 +24945,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.
@@ -24938,14 +24954,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 = {}
@@ -24965,6 +24984,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');
@@ -25089,7 +25109,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
@@ -25103,7 +25123,7 @@ class API {
       }
 
       if (error.status >= 500) {
-        throw new SeamlyGeneralError();
+        throw new SeamlyGeneralError(error);
       }
 
       throw error;
@@ -25177,7 +25197,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);
     }
 
@@ -25302,6 +25322,18 @@ class API {
     return this.internal$.filter(event => event.type !== 'connection');
   }
 
+  getEnvironment() {
+    return {
+      clientName: "@seamly/web-ui",
+      clientVariant: this.layoutMode,
+      clientVersion: "20.1.0",
+      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) {
@@ -25495,6 +25527,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
@@ -25610,6 +25643,7 @@ class ExternalApi {
     this._waitingActions = [];
     this._instances = {};
     this.appConfig = appConfig;
+    this.context = {};
   }
 
   push(...actionObjects) {
@@ -25637,7 +25671,8 @@ class ExternalApi {
           break;
 
         default:
-          if (!this.handleAction(actionObj)) {
+          if (!this.handleAction(actionObj) && // Store context properties for the next instance that will be created
+          !this.setContext(actionObj.action, ...actionObj.args)) {
             this._waitingActions.push(actionObj);
           }
 
@@ -25646,6 +25681,25 @@ class ExternalApi {
     });
   }
 
+  setContext(action, args) {
+    switch (action) {
+      case 'setTranslation':
+        const {
+          enabled,
+          locale
+        } = args;
+
+        if (!!enabled && locale) {
+          this.context.translationLocale = locale;
+        }
+
+        return true;
+
+      default:
+        return false;
+    }
+  }
+
   handleInit(actionObj) {
     const userConfig = this.getUserConfig(...actionObj.args);
     const config = this.getCombinedConfig(userConfig); // if this.appConfig is a function, it might return an invalid configuration (false, null, undefined)
@@ -25667,7 +25721,9 @@ class ExternalApi {
 
     if (config) {
       const instance = this.createInstance(config);
-      this._instances[config.namespace] = instance;
+      this._instances[config.namespace] = instance; // Clear the context after creating the instance, so we do not reuse it for the next
+
+      this.context = {};
       instance.render();
     }
   }
@@ -25731,10 +25787,13 @@ class ExternalApi {
       return this.appConfig(userConfig);
     }
 
+    const context = external_api_objectSpread(external_api_objectSpread({}, userConfig.context || this.appConfig.context), this.context);
+
     const defaults = external_api_objectSpread(external_api_objectSpread({}, this.appConfig.defaults), userConfig.defaults);
 
     return external_api_objectSpread(external_api_objectSpread(external_api_objectSpread({}, this.appConfig), userConfig), {}, {
       api: external_api_objectSpread(external_api_objectSpread({}, this.appConfig.api), userConfig.api),
+      context: Object.keys(context).length ? context : undefined,
       defaults: Object.keys(defaults).length ? defaults : undefined
     });
   }