@crystaldesign/diva-core 25.4.0-beta.5 → 25.4.0-beta.50

package/build/esm/{ModalsWrapper-ff80d1d5.js → ModalsWrapper-b3779fb1.js}

@@ -1,4 +1,4 @@
-import { i as styleInject, u as useDivaCoreContext } from './index-8f3a286e.js';
+import { i as styleInject, u as useDivaCoreContext } from './index-42e7fbf5.js';
 import { useState, useEffect, useCallback } from 'react';
 import { observer } from 'mobx-react-lite';
 import Button from '@mui/material/Button';
@@ -36,6 +36,7 @@ import '@mui/material/locale';
 import '@elastic/apm-rum-react';
 import '@mui/material/Typography';
 import 'classnames';
+import '@mui/icons-material';
 import '@crystaldesign/basket-model';
 import 'lodash/debounce';
 import 'axios';
@@ -89,7 +90,7 @@ var Progress = function Progress(_ref) {
 var Progress$1 = observer(Progress);
 
 function Modal() {
-  var _pureModal$actions;
+  var _pureModal$actions, _pureModal$actions2;
   var _useDivaCoreContext = useDivaCoreContext(),
     contentStore = _useDivaCoreContext.contentStore;
   var _useTranslation = useTranslation(),
@@ -114,18 +115,6 @@ function Modal() {
     }
     modal === null || modal === void 0 || (_modal$callback3 = modal.callback) === null || _modal$callback3 === void 0 || _modal$callback3.call(modal, id);
   };
-  var escFunction = useCallback(function (event) {
-    if (!contentStore.modal) return;
-    if (event.key === 'Escape') {
-      onReject();
-    }
-  }, []);
-  useEffect(function () {
-    document.addEventListener('keydown', escFunction, false);
-    return function () {
-      document.removeEventListener('keydown', escFunction, false);
-    };
-  }, []);
   function tryDecodeURIComponent(val) {
     try {
       return decodeURIComponent(val);
@@ -181,7 +170,7 @@ function Modal() {
         id: "diva-dialog-submitbtn",
         children: typeof pureModal.accept == 'string' ? t(pureModal.accept) : t('modal.accept')
       })]
-    }), /*#__PURE__*/jsxs("div", {
+    }), !!(pureModal.image || pureModal.progress !== undefined || (_pureModal$actions = pureModal.actions) !== null && _pureModal$actions !== void 0 && _pureModal$actions.length) && /*#__PURE__*/jsxs("div", {
       style: {
         margin: 10
       },
@@ -192,7 +181,7 @@ function Modal() {
         }
       }), pureModal.progress !== undefined && /*#__PURE__*/jsx(Progress$1, {
         progress: pureModal.progress
-      }), (_pureModal$actions = pureModal.actions) === null || _pureModal$actions === void 0 ? void 0 : _pureModal$actions.map(function (a) {
+      }), (_pureModal$actions2 = pureModal.actions) === null || _pureModal$actions2 === void 0 ? void 0 : _pureModal$actions2.map(function (a) {
         var _a$variant;
         return /*#__PURE__*/jsx(Button, {
           fullWidth: true,

package/build/esm/{index-b32ec50b.js → index-07cb65cf.js}

@@ -1,4 +1,4 @@
-import { u as useDivaCoreContext, B as Button, s as socialButton, g as google, m as microsoft, a as getLogger, e as error, b as separator, I as Input, r as resetInput, l as link, c as success, d as auth, f as loginBox, h as logoContainer } from './index-8f3a286e.js';
+import { u as useDivaCoreContext, B as Button, s as socialButton, g as google, m as microsoft, e as error, a as getLogger, b as separator, I as Input, l as link, c as success, d as auth, f as loginBox, h as logoContainer } from './index-42e7fbf5.js';
 import { useState, useRef, useEffect, useMemo } from 'react';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
@@ -9,8 +9,11 @@ import { flowResult, toJS } from 'mobx';
 import { useTranslation } from 'react-i18next';
 import classnames from 'classnames';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import CircularProgress from '@mui/material/CircularProgress';
+import Alert from '@mui/material/Alert';
+import { useTranslation as useTranslation$1 } from '@crystaldesign/diva-core';
 import { ContentBoxComponent } from '@crystaldesign/content-box';
-import { Typography } from '@mui/material';
+import { Alert as Alert$1, CircularProgress as CircularProgress$1 } from '@mui/material';
 import Checkbox from '@mui/material/Checkbox';
 import Snowfall from 'react-snowfall';
 import '@babel/runtime/helpers/classCallCheck';
@@ -32,12 +35,12 @@ import '@mui/material/styles';
 import '@mui/material/locale';
 import '@elastic/apm-rum-react';
 import '@mui/material/Typography';
+import '@mui/icons-material';
 import '@crystaldesign/basket-model';
 import 'lodash/debounce';
 import 'axios';
 import '@crystaldesign/product-handler';
 import 'react-swipeable';
-import '@crystaldesign/diva-core';
 import 'react-qr-code';
 import '@mui/icons-material/Close';
 import '@mui/material/IconButton';
@@ -87,6 +90,30 @@ function OpenId () {
   });
 }
 
+function Header (_ref) {
+  var title = _ref.title,
+    text = _ref.text,
+    errorText = _ref.errorText;
+  var _useTranslation = useTranslation$1(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("div", {
+      style: {
+        textAlign: 'center'
+      },
+      children: /*#__PURE__*/jsx("h2", {
+        children: title
+      })
+    }), /*#__PURE__*/jsx("p", {
+      children: text
+    }), errorText && /*#__PURE__*/jsx(Alert, {
+      severity: "error",
+      className: error,
+      children: t(errorText)
+    })]
+  });
+}
+
 var LOG$3 = getLogger('Framework', 'Login');
 function Login() {
   var _email, _authorizationStore$s, _authorizationStore$s2, _authorizationStore$s3;
@@ -97,30 +124,34 @@ function Login() {
     _useState2 = _slicedToArray(_useState, 2),
     step = _useState2[0],
     setStep = _useState2[1];
-  var _useState3 = useState((_email = (_authorizationStore$s = authorizationStore.state) === null || _authorizationStore$s === void 0 ? void 0 : _authorizationStore$s.email) !== null && _email !== void 0 ? _email : ''),
+  var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    email = _useState4[0],
-    setEmail = _useState4[1];
-  var _useState5 = useState(''),
+    loading = _useState4[0],
+    setLoading = _useState4[1];
+  var _useState5 = useState((_email = (_authorizationStore$s = authorizationStore.state) === null || _authorizationStore$s === void 0 ? void 0 : _authorizationStore$s.email) !== null && _email !== void 0 ? _email : ''),
     _useState6 = _slicedToArray(_useState5, 2),
-    password = _useState6[0],
-    setPassword = _useState6[1];
+    email = _useState6[0],
+    setEmail = _useState6[1];
   var _useState7 = useState(''),
     _useState8 = _slicedToArray(_useState7, 2),
-    otp = _useState8[0],
-    setOtp = _useState8[1];
-  var _useState9 = useState(false),
+    password = _useState8[0],
+    setPassword = _useState8[1];
+  var _useState9 = useState(''),
     _useState10 = _slicedToArray(_useState9, 2),
-    useOtp = _useState10[0],
-    setUseOtp = _useState10[1];
-  var _useState11 = useState(authorizationStore.state.invitationId),
+    otp = _useState10[0],
+    setOtp = _useState10[1];
+  var _useState11 = useState(false),
     _useState12 = _slicedToArray(_useState11, 2),
-    invitationFound = _useState12[0],
-    setInvitationFound = _useState12[1];
-  var _useState13 = useState(((_authorizationStore$s2 = authorizationStore.state) === null || _authorizationStore$s2 === void 0 ? void 0 : _authorizationStore$s2.type) == 'LOGIN' ? authorizationStore.state.error : undefined),
+    useOtp = _useState12[0],
+    setUseOtp = _useState12[1];
+  var _useState13 = useState(authorizationStore.state.invitationId),
     _useState14 = _slicedToArray(_useState13, 2),
-    errorText = _useState14[0],
-    setError = _useState14[1];
+    invitationFound = _useState14[0],
+    setInvitationFound = _useState14[1];
+  var _useState15 = useState(((_authorizationStore$s2 = authorizationStore.state) === null || _authorizationStore$s2 === void 0 ? void 0 : _authorizationStore$s2.type) == 'LOGIN' ? authorizationStore.state.error : undefined),
+    _useState16 = _slicedToArray(_useState15, 2),
+    errorText = _useState16[0],
+    setError = _useState16[1];
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var onContinue = /*#__PURE__*/function () {
@@ -129,14 +160,18 @@ function Login() {
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            _context.prev = 0;
+            setLoading(true);
+            if (errorText) {
+              setError(undefined);
+            }
+            _context.prev = 2;
             if (invitationFound) {
-              _context.next = 6;
+              _context.next = 8;
               break;
             }
-            _context.next = 4;
+            _context.next = 6;
             return authorizationHandler.getInvitationValue('id', email);
-          case 4:
+          case 6:
             checkInvitation = _context.sent;
             if (checkInvitation) {
               if (checkInvitation.isNewUser) {
@@ -146,32 +181,36 @@ function Login() {
               setInvitationFound(true);
               if (checkInvitation.useotp) setUseOtp(true);
             }
-          case 6:
-            _context.next = 8;
+          case 8:
+            _context.next = 10;
             return authorizationHandler.fetchLoginProvider({
               email: email
             });
-          case 8:
+          case 10:
             response = _context.sent;
             if (response.provider == 'standard') {
               setStep('login');
             } else {
               authorizationStore.openOAuthLogin(response.provider, authorizationStore.state.organizationId, authorizationStore.state.invitationId);
             }
-            _context.next = 16;
+            _context.next = 18;
             break;
-          case 12:
-            _context.prev = 12;
-            _context.t0 = _context["catch"](0);
+          case 14:
+            _context.prev = 14;
+            _context.t0 = _context["catch"](2);
             LOG$3.error(new DivaError('Error while fetching login provider', {
               cause: _context.t0
             }));
             setError('auth.error.password');
-          case 16:
+          case 18:
+            _context.prev = 18;
+            setLoading(false);
+            return _context.finish(18);
+          case 21:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[0, 12]]);
+      }, _callee, null, [[2, 14, 18, 21]]);
     }));
     return function onContinue() {
       return _ref.apply(this, arguments);
@@ -182,27 +221,35 @@ function Login() {
       return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
-            _context2.prev = 0;
-            _context2.next = 3;
+            setLoading(true);
+            if (errorText) {
+              setError(undefined);
+            }
+            _context2.prev = 2;
+            _context2.next = 5;
             return flowResult(authorizationStore.login(email, password, false, authorizationStore.state.organizationId, authorizationStore.state.invitationId, otp));
-          case 3:
+          case 5:
             setEmail('');
             setPassword('');
             setError(undefined);
-            _context2.next = 12;
+            _context2.next = 14;
             break;
-          case 8:
-            _context2.prev = 8;
-            _context2.t0 = _context2["catch"](0);
+          case 10:
+            _context2.prev = 10;
+            _context2.t0 = _context2["catch"](2);
             LOG$3.error(new DivaError('Error while logging in', {
               cause: _context2.t0
             }));
             setError(invitationFound ? 'auth.error.passwordotp' : 'auth.error.password');
-          case 12:
+          case 14:
+            _context2.prev = 14;
+            setLoading(false);
+            return _context2.finish(14);
+          case 17:
           case "end":
             return _context2.stop();
         }
-      }, _callee2, null, [[0, 8]]);
+      }, _callee2, null, [[2, 10, 14, 17]]);
     }));
     return function onLogin() {
       return _ref2.apply(this, arguments);
@@ -234,16 +281,10 @@ function Login() {
   if (useOtp && !loginDisabled) loginDisabled = otp.length == 0;
   var loginMethods = (_authorizationStore$s3 = authorizationStore.state) === null || _authorizationStore$s3 === void 0 ? void 0 : _authorizationStore$s3.loginMethods;
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx("h1", {
-      children: t('auth.title.login')
-    }), /*#__PURE__*/jsx("p", {
-      children: t('auth.text.login', '')
-    }), !!errorText && /*#__PURE__*/jsxs("div", {
-      className: error,
-      children: [/*#__PURE__*/jsx("span", {}), /*#__PURE__*/jsx("div", {
-        id: "loginerrortext",
-        children: t(errorText)
-      })]
+    children: [/*#__PURE__*/jsx(Header, {
+      title: t('auth.title.login'),
+      text: t('auth.text.login', ''),
+      errorText: errorText !== null && errorText !== void 0 ? errorText : ''
     }), /*#__PURE__*/jsx(OpenId, {}), ((loginMethods === null || loginMethods === void 0 ? void 0 : loginMethods.generic) || (loginMethods === null || loginMethods === void 0 ? void 0 : loginMethods.google) || (loginMethods === null || loginMethods === void 0 ? void 0 : loginMethods.microsoft)) && loginMethods.standard && /*#__PURE__*/jsx("div", {
       className: separator,
       children: "or"
@@ -254,6 +295,7 @@ function Login() {
           value: email,
           autoComplete: "username",
           autoFocus: true,
+          type: "email",
           placeholder: t('auth.input.email'),
           onChange: function onChange(e) {
             return setEmail(e.target.value);
@@ -285,14 +327,12 @@ function Login() {
           onChange: function onChange(e) {
             return setOtp(e.target.value);
           }
-        }), /*#__PURE__*/jsx("label", {
-          className: resetInput,
-          onClick: reset,
-          children: /*#__PURE__*/jsx(Input, {
-            value: email,
-            readOnly: true,
-            placeholder: t('auth.input.email')
-          })
+        }), /*#__PURE__*/jsx(Input, {
+          value: email,
+          type: "email",
+          readOnly: true,
+          placeholder: t('auth.input.email'),
+          resetInput: reset
         }), /*#__PURE__*/jsx(Input, {
           value: password,
           type: "password",
@@ -305,20 +345,25 @@ function Login() {
           onKeyPress: function onKeyPress(e) {
             return e.key == 'Enter' ? onLogin() : false;
           }
-        }), /*#__PURE__*/jsx("div", {
-          className: link,
-          style: {
-            textAlign: 'right'
-          },
-          onClick: resetPassword,
-          children: t('auth.button.forgotpassword')
         })]
-      }), /*#__PURE__*/jsx(Button, {
+      }), /*#__PURE__*/jsxs(Button, {
         id: "submit",
-        disabled: loginDisabled,
+        disabled: loginDisabled || loading,
         onClick: step == 'enter' ? onContinue : onLogin,
-        children: step == 'enter' ? t('auth.button.continue') : t('auth.button.login')
-      })]
+        children: [loading ? /*#__PURE__*/jsx(CircularProgress, {
+          size: 24,
+          color: "inherit"
+        }) : undefined, loading ? undefined : step == 'enter' ? t('auth.button.continue') : t('auth.button.login')]
+      }), step == 'login' && /*#__PURE__*/jsx("div", {
+        style: {
+          textAlign: 'center'
+        },
+        children: /*#__PURE__*/jsx("div", {
+          className: link,
+          onClick: resetPassword,
+          children: t('auth.button.forgotpassword')
+        })
+      }), ' ']
     })]
   });
 }
@@ -392,15 +437,10 @@ function RequestNewPassword (_ref) {
     authorizationStore.showLogin();
   };
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx("h1", {
-      children: t('auth.title.resetpassword')
-    }), /*#__PURE__*/jsx("p", {
-      children: t('auth.info.resetdescription')
-    }), !!errorText && /*#__PURE__*/jsxs("div", {
-      className: error,
-      children: [/*#__PURE__*/jsx("span", {}), /*#__PURE__*/jsx("div", {
-        children: t(errorText)
-      })]
+    children: [/*#__PURE__*/jsx(Header, {
+      title: t('auth.title.resetpassword'),
+      text: t('auth.info.resetdescription', ''),
+      errorText: errorText !== null && errorText !== void 0 ? errorText : ''
     }), requested && /*#__PURE__*/jsxs("div", {
       className: success,
       children: [/*#__PURE__*/jsx("span", {}), /*#__PURE__*/jsx("div", {
@@ -703,15 +743,10 @@ function WelcomeScreen (_ref) {
     return _checkInvitation.apply(this, arguments);
   }
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx("h1", {
-      children: t('auth.title.welcome')
-    }), /*#__PURE__*/jsx("p", {
-      children: t('auth.info.welcomedescription')
-    }), invitationError && /*#__PURE__*/jsxs("div", {
-      className: error,
-      children: [/*#__PURE__*/jsx("span", {}), /*#__PURE__*/jsx("div", {
-        children: t(invitationError)
-      })]
+    children: [/*#__PURE__*/jsx(Header, {
+      title: t('auth.title.welcome'),
+      text: t('auth.info.welcomedescription', ''),
+      errorText: invitationError !== null && invitationError !== void 0 ? invitationError : ''
     }), isNewUser && !invitationError && /*#__PURE__*/jsx(Button, {
       onClick: toRegister,
       children: t('auth.title.register')
@@ -760,8 +795,12 @@ function Register() {
     setOtp = _useState14[1];
   var _useState15 = useState(false),
     _useState16 = _slicedToArray(_useState15, 2),
-    agbAccepted = _useState16[0],
-    setAgbAccepted = _useState16[1];
+    loading = _useState16[0],
+    setLoading = _useState16[1];
+  var _useState17 = useState(false),
+    _useState18 = _slicedToArray(_useState17, 2),
+    agbAccepted = _useState18[0],
+    setAgbAccepted = _useState18[1];
   var onRegister = /*#__PURE__*/function () {
     var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
       var _authorizationStore$s2;
@@ -769,28 +808,33 @@ function Register() {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             _context.prev = 0;
-            _context.next = 3;
+            setLoading(true);
+            _context.next = 4;
             return flowResult(authorizationStore.register(email, password, firstname, familyname, (_authorizationStore$s2 = authorizationStore.state) === null || _authorizationStore$s2 === void 0 ? void 0 : _authorizationStore$s2.invitationId, useOtp ? otp : undefined));
-          case 3:
+          case 4:
             setEmail('');
             setPassword('');
             setRepeatPassword('');
             setFirstname('');
             setFamilyname('');
-            _context.next = 14;
+            _context.next = 15;
             break;
-          case 10:
-            _context.prev = 10;
+          case 11:
+            _context.prev = 11;
             _context.t0 = _context["catch"](0);
             setErrorText('auth.error.invitationotp');
             LOG.error(new DivaError('Error while registering', {
               cause: _context.t0
             }));
-          case 14:
+          case 15:
+            _context.prev = 15;
+            setLoading(false);
+            return _context.finish(15);
+          case 18:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[0, 10]]);
+      }, _callee, null, [[0, 11, 15, 18]]);
     }));
     return function onRegister() {
       return _ref.apply(this, arguments);
@@ -803,15 +847,10 @@ function Register() {
   };
   var loginMethods = (_authorizationStore$s4 = authorizationStore.state) === null || _authorizationStore$s4 === void 0 ? void 0 : _authorizationStore$s4.loginMethods;
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx("h1", {
-      children: t('auth.title.register')
-    }), /*#__PURE__*/jsx("p", {
-      children: t('auth.text.register', '')
-    }), !!errorText && /*#__PURE__*/jsxs("div", {
-      className: error,
-      children: [/*#__PURE__*/jsx("span", {}), /*#__PURE__*/jsx("div", {
-        children: t(errorText)
-      })]
+    children: [/*#__PURE__*/jsx(Header, {
+      title: t('auth.title.register'),
+      text: t('auth.text.register', ''),
+      errorText: errorText !== null && errorText !== void 0 ? errorText : ''
     }), /*#__PURE__*/jsx(OpenId, {}), ((loginMethods === null || loginMethods === void 0 ? void 0 : loginMethods.generic) || (loginMethods === null || loginMethods === void 0 ? void 0 : loginMethods.google) || (loginMethods === null || loginMethods === void 0 ? void 0 : loginMethods.microsoft)) && loginMethods.standard && /*#__PURE__*/jsx("div", {
       className: separator,
       children: "or"
@@ -892,19 +931,20 @@ function Register() {
               })]
             })]
           })]
-        }), /*#__PURE__*/jsx(Typography, {
-          style: {
-            color: '#FF8C00',
-            marginTop: 10,
-            fontSize: 14
+        }), /*#__PURE__*/jsx(Alert$1, {
+          severity: "warning",
+          sx: {
+            display: validPassword() ? 'none' : 'flex'
           },
-          hidden: validPassword(),
           children: t('auth.input.passwordsnotmatch')
         })]
-      }), /*#__PURE__*/jsx(Button, {
-        disabled: !validPassword(),
+      }), /*#__PURE__*/jsxs(Button, {
+        disabled: !validPassword() || loading,
         onClick: validPassword() ? onRegister : undefined,
-        children: t('auth.input.login')
+        children: [loading ? /*#__PURE__*/jsx(CircularProgress$1, {
+          size: 24,
+          color: "inherit"
+        }) : undefined, loading ? undefined : t('auth.input.login')]
       })]
     })]
   });
@@ -916,7 +956,8 @@ function Auth() {
   var _useDivaCoreContext = useDivaCoreContext(),
     authorizationStore = _useDivaCoreContext.authorizationStore,
     configurationStore = _useDivaCoreContext.configurationStore,
-    dataStore = _useDivaCoreContext.dataStore;
+    dataStore = _useDivaCoreContext.dataStore,
+    contentStore = _useDivaCoreContext.contentStore;
   var logo = useMemo(function () {
     var _dataStore$organizati, _configurationStore$n;
     var logo = divaLogo;
@@ -945,14 +986,14 @@ function Auth() {
       }
     }), /*#__PURE__*/jsxs("div", {
       className: loginBox,
-      children: [/*#__PURE__*/jsx("div", {
+      children: [(!contentStore.containerDimensions.isMobile || contentStore.containerDimensions.isPortrait) && /*#__PURE__*/jsx("div", {
         className: logoContainer,
         style: {
           height: (_configurationStore$c = configurationStore.configuration.loginLogoHeight) !== null && _configurationStore$c !== void 0 ? _configurationStore$c : 50,
           backgroundImage: "url(".concat(logo, ")")
         }
       }), /*#__PURE__*/jsx(AuthElements, {})]
-    }), configurationStore.authentication.contentBox && /*#__PURE__*/jsx("div", {
+    }), configurationStore.authentication.contentBox && !contentStore.containerDimensions.isMobile && /*#__PURE__*/jsx("div", {
       style: {
         width: 'calc(100% - 400px)',
         height: '100%',