tg-core-components 5.2.1-history-time-label.0 → 5.3.0-master.1

package/lib/widgets/RequestResetPassword/index.js

@@ -24,10 +24,6 @@ var _Input = require('../../components/Input');
 
 var _Input2 = _interopRequireDefault(_Input);
 
-var _Button = require('../../components/Button');
-
-var _Button2 = _interopRequireDefault(_Button);
-
 var _required = require('../../lib/WithValidation/rules/required');
 
 var _required2 = _interopRequireDefault(_required);
@@ -70,8 +66,7 @@ var RequestResetPassword = function (_Component) {
           errors = _props.errors,
           intl = _props.intl,
           onSubmit = _props.onSubmit,
-          _onBlur = _props.onBlur,
-          isLoading = _props.isLoading;
+          _onBlur = _props.onBlur;
 
 
       if (status == 'COMPLETE') {
@@ -82,22 +77,25 @@ var RequestResetPassword = function (_Component) {
         'form',
         { className: 'form', onSubmit: onSubmit },
         _react2.default.createElement(_Input2.default, {
-          label: (0, _translate2.default)({ id: 'label.username_or_email' }, intl),
+          className: 'layout-item send-email-input',
+          title: (0, _translate2.default)({ id: 'label.username_or_email' }, intl),
           type: 'text',
           name: 'UsernameOrEmail',
-          onBlur: function onBlur(e) {
-            return _onBlur('UsernameOrEmail', e.target.value);
+          onBlur: function onBlur(value) {
+            return _onBlur('UsernameOrEmail', value);
           },
-          status: errors.UsernameOrEmail && 'failure' || 'idle',
-          statusText: errors.UsernameOrEmail && (0, _translate2.default)({ id: errors.UsernameOrEmail }, intl)
+          error: errors.UsernameOrEmail && (0, _translate2.default)({ id: errors.UsernameOrEmail }, intl)
         }),
         _react2.default.createElement(
-          _Button2.default,
-          {
-            className: 'button primary wide',
-            type: 'submit',
-            isLoading: isLoading },
-          (0, _translate2.default)({ id: 'label.request_reset_password' }, intl)
+          'div',
+          { className: 'layout-item' },
+          _react2.default.createElement(
+            'button',
+            {
+              className: 'button primary request-reset-password-button',
+              type: 'submit' },
+            (0, _translate2.default)({ id: 'label.request_reset_password' }, intl)
+          )
         )
       );
     }

package/lib/widgets/ResetPassword/index.js

@@ -24,10 +24,6 @@ var _Input = require('../../components/Input');
 
 var _Input2 = _interopRequireDefault(_Input);
 
-var _Button = require('../../components/Button');
-
-var _Button2 = _interopRequireDefault(_Button);
-
 var _required = require('../../lib/WithValidation/rules/required');
 
 var _required2 = _interopRequireDefault(_required);
@@ -44,6 +40,10 @@ var _translate = require('../../lib/utils/translate');
 
 var _translate2 = _interopRequireDefault(_translate);
 
+var _index = require('../../components/Button/index');
+
+var _index2 = _interopRequireDefault(_index);
+
 var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
@@ -73,39 +73,43 @@ var ResetPassword = function (_Component) {
           intl = _props.intl,
           onSubmit = _props.onSubmit,
           _onBlur = _props.onBlur,
-          isLoading = _props.isLoading;
+          disabled = _props.disabled;
 
 
       return _react2.default.createElement(
         'form',
         { className: 'form', onSubmit: onSubmit },
         _react2.default.createElement(_Input2.default, {
-          label: (0, _translate2.default)({ id: 'label.new_password' }, intl),
+          className: 'layout-item',
+          placeholder: (0, _translate2.default)({ id: 'label.new_password' }, intl),
           type: 'password',
           name: 'NewPassword',
-          onBlur: function onBlur(e) {
-            return _onBlur('NewPassword', e.target.value);
+          onBlur: function onBlur(value) {
+            return _onBlur('NewPassword', value);
           },
-          status: errors.NewPassword && 'failure' || 'idle',
-          statusText: errors.NewPassword && (0, _translate2.default)({ id: errors.NewPassword }, intl)
+          error: errors.NewPassword && (0, _translate2.default)({ id: errors.NewPassword }, intl)
         }),
         _react2.default.createElement(_Input2.default, {
-          label: (0, _translate2.default)({ id: 'label.confirm_password' }, intl),
+          className: 'layout-item',
+          placeholder: (0, _translate2.default)({ id: 'label.confirm_password' }, intl),
           type: 'password',
           name: 'confirm_password',
-          onBlur: function onBlur(e) {
-            return _onBlur('confirm_password', e.target.value);
+          onBlur: function onBlur(value) {
+            return _onBlur('confirm_password', value);
           },
-          status: errors.confirm_password && 'failure' || 'idle',
-          statusText: errors.confirm_password && (0, _translate2.default)({ id: errors.confirm_password }, intl)
+          error: errors.confirm_password && (0, _translate2.default)({ id: errors.confirm_password }, intl)
         }),
         _react2.default.createElement(
-          _Button2.default,
-          {
-            className: 'button primary wide',
-            type: 'submit',
-            isLoading: isLoading },
-          (0, _translate2.default)({ id: 'label.reset_password' }, intl)
+          'div',
+          { className: 'layout-item' },
+          _react2.default.createElement(
+            _index2.default,
+            {
+              isLoading: disabled,
+              className: 'button primary reset-password-button',
+              type: 'submit' },
+            (0, _translate2.default)({ id: 'label.reset_password' }, intl)
+          )
         )
       );
     }

package/lib/widgets/ResponsibleGamingAccordion/LimitStatus/index.js

@@ -162,8 +162,11 @@ var TransactionLimit = function TransactionLimit(_ref3) {
       { className: 'transaction-limit-value' },
       _react2.default.createElement(
         'a',
-        { href: '#', onClick: function onClick() {
-            return handleCancel(id);
+        {
+          href: '#',
+          onClick: function onClick(e) {
+            e.preventDefault();
+            handleCancel(id);
           } },
         _react2.default.createElement(_Translate2.default, { id: 'action.delete.limit', defaultMessage: 'Delete' })
       )

package/lib/widgets/ResponsibleGamingAccordion/PeriodItemContent/index.js

@@ -90,8 +90,7 @@ var PeriodItemContent = function PeriodItemContent(_ref) {
         value: displayLimit ? displayLimit.Amount : null,
         name: 'Amount',
         disabled: confirmLimit || cooldownLimit || pendingLimit,
-        status: errors.Amount && 'failure',
-        statusText: errors.Amount && (0, _translate2.default)({ id: errors.Amount }, intl)
+        error: errors.Amount && (0, _translate2.default)({ id: errors.Amount }, intl)
       }),
       confirmLimit && _react2.default.createElement(
         'div',

package/lib/widgets/ResponsibleGamingSingleSignUp/AmountItem/index.js

@@ -77,8 +77,7 @@ var AmountItem = function (_Component) {
           },
           name: timespan,
           value: value,
-          status: !!error && 'failure',
-          statusText: error,
+          error: error,
           currency: currency,
           type: 'number',
           inputMode: 'numeric',

package/lib/widgets/ResponsibleGamingWidget/Timespan.js

@@ -282,10 +282,8 @@ var DefaultTimespan = function DefaultTimespan(_ref10) {
       setValue = _useState2[1];
 
   (0, _react.useEffect)(function () {
-    if (newLimit && newLimit.Amount) {
-      setValue(newLimit.Amount);
-    }
-  }, [newLimit]);
+    return setValue(newLimit ? newLimit.Amount : currentLimit ? currentLimit.Amount : 0);
+  }, [newLimit, currentLimit]);
 
   var _useState3 = (0, _react.useState)('select'),
       _useState4 = _slicedToArray(_useState3, 2),
@@ -336,7 +334,9 @@ var DefaultTimespan = function DefaultTimespan(_ref10) {
     }).sort();
   }
 
-  var closeCustomAmount = function closeCustomAmount() {
+  var closeCustomAmount = function closeCustomAmount(e) {
+    e.preventDefault();
+    e.stopPropagation();
     _onChange(currentLimit ? currentLimit.Amount : 0);
     setInputMode('select');
   };
@@ -354,24 +354,15 @@ var DefaultTimespan = function DefaultTimespan(_ref10) {
     _react.Fragment,
     null,
     _react2.default.createElement(
-      'div',
+      'form',
       { className: 'ResponsibleGamingWidget__timespan-limit-selector' },
-      inputMode === 'select' && _react2.default.createElement(
-        _Select2.default,
-        {
-          options: options,
-          value: value,
-          onChange: function onChange(e, value) {
-            return _onChange(value);
-          } },
-        options.map(function (o) {
-          return _react2.default.createElement(
-            _Select2.default.Option,
-            { value: o.value },
-            o.label
-          );
-        })
-      ),
+      inputMode === 'select' && _react2.default.createElement(_Select2.default, {
+        options: options,
+        value: value,
+        onChange: function onChange(e, name, value) {
+          return _onChange(value);
+        }
+      }),
       inputMode === 'input' && _react2.default.createElement(
         _react.Fragment,
         null,
@@ -379,7 +370,7 @@ var DefaultTimespan = function DefaultTimespan(_ref10) {
           type: 'number',
           pattern: '\\d*',
           value: value,
-          onChange: function onChange(e, value) {
+          onChange: function onChange(e, name, value) {
             setValue(parseInt(value));
             if (value > 0) _onChange(value);
           },
@@ -390,7 +381,6 @@ var DefaultTimespan = function DefaultTimespan(_ref10) {
         _react2.default.createElement(
           _Button2.default,
           {
-            type: 'button',
             onClick: closeCustomAmount,
             className: 'button mini tertiary' },
           _react2.default.createElement(_Icon2.default, { icon: 'times' })

package/lib/widgets/ResponsibleGamingWidget/helpers.js

@@ -17,8 +17,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * Helper function to get values using currency and timespan
  */
 var getValues = exports.getValues = function getValues(values, currency, timespan) {
-  values = (0, _get2.default)(values, '[' + (currency || '').toUpperCase() + ']') || values;
-  return (Array.isArray(values) ? values : []).filter(function (v) {
+  values = (0, _get2.default)(values, '[' + (currency || '').toUpperCase() + ']') || values || [];
+  return values.filter(function (v) {
     return (typeof v === 'undefined' ? 'undefined' : _typeof(v)) === 'object' && v.timespan === timespan || typeof v === 'number';
   }).map(function (v) {
     return (typeof v === 'undefined' ? 'undefined' : _typeof(v)) === 'object' ? v.amount : v;

package/lib/widgets/ResponsibleGamingWidget/validate.js

@@ -58,7 +58,7 @@ var validate = function validate(_ref) {
   var sga = (_sga = {}, _defineProperty(_sga, 'insufficient-limit-count', type === 'Deposit' && limitCount < 3), _defineProperty(_sga, 'limit-remove-blocked', type === 'Deposit'), _sga);
   var uk = {};
   var dga = (_dga = {}, _defineProperty(_dga, 'insufficient-limit-count', type === 'Deposit' && limitCount < 1), _defineProperty(_dga, 'limit-remove-blocked', type === 'Deposit' && limitCount <= 1), _dga);
-  var es = (_es = {}, _defineProperty(_es, 'insufficient-limit-count', type === 'Deposit' && limitCount < 3), _defineProperty(_es, 'limit-remove-blocked', type === 'Deposit'), _defineProperty(_es, 'limit-increase-blocked', type === 'Deposit' && limitIncreaseInfo.HasDepositLimitIncreaseBlock), _defineProperty(_es, 'support-pending', type === 'Deposit' && limitIncreaseInfo.HasValidPgsiScore && limitIncreaseInfo.RequiresSupportApproval), _defineProperty(_es, 'requires-self-test', isIncreasingLimit && type === 'Deposit' && !limitIncreaseInfo.HasDepositLimitIncreaseBlock), _defineProperty(_es, 'self-test-fail-cooldown', type === 'Deposit' && !limitIncreaseInfo.HasValidPgsiScore && limitIncreaseInfo.HasDepositLimitIncreaseBlock), _es);
+  var es = (_es = {}, _defineProperty(_es, 'insufficient-limit-count', type === 'Deposit' && limitCount < 3), _defineProperty(_es, 'limit-remove-blocked', type === 'Deposit'), _defineProperty(_es, 'limit-increase-blocked', type === 'Deposit' && limitIncreaseInfo.HasDepositLimitIncreaseBlock), _defineProperty(_es, 'support-pending', type === 'Deposit' && limitIncreaseInfo.HasValidPgsiScore && limitIncreaseInfo.RequiresSupportApproval), _defineProperty(_es, 'requires-self-test', isIncreasingLimit && type === 'Deposit' && !limitIncreaseInfo.HasValidPgsiScore && !limitIncreaseInfo.HasDepositLimitIncreaseBlock), _defineProperty(_es, 'self-test-fail-cooldown', type === 'Deposit' && !limitIncreaseInfo.HasValidPgsiScore && limitIncreaseInfo.HasDepositLimitIncreaseBlock), _es);
 
   switch (jurisdiction) {
     case 'mga':

package/lib/widgets/Settings/index.js

@@ -14,6 +14,10 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
+var _Checkbox = require('../../components/Checkbox');
+
+var _Checkbox2 = _interopRequireDefault(_Checkbox);
+
 var _Select = require('../../components/Select');
 
 var _Select2 = _interopRequireDefault(_Select);
@@ -22,10 +26,6 @@ var _Input = require('../../components/Input');
 
 var _Input2 = _interopRequireDefault(_Input);
 
-var _Button = require('../../components/Button');
-
-var _Button2 = _interopRequireDefault(_Button);
-
 var _Translate = require('../../components/Translate');
 
 var _Translate2 = _interopRequireDefault(_Translate);
@@ -40,7 +40,7 @@ var Settings = function Settings(_ref) {
       onSave = _ref.onSave;
 
   var types = {
-    checkbox: Checkbox,
+    checkbox: _Checkbox2.default,
     select: _Select2.default,
     input: _Input2.default
   };
@@ -57,7 +57,7 @@ var Settings = function Settings(_ref) {
       return Component && _react2.default.createElement(Component, _extends({ key: key }, props, { onChange: onChange }));
     }),
     _react2.default.createElement(
-      _Button2.default,
+      'button',
       { onClick: onSave, className: 'button primary' },
       _react2.default.createElement(_Translate2.default, { id: 'action.save', defaultMessage: 'Save' })
     )

package/lib/widgets/SignIn/SignInForm.js

@@ -18,6 +18,10 @@ var _Input = require('../../components/Input');
 
 var _Input2 = _interopRequireDefault(_Input);
 
+var _Checkbox = require('../../components/Checkbox');
+
+var _Checkbox2 = _interopRequireDefault(_Checkbox);
+
 var _ButtonLoader = require('../../components/ButtonLoader');
 
 var _ButtonLoader2 = _interopRequireDefault(_ButtonLoader);
@@ -61,8 +65,7 @@ var SignIn = function SignIn(_ref) {
         return _onBlur('username', value);
       },
       title: (0, _translate2.default)({ id: 'label.username' }, intl),
-      status: errors.username && 'failure' || 'idle',
-      statusText: errors.username && (0, _translate2.default)({ id: errors.username }, intl),
+      error: errors.username && (0, _translate2.default)({ id: errors.username }, intl),
       autoFocus: shouldAutoFocus && !email
     }),
     _react2.default.createElement(_Input2.default, {
@@ -74,13 +77,11 @@ var SignIn = function SignIn(_ref) {
         return _onBlur('password', value);
       },
       title: (0, _translate2.default)({ id: 'label.password' }, intl),
-      status: errors.password && 'failure' || 'idle',
-      statusText: errors.password && (0, _translate2.default)({ id: errors.password }, intl),
+      error: errors.password && (0, _translate2.default)({ id: errors.password }, intl),
       autoFocus: shouldAutoFocus && email
     }),
-    _react2.default.createElement(_Input2.default, {
+    _react2.default.createElement(_Checkbox2.default, {
       className: 'layout-item-full-width remember-email-checkbox',
-      type: 'checkbox',
       label: (0, _translate2.default)({
         id: 'label.remember-email',
         defaultMessage: 'Remember email'

package/lib/widgets/SignIn/index.js

@@ -18,9 +18,13 @@ var _Input = require('../../components/Input');
 
 var _Input2 = _interopRequireDefault(_Input);
 
-var _Button = require('../../components/Button');
+var _Checkbox = require('../../components/Checkbox');
 
-var _Button2 = _interopRequireDefault(_Button);
+var _Checkbox2 = _interopRequireDefault(_Checkbox);
+
+var _ButtonLoader = require('../../components/ButtonLoader');
+
+var _ButtonLoader2 = _interopRequireDefault(_ButtonLoader);
 
 var _WithValidation = require('../../lib/WithValidation');
 
@@ -34,10 +38,6 @@ var _translate = require('../../lib/utils/translate');
 
 var _translate2 = _interopRequireDefault(_translate);
 
-var _Icon = require('../../components/Icon');
-
-var _Icon2 = _interopRequireDefault(_Icon);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var SignIn = function SignIn(_ref) {
@@ -61,44 +61,44 @@ var SignIn = function SignIn(_ref) {
       name: 'username',
       value: email,
       onChange: handleChangeEmail,
-      onBlur: function onBlur() {
-        return _onBlur('username', email);
+      onBlur: function onBlur(value) {
+        return _onBlur('username', value);
       },
-      label: (0, _translate2.default)({ id: 'label.username_or_email' }, intl),
+      title: (0, _translate2.default)({ id: 'label.username_or_email' }, intl),
+      error: errors.username && (0, _translate2.default)({ id: errors.username }, intl),
       autoFocus: shouldAutoFocus && !email,
-      autoComplete: 'username',
-      icon: _react2.default.createElement(_Icon2.default, { icon: 'envelope' }),
-      status: errors.username && 'failure',
-      statusText: errors.username && (0, _translate2.default)({ id: errors.username }, intl)
+      autoComplete: 'username'
     }),
     _react2.default.createElement(_Input2.default, {
       className: 'layout-item-full-width',
       type: 'password',
       name: 'password',
-      label: (0, _translate2.default)({ id: 'label.password' }, intl),
+      showToggleIcon: true,
+      onBlur: function onBlur(value) {
+        return _onBlur('password', value);
+      },
+      title: (0, _translate2.default)({ id: 'label.password' }, intl),
+      error: errors.password && (0, _translate2.default)({ id: errors.password }, intl),
       autoFocus: shouldAutoFocus && email,
-      autoComplete: 'current-password',
-      icon: _react2.default.createElement(_Icon2.default, { icon: 'lock' }),
-      status: errors.password && 'failure',
-      statusText: errors.password && (0, _translate2.default)({ id: errors.password }, intl)
+      autoComplete: 'current-password'
     }),
-    _react2.default.createElement(_Input2.default, {
+    _react2.default.createElement(_Checkbox2.default, {
       className: 'layout-item-full-width remember-email-checkbox',
-      type: 'checkbox',
-      label: (0, _translate2.default)({
+      title: (0, _translate2.default)({
         id: 'label.remember-email',
         defaultMessage: 'Remember email'
       }, intl),
-      value: shouldRememberEmail,
+      checked: shouldRememberEmail,
       onChange: handleToggleRememberEmail,
       name: 'remember-email'
     }),
     _react2.default.createElement(
-      _Button2.default,
+      'button',
       {
-        className: 'button primary wide',
+        className: 'button primary wide ' + (isLoading && 'loading'),
         type: 'submit',
-        isLoading: !!isLoading },
+        disabled: !!isLoading },
+      isLoading && _react2.default.createElement(_ButtonLoader2.default, null),
       (0, _translate2.default)({ id: 'action.button.login' }, intl)
     )
   );

package/lib/widgets/SignUp/ContactInfoStep.js

@@ -26,6 +26,10 @@ var _Select = require('../../components/Select');
 
 var _Select2 = _interopRequireDefault(_Select);
 
+var _Checkbox = require('../../components/Checkbox');
+
+var _Checkbox2 = _interopRequireDefault(_Checkbox);
+
 var _WithValidation = require('../../lib/WithValidation');
 
 var _WithValidation2 = _interopRequireDefault(_WithValidation);
@@ -306,18 +310,16 @@ var ContactInfo = function (_Component) {
           },
           defaultValue: 'Male'
         }),
-        _react2.default.createElement(_Input2.default, {
-          type: 'checkbox',
-          label: intl.formatMessage({ id: 'label.terms-of-conditions' }),
+        _react2.default.createElement(_Checkbox2.default, {
+          title: intl.formatMessage({ id: 'label.terms-of-conditions' }),
           name: 'AcceptTerms',
           onChange: function onChange(e, name, val) {
             return _onChange(name, val);
           },
           error: errors.AcceptTerms && (0, _translate2.default)({ id: errors.AcceptTerms }, intl)
         }),
-        _react2.default.createElement(_Input2.default, {
-          type: 'checkbox',
-          label: intl.formatMessage({
+        _react2.default.createElement(_Checkbox2.default, {
+          title: intl.formatMessage({
             id: 'label.optin.marketing',
             defaultMessage: 'I want to receive marketing material'
           }),