@mailstep/design-system 0.7.50-beta.4 → 0.7.50-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.50-beta.4",
+  "version": "0.7.50-beta.5",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/LoginPage/LoginPage.js

@@ -9,7 +9,7 @@ import { Trans } from '@lingui/react';
 import { x } from '@xstyled/styled-components';
 import { Wrapper, MailTo, LanguageBox, LogoWrapper, MainLogo, Version, CardBodyWithLanguage } from './styles';
 var Login = function (_a) {
-    var onSubmit = _a.onSubmit, activeLanguage = _a.activeLanguage, onLanguageChange = _a.onLanguageChange, children = _a.children, brand = _a.brand, brandVariant = _a.brandVariant, isSubmitting = _a.isSubmitting, isSubmitDisabled = _a.isSubmitDisabled, withDistributionCenterSelect = _a.withDistributionCenterSelect, distributionCenterOptions = _a.distributionCenterOptions, selectedDistributionCenter = _a.selectedDistributionCenter, onChangeDistributionCenter = _a.onChangeDistributionCenter, languageItems = _a.languageItems, version = _a.version, backgroundImage = _a.backgroundImage, backgroundColor = _a.backgroundColor, admin = _a.admin, _b = _a.hasSupport, hasSupport = _b === void 0 ? true : _b, _c = _a.hasSocialLinks, hasSocialLinks = _c === void 0 ? true : _c, _d = _a.withPassword, withPassword = _d === void 0 ? true : _d, loginLabel = _a.loginLabel;
-    return (_jsxs(Wrapper, { backgroundImage: backgroundImage, backgroundColor: backgroundColor, children: [_jsxs(CardBodyWithLanguage, { children: [_jsxs(LogoWrapper, { children: [_jsx(MainLogo, { brand: brand, variant: brandVariant }), admin && _jsx(Admin, {})] }), _jsxs(LanguageBox, { children: [hasSupport && (_jsxs(x.div, { mr: 4, children: [_jsx(H6, { color: "gray1", variant: "bold", mt: "8px", mb: "8px", as: "h6", children: _jsx(Trans, { id: "form.heading.support", message: "Support:" }) }), _jsx(MailTo, { href: "mailto:mailstep@mailstep.cz", children: EMAIL_ADDRESS })] })), _jsx(LanguageSwitch, { activeLanguage: activeLanguage, onLanguageChange: onLanguageChange, languageItems: languageItems })] }), _jsx(LoginForm, { onSubmit: onSubmit, isSubmitDisabled: isSubmitDisabled, isSubmitting: isSubmitting, onChangeDistributionCenter: onChangeDistributionCenter, withDistributionCenterSelect: withDistributionCenterSelect, distributionCenterOptions: distributionCenterOptions, selectedDistributionCenter: selectedDistributionCenter, withPassword: withPassword, loginLabel: loginLabel })] }), children, version && _jsx(Version, { children: version }), hasSocialLinks && _jsx(SocialLinks, {})] }));
+    var onSubmit = _a.onSubmit, activeLanguage = _a.activeLanguage, onLanguageChange = _a.onLanguageChange, children = _a.children, brand = _a.brand, brandVariant = _a.brandVariant, isSubmitting = _a.isSubmitting, isSubmitDisabled = _a.isSubmitDisabled, withDistributionCenterSelect = _a.withDistributionCenterSelect, distributionCenterOptions = _a.distributionCenterOptions, selectedDistributionCenter = _a.selectedDistributionCenter, onChangeDistributionCenter = _a.onChangeDistributionCenter, languageItems = _a.languageItems, version = _a.version, backgroundImage = _a.backgroundImage, admin = _a.admin, _b = _a.hasSupport, hasSupport = _b === void 0 ? true : _b, _c = _a.hasSocialLinks, hasSocialLinks = _c === void 0 ? true : _c, _d = _a.withPassword, withPassword = _d === void 0 ? true : _d, _e = _a.withLogin, withLogin = _e === void 0 ? true : _e, loginLabel = _a.loginLabel;
+    return (_jsxs(Wrapper, { backgroundImage: backgroundImage, children: [_jsxs(CardBodyWithLanguage, { children: [_jsxs(LogoWrapper, { children: [_jsx(MainLogo, { brand: brand, variant: brandVariant }), admin && _jsx(Admin, {})] }), _jsxs(LanguageBox, { children: [hasSupport && (_jsxs(x.div, { mr: 4, children: [_jsx(H6, { color: "gray1", variant: "bold", mt: "8px", mb: "8px", as: "h6", children: _jsx(Trans, { id: "form.heading.support", message: "Support:" }) }), _jsx(MailTo, { href: "mailto:mailstep@mailstep.cz", children: EMAIL_ADDRESS })] })), _jsx(LanguageSwitch, { activeLanguage: activeLanguage, onLanguageChange: onLanguageChange, languageItems: languageItems })] }), _jsx(LoginForm, { onSubmit: onSubmit, isSubmitDisabled: isSubmitDisabled, isSubmitting: isSubmitting, onChangeDistributionCenter: onChangeDistributionCenter, withDistributionCenterSelect: withDistributionCenterSelect, distributionCenterOptions: distributionCenterOptions, selectedDistributionCenter: selectedDistributionCenter, withPassword: withPassword, withLogin: withLogin, loginLabel: loginLabel })] }), children, version && _jsx(Version, { children: version }), hasSocialLinks && _jsx(SocialLinks, {})] }));
 };
 export default Login;

package/ui/Blocks/LoginPage/components/LoginForm.d.ts

@@ -11,6 +11,7 @@ type Props = {
     selectedDistributionCenter?: string;
     withPassword?: boolean;
     loginLabel?: string;
+    withLogin?: boolean;
 };
 export declare const LoginForm: FC<Props>;
 export {};

package/ui/Blocks/LoginPage/components/LoginForm.js

@@ -13,19 +13,20 @@ import styled, { x } from '@xstyled/styled-components';
 var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n  margin-bottom: 10px;\n  & > div > H4 {\n    display: none;\n  }\n  @media (min-width: 1024px) {\n    height: 300px;\n    min-width: 300px;\n    margin-bottom: 50px;\n    & > div > H4 {\n      display: block;\n    }\n  }\n"], ["\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n  margin-bottom: 10px;\n  & > div > H4 {\n    display: none;\n  }\n  @media (min-width: 1024px) {\n    height: 300px;\n    min-width: 300px;\n    margin-bottom: 50px;\n    & > div > H4 {\n      display: block;\n    }\n  }\n"])));
 var ButtonsContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  margin-top: 15px;\n  width: 100%;\n  @media (min-width: 1024px) {\n    display: inline-block;\n    margin-top: 40px;\n  }\n"], ["\n  display: flex;\n  margin-top: 15px;\n  width: 100%;\n  @media (min-width: 1024px) {\n    display: inline-block;\n    margin-top: 40px;\n  }\n"])));
 export var LoginForm = function (_a) {
-    var onSubmit = _a.onSubmit, isSubmitting = _a.isSubmitting, isSubmitDisabled = _a.isSubmitDisabled, distributionCenterOptions = _a.distributionCenterOptions, withDistributionCenterSelect = _a.withDistributionCenterSelect, onChangeDistributionCenter = _a.onChangeDistributionCenter, selectedDistributionCenter = _a.selectedDistributionCenter, withPassword = _a.withPassword, loginLabel = _a.loginLabel;
+    var onSubmit = _a.onSubmit, isSubmitting = _a.isSubmitting, isSubmitDisabled = _a.isSubmitDisabled, distributionCenterOptions = _a.distributionCenterOptions, withDistributionCenterSelect = _a.withDistributionCenterSelect, onChangeDistributionCenter = _a.onChangeDistributionCenter, selectedDistributionCenter = _a.selectedDistributionCenter, withPassword = _a.withPassword, withLogin = _a.withLogin, loginLabel = _a.loginLabel;
     var _b = useState(''), login = _b[0], setLogin = _b[1];
     var _c = useState(''), password = _c[0], setPassword = _c[1];
-    var _d = useState(''), loginError = _d[0], setLoginError = _d[1];
-    var _e = useState(''), passwordError = _e[0], setPasswordError = _e[1];
-    var _f = useState(''), dcCenterError = _f[0], setDCCenterError = _f[1];
+    var _d = useState(''), submitError = _d[0], setSubmitError = _d[1];
+    var _e = useState(''), loginError = _e[0], setLoginError = _e[1];
+    var _f = useState(''), passwordError = _f[0], setPasswordError = _f[1];
+    var _g = useState(''), dcCenterError = _g[0], setDCCenterError = _g[1];
     var handleChangeLogin = useCallback(function (e) {
         setLogin(e.target.value);
     }, []);
     var handleChangePassword = useCallback(function (e) {
         setPassword(e.target.value);
     }, []);
-    var handleSubmit = function () {
+    var handleSubmit = useCallback(function () {
         setLoginError('');
         setPasswordError('');
         setDCCenterError('');
@@ -41,18 +42,21 @@ export var LoginForm = function (_a) {
             setDCCenterError(i18n._({ id: 'requiredField', message: 'Required field' }));
             return;
         }
-        onSubmit({
-            login: login,
-            password: password
-        }).catch(console.error);
-    };
+        onSubmit({ login: login, password: password })
+            .catch(function (error) {
+            error && setSubmitError(String(error));
+        })
+            .finally(function () {
+            setPassword('');
+        });
+    }, [login, password, selectedDistributionCenter, withDistributionCenterSelect, withPassword, onSubmit]);
     var handleChangeDistributionCenter = useCallback(function (e) {
         onChangeDistributionCenter === null || onChangeDistributionCenter === void 0 ? void 0 : onChangeDistributionCenter(e.target.value);
     }, [onChangeDistributionCenter]);
-    return (_jsxs(Container, { children: [_jsx(x.div, { mt: "24px", children: _jsx(Input, { label: loginLabel || i18n._({ id: 'form.login.label', message: 'Login' }), placeholder: i18n._({ id: 'form.login.label', message: 'Login' }), type: "text", name: "login", autoFocus: true, error: loginError, value: login, onChange: handleChangeLogin, onEnter: handleSubmit }) }), withPassword && (_jsx(x.div, { mt: "12px", children: _jsx(Input, { label: i18n._({ id: 'form.password.label', message: 'Password' }), placeholder: i18n._({ id: 'form.password.label', message: 'Password' }), name: "password", type: "password", value: password, onChange: handleChangePassword, error: passwordError, onEnter: handleSubmit }) })), withDistributionCenterSelect && (_jsx(x.div, { mt: "12px", children: _jsx(SingleSelect
+    return (_jsxs(Container, { children: [withLogin && (_jsx(x.div, { mt: "24px", children: _jsx(Input, { label: loginLabel || i18n._({ id: 'form.login.label', message: 'Login' }), placeholder: i18n._({ id: 'form.login.label', message: 'Login' }), type: "text", name: "login", autoFocus: true, error: loginError, value: login, onChange: handleChangeLogin, onEnter: handleSubmit }) })), withPassword && (_jsx(x.div, { mt: "12px", children: _jsx(Input, { label: i18n._({ id: 'form.password.label', message: 'Password' }), placeholder: i18n._({ id: 'form.password.label', message: 'Password' }), name: "password", type: "password", value: password, onChange: handleChangePassword, error: passwordError, onEnter: handleSubmit }) })), withDistributionCenterSelect && (_jsx(x.div, { mt: "12px", children: _jsx(SingleSelect
                 // @ts-ignore
                 , { 
                     // @ts-ignore
-                    onChange: handleChangeDistributionCenter, options: distributionCenterOptions, value: selectedDistributionCenter, placeholder: i18n._({ id: 'form.distributionCenter.label', message: 'Distribution center' }), label: i18n._({ id: 'form.distributionCenter.label', message: 'Distribution center' }), error: dcCenterError }) })), _jsx(ButtonsContainer, { children: _jsx(Button, { onClick: handleSubmit, iconLeft: "login", isLoading: isSubmitting, disabled: isSubmitDisabled, fullWidth: true, children: _jsx(Trans, { id: "form.buttonSignIn", message: "Sign in" }) }) })] }));
+                    onChange: handleChangeDistributionCenter, options: distributionCenterOptions, value: selectedDistributionCenter, placeholder: i18n._({ id: 'form.distributionCenter.label', message: 'Distribution center' }), label: i18n._({ id: 'form.distributionCenter.label', message: 'Distribution center' }), error: dcCenterError }) })), submitError && (_jsx(x.div, { mt: "12px", color: "red1", children: submitError })), _jsx(ButtonsContainer, { children: _jsx(Button, { onClick: handleSubmit, iconLeft: "login", isLoading: isSubmitting, disabled: isSubmitDisabled, fullWidth: true, children: _jsx(Trans, { id: "form.buttonSignIn", message: "Sign in" }) }) })] }));
 };
 var templateObject_1, templateObject_2;

package/ui/Blocks/LoginPage/styles.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 export declare const Wrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     backgroundImage?: "mailship" | undefined;
-    backgroundColor?: string | undefined;
 }, never>;
 export declare const LanguageBox: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
 export declare const CardBodyWithLanguage: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

package/ui/Blocks/LoginPage/styles.js

@@ -8,12 +8,9 @@ import styled, { th } from '@xstyled/styled-components';
 var backgroundImageMap = {
     mailship: mailship
 };
-export var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  font-family: ", ";\n  flex-grow: 1;\n  background: ", ";\n  opacity: 1;\n  z-index: 1;\n  display: flex;\n  justify-content: space-between;\n  @media (min-width: 1024px) {\n    background: ", "\n    background-size: cover;\n  }\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  font-family: ", ";\n  flex-grow: 1;\n  background: ", ";\n  opacity: 1;\n  z-index: 1;\n  display: flex;\n  justify-content: space-between;\n  @media (min-width: 1024px) {\n    background: ", "\n    background-size: cover;\n  }\n"])), th('fonts.primary'), function (_a) {
-    var backgroundColor = _a.backgroundColor;
-    return backgroundColor || th('colors.bgLightGray');
-}, function (_a) {
-    var backgroundImage = _a.backgroundImage, backgroundColor = _a.backgroundColor;
-    return "".concat(backgroundColor ? backgroundColor : 'transparent', " ").concat(backgroundImage ? "url(".concat(backgroundImageMap[backgroundImage], ")") : '', " 50% 0% no-repeat padding-box;");
+export var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  font-family: ", ";\n  flex-grow: 1;\n  background: ", ";\n  opacity: 1;\n  z-index: 1;\n  display: flex;\n  justify-content: space-between;\n  @media (min-width: 1024px) {\n    background: ", "\n    background-size: cover;\n  }\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  font-family: ", ";\n  flex-grow: 1;\n  background: ", ";\n  opacity: 1;\n  z-index: 1;\n  display: flex;\n  justify-content: space-between;\n  @media (min-width: 1024px) {\n    background: ", "\n    background-size: cover;\n  }\n"])), th('fonts.primary'), th('colors.bgLightGray'), function (_a) {
+    var backgroundImage = _a.backgroundImage;
+    return "transparent ".concat(backgroundImage ? "url(".concat(backgroundImageMap[backgroundImage], ")") : '', " 50% 0% no-repeat padding-box;");
 });
 export var LanguageBox = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  margin: 15px 0;\n  align-items: flex-end;\n  justify-content: space-between;\n  @media (min-width: 1024px) {\n    justify-content: flex-end;\n    margin: 40px 0;\n  }\n"], ["\n  display: flex;\n  margin: 15px 0;\n  align-items: flex-end;\n  justify-content: space-between;\n  @media (min-width: 1024px) {\n    justify-content: flex-end;\n    margin: 40px 0;\n  }\n"])));
 export var CardBodyWithLanguage = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: start;\n  flex-direction: column;\n  padding: 0 32px 10px 32px;\n  flex-grow: 1;\n  margin: auto;\n  width: 500px;\n  @media (min-width: 1024px) {\n    display: block;\n    flex-grow: 0;\n  }\n"], ["\n  display: flex;\n  justify-content: start;\n  flex-direction: column;\n  padding: 0 32px 10px 32px;\n  flex-grow: 1;\n  margin: auto;\n  width: 500px;\n  @media (min-width: 1024px) {\n    display: block;\n    flex-grow: 0;\n  }\n"])));

package/ui/Blocks/LoginPage/types.d.ts

@@ -23,11 +23,11 @@ export type LoginPageProps = {
     languageItems?: LanguageItem[];
     version?: string;
     backgroundImage?: BackgroundImages;
-    backgroundColor?: string;
     icon?: string;
     hasSupport?: boolean;
     hasSocialLinks?: boolean;
     withPassword?: boolean;
+    withLogin?: boolean;
     loginLabel?: string;
     admin?: boolean;
 };