tg-core-components 5.5.0-bethard → 5.5.0-master

package/lib/widgets/AccountDetail/index.js

@@ -30,10 +30,6 @@ var _Input = require('../../components/Input');
 
 var _Input2 = _interopRequireDefault(_Input);
 
-var _Select = require('../../components/Select');
-
-var _Select2 = _interopRequireDefault(_Select);
-
 var _translate = require('../../lib/utils/translate');
 
 var _translate2 = _interopRequireDefault(_translate);
@@ -42,14 +38,6 @@ var _Button = require('../../components/Button');
 
 var _Button2 = _interopRequireDefault(_Button);
 
-var _countryEmojiFlags = require('../../misc/countryEmojiFlags');
-
-var _countryEmojiFlags2 = _interopRequireDefault(_countryEmojiFlags);
-
-var _Icon = require('../../components/Icon');
-
-var _Icon2 = _interopRequireDefault(_Icon);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var AccountDetail = function AccountDetail(_ref) {
@@ -58,7 +46,6 @@ var AccountDetail = function AccountDetail(_ref) {
       errors = _ref.errors,
       onSubmit = _ref.onSubmit,
       jurisdiction = _ref.jurisdiction,
-      countries = _ref.countries,
       isLoading = _ref.isLoading;
 
   return _react2.default.createElement(
@@ -71,136 +58,113 @@ var AccountDetail = function AccountDetail(_ref) {
         disabled: true,
         className: 'layout-item-6',
         value: data.FirstName,
-        label: (0, _translate2.default)({
+        title: (0, _translate2.default)({
           id: 'title.first_name',
           defaultMessage: 'First name'
         }, intl),
+        placeholder: (0, _translate2.default)({ id: 'label.first_name' }, intl),
         name: 'FirstName',
-        status: errors.FirstName && 'failure' || 'idle',
-        statusText: errors.FirstName && (0, _translate2.default)({ id: errors.FirstName }, intl)
+        error: errors.FirstName && (0, _translate2.default)({ id: errors.FirstName }, intl)
       }),
       _react2.default.createElement(_Input2.default, {
         disabled: true,
         className: 'layout-item-6',
         value: data.LastName,
-        label: (0, _translate2.default)({
+        title: (0, _translate2.default)({
           id: 'title.last_name',
           defaultMessage: 'Last name'
         }, intl),
+        placeholder: (0, _translate2.default)({ id: 'label.last_name' }, intl),
         name: 'LastName',
-        status: errors.LastName && 'failure' || 'idle',
-        statusText: errors.LastName && (0, _translate2.default)({ id: errors.LastName }, intl)
+        error: errors.LastName && (0, _translate2.default)({ id: errors.LastName }, intl)
+      })
+    ),
+    _react2.default.createElement(
+      'div',
+      { className: 'layout-item' },
+      _react2.default.createElement(_Input2.default, {
+        title: (0, _translate2.default)({
+          id: 'title.address',
+          defaultMessage: 'Address'
+        }, intl),
+        placeholder: (0, _translate2.default)({ id: 'label.address' }, intl),
+        name: 'Address1',
+        value: data.Address1,
+        error: errors.Address1 && (0, _translate2.default)({ id: errors.Address1 }, intl),
+        autoComplete: 'off'
       })
     ),
-    _react2.default.createElement(_Input2.default, {
-      label: (0, _translate2.default)({
-        id: 'title.address',
-        defaultMessage: 'Address'
-      }, intl),
-      name: 'Address1',
-      value: data.Address1,
-      status: errors.Address1 && 'failure' || 'idle',
-      statusText: errors.Address1 && (0, _translate2.default)({ id: 'errors.Address1' }, intl),
-      autoComplete: 'off'
-    }),
     _react2.default.createElement(
       'div',
       { className: 'layout-item' },
       _react2.default.createElement(_Input2.default, {
         className: 'layout-item-6',
         value: data.Zip,
-        label: (0, _translate2.default)({ id: 'title.zip', defaultMessage: 'Zip' }, intl),
+        title: (0, _translate2.default)({ id: 'title.zip', defaultMessage: 'Zip' }, intl),
+        placeholder: (0, _translate2.default)({ id: 'label.zip_code' }, intl),
         name: 'Zip',
-        status: errors.Zip && 'failure' || 'idle',
-        statusText: errors.Zip && (0, _translate2.default)({ id: errors.Zip }, intl),
+        error: errors.Zip && (0, _translate2.default)({ id: errors.Zip }, intl),
         autoComplete: 'off'
       }),
       _react2.default.createElement(_Input2.default, {
         className: 'layout-item-6',
         value: data.City,
-        label: (0, _translate2.default)({
+        title: (0, _translate2.default)({
           id: 'title.city',
           defaultMessage: 'City'
         }, intl),
+        placeholder: (0, _translate2.default)({ id: 'label.city' }, intl),
         name: 'City',
-        status: errors.City && 'failure' || 'idle',
-        statusText: errors.City && (0, _translate2.default)({ id: errors.City }, intl),
+        error: errors.City && (0, _translate2.default)({ id: errors.City }, intl),
         autoComplete: 'off'
       })
     ),
     _react2.default.createElement(
       'div',
       { className: 'layout-item' },
-      _react2.default.createElement(
-        _Select2.default,
-        {
-          disabled: true,
-          className: 'layout-item-6',
-          value: countries && countries.value.find(function (c) {
-            return c.value === data.Country;
-          }) && countries.value.find(function (c) {
-            return c.value === data.Country;
-          }).value,
-          label: (0, _translate2.default)({
-            id: 'title.country',
-            defaultMessage: 'Country'
-          }, intl),
-          name: 'Country',
-          icon: _react2.default.createElement(_Icon2.default, { icon: 'flag' }) },
-        _react2.default.createElement(
-          _Select2.default.Option,
-          {
-            value: countries && countries.value.find(function (c) {
-              return c.value === data.Country;
-            }) && countries.value.find(function (c) {
-              return c.value === data.Country;
-            }).value },
-          countries && countries.value.find(function (c) {
-            return c.value === data.Country;
-          }) && countries.value.find(function (c) {
-            return c.value === data.Country;
-          }).label
-        )
-      ),
+      _react2.default.createElement(_Input2.default, {
+        disabled: true,
+        className: 'layout-item-6',
+        value: data.Country,
+        title: (0, _translate2.default)({
+          id: 'title.country',
+          defaultMessage: 'Country'
+        }, intl),
+        placeholder: (0, _translate2.default)({ id: 'label.country' }, intl),
+        name: 'Country'
+      }),
       _react2.default.createElement(_Input2.default, {
         disabled: true,
         className: 'layout-item-6',
         value: intl.formatDate(new Date(data.BirthDate)),
-        label: (0, _translate2.default)({
+        title: (0, _translate2.default)({
           id: 'title.user_birthday',
           defaultMessage: 'Birthday'
         }, intl),
+        placeholder: (0, _translate2.default)({ id: 'label.user_birthday' }, intl),
         name: 'BirthDate'
       })
     ),
     _react2.default.createElement(_Input2.default, {
       disabled: true,
       value: data.Email,
-      label: (0, _translate2.default)({
+      title: (0, _translate2.default)({
         id: 'title.email',
         defaultMessage: 'Email'
       }, intl),
+      placeholder: (0, _translate2.default)({ id: 'label.email' }, intl),
       name: 'Email'
     }),
     _react2.default.createElement(_Input2.default, {
       value: data.MobilePhoneNumber,
-      type: 'tel',
-      label: (0, _translate2.default)({
+      title: (0, _translate2.default)({
         id: 'title.mobile_number',
         defaultMessage: 'Mobile number'
       }, intl),
-      callingCodes: countries ? countries.value.sort(function (a, b) {
-        return Number(a.callingCode) - Number(b.callingCode);
-      }).map(function (i) {
-        return {
-          value: '00' + i.callingCode,
-          label: '+' + i.callingCode + ' ' + (_countryEmojiFlags2.default[i.value] || '')
-        };
-      }) : [],
+      placeholder: (0, _translate2.default)({ id: 'label.mobile_number' }, intl),
       name: 'MobilePhoneNumber',
       autoComplete: 'off',
-      status: errors.MobilePhoneNumber && 'failure' || 'idle',
-      statusText: errors.MobilePhoneNumber && (0, _translate2.default)({ id: errors.MobilePhoneNumber }, intl)
+      error: errors.MobilePhoneNumber && (0, _translate2.default)({ id: errors.MobilePhoneNumber }, intl)
     }),
     !['sga', 'dga'].includes(jurisdiction) && _react2.default.createElement(
       _react.Fragment,
@@ -209,13 +173,16 @@ var AccountDetail = function AccountDetail(_ref) {
       _react2.default.createElement(_Input2.default, {
         value: '',
         type: 'password',
-        label: (0, _translate2.default)({
+        title: (0, _translate2.default)({
           id: 'title.password',
           defaultMessage: 'Password'
         }, intl),
+        placeholder: (0, _translate2.default)({
+          id: 'label.old_password',
+          defaultMessage: 'Password'
+        }, intl),
         name: 'Password',
-        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),
         autoComplete: 'off'
       })
     ),
@@ -239,7 +206,7 @@ AccountDetail.propTypes = {
   /** The form input fields and content */
   children: _propTypes2.default.any,
   /** The above title for each field */
-  label: _propTypes2.default.string,
+  title: _propTypes2.default.string,
   /** The value inside each field */
   value: _propTypes2.default.any,
   /** The name of each field */
@@ -253,7 +220,7 @@ AccountDetail.propTypes = {
 AccountDetail.defaultProps = {
   disabled: Function,
   children: '',
-  label: '',
+  title: '',
   value: '',
   name: '',
   error: [],

package/lib/widgets/ActivateWidget/index.js

@@ -10,10 +10,6 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _compose = require('recompose/compose');
-
-var _compose2 = _interopRequireDefault(_compose);
-
 var _reactIntl = require('react-intl');
 
 var _Input = require('../../components/Input');
@@ -36,331 +32,93 @@ var _translate = require('../../lib/utils/translate');
 
 var _translate2 = _interopRequireDefault(_translate);
 
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _WithValidation = require('../../lib/WithValidation');
-
-var _WithValidation2 = _interopRequireDefault(_WithValidation);
-
-var _email = require('../../lib/WithValidation/rules/email');
-
-var _email2 = _interopRequireDefault(_email);
-
-var _required = require('../../lib/WithValidation/rules/required');
-
-var _required2 = _interopRequireDefault(_required);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
-
-var KEY_CODE = {
-  BACKSPACE: 'Backspace',
-  DELETE: 'Delete',
-  ARROW_LEFT: 'ArrowLeft',
-  ARROW_RIGHT: 'ArrowRight'
-};
-
-var ActivationCode = function ActivationCode(_ref) {
-  var _ref$length = _ref.length,
-      length = _ref$length === undefined ? 4 : _ref$length,
-      _ref$code = _ref.code,
-      code = _ref$code === undefined ? '' : _ref$code,
-      _ref$autoFocus = _ref.autoFocus,
-      autoFocus = _ref$autoFocus === undefined ? true : _ref$autoFocus,
-      onChange = _ref.onChange,
-      isLoading = _ref.isLoading,
-      name = _ref.name,
-      status = _ref.status,
-      statusText = _ref.statusText;
+var ActivateWidget = function ActivateWidget(_ref) {
+  var intl = _ref.intl,
+      defaultEmail = _ref.email,
+      defaultCode = _ref.code,
+      onSubmit = _ref.onSubmit,
+      onResend = _ref.onResend;
 
-  var boxes = new Array(length).fill('');
-
-  var _useState = (0, _react.useState)(-1),
+  var _useState = (0, _react.useState)(defaultCode),
       _useState2 = _slicedToArray(_useState, 2),
-      activeIndex = _useState2[0],
-      setActiveIndex = _useState2[1];
-
-  var inputRef = (0, _react.useRef)();
-
-  (0, _react.useEffect)(function () {
-    if (autoFocus && !code.length) {
-      inputRef.current.focus();
-      setActiveIndex(0);
-    }
-  }, [autoFocus, code]);
-
-  (0, _react.useEffect)(function () {
-    return inputRef.current.value = code;
-  }, [code]);
+      code = _useState2[0],
+      onCodeChange = _useState2[1];
 
-  var setCaretPosition = function setCaretPosition(from, to) {
-    inputRef.current.focus();
-    inputRef.current.setSelectionRange(from, to);
-  };
-
-  var handleKeyPress = function handleKeyPress(key, v) {
-    switch (key) {
-      case KEY_CODE.BACKSPACE || KEY_CODE.DELETE:
-        {
-          setActiveIndex(v.length);
-          setCaretPosition(v.length, v.length);
-          onChange(v);
-          break;
-        }
-
-      case KEY_CODE.ARROW_LEFT:
-        {
-          if (activeIndex === 0) return;
-          setActiveIndex(activeIndex - 1);
-          setCaretPosition(activeIndex - 1, activeIndex);
-          break;
-        }
-      case KEY_CODE.ARROW_RIGHT:
-        {
-          if (activeIndex === 3) return;
-          setActiveIndex(activeIndex + 1);
-          setCaretPosition(activeIndex + 1, activeIndex + 2);
-          break;
-        }
-
-      default:
-        {
-          setActiveIndex(v.length);
-          setCaretPosition(v.length, v.length + 1);
-          onChange(v);
-        }
-    }
-  };
-
-  var handleFocus = function handleFocus(i) {
-    setCaretPosition(i, i + 1);
-    setActiveIndex(i);
-  };
-
-  var handleBlur = function handleBlur() {
-    setActiveIndex(-1);
-  };
-
-  return _react2.default.createElement(
-    'div',
-    {
-      className: (0, _classnames2.default)('ActivationCode', {
-        'tg-input__status-failure': status === 'failure'
-      }) },
-    _react2.default.createElement(
-      'div',
-      { className: 'ActivationCode__wrapper' },
-      _react2.default.createElement(
-        'div',
-        { className: 'ActivationCode__label' },
-        _react2.default.createElement(_Translate2.default, {
-          id: 'label.activation_code',
-          defaultMessage: 'Activation code'
-        })
-      ),
-      _react2.default.createElement(
-        'div',
-        { className: 'ActivationCode__boxes' },
-        _react2.default.createElement('input', {
-          className: 'ActivationCode__input',
-          type: 'text',
-          autoComplete: 'one-time-code',
-          inputMode: 'decimal',
-          name: name,
-          ref: inputRef,
-          maxLength: length,
-          onKeyUp: function onKeyUp(_ref2) {
-            var key = _ref2.key,
-                target = _ref2.target;
-            return handleKeyPress(key, target.value);
-          },
-          onBlur: handleBlur
-        }),
-        boxes.map(function (_, i) {
-          return _react2.default.createElement(
-            'div',
-            {
-              className: (0, _classnames2.default)('ActivationCode__box', {
-                'ActivationCode__box--focused': !isLoading && i === activeIndex,
-                'ActivationCode__box--error': status === 'failure',
-                'ActivationCode__box--empty': i === activeIndex && !code[i]
-              }),
-              key: i,
-              onClick: function onClick() {
-                return handleFocus(i);
-              } },
-            code[i]
-          );
-        })
-      )
-    ),
-    _react2.default.createElement(
-      'div',
-      { className: 'tg-input__status-text' },
-      statusText
-    )
-  );
-};
-
-var ActivateWidget = function ActivateWidget(_ref3) {
-  var intl = _ref3.intl,
-      _ref3$email = _ref3.email,
-      pEmail = _ref3$email === undefined ? '' : _ref3$email,
-      _ref3$code = _ref3.code,
-      pCode = _ref3$code === undefined ? '' : _ref3$code,
-      onSubmit = _ref3.onSubmit,
-      onResend = _ref3.onResend,
-      errors = _ref3.errors;
-
-  var _useState3 = (0, _react.useState)(pCode),
+  var _useState3 = (0, _react.useState)(defaultEmail),
       _useState4 = _slicedToArray(_useState3, 2),
-      code = _useState4[0],
-      setCode = _useState4[1];
+      email = _useState4[0],
+      onEmailChange = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(pEmail),
+  var _useState5 = (0, _react.useState)(false),
       _useState6 = _slicedToArray(_useState5, 2),
-      email = _useState6[0],
-      setEmail = _useState6[1];
+      isLoading = _useState6[0],
+      setIsLoading = _useState6[1];
 
   var _useState7 = (0, _react.useState)(false),
       _useState8 = _slicedToArray(_useState7, 2),
-      isLoading = _useState8[0],
-      setIsLoading = _useState8[1];
-
-  var pattern = new RegExp('^[0-9]{4}$');
-
-  (0, _react.useEffect)(function () {
-    if (email && pattern.test(code)) handleSubmit();
-  }, [code, email]);
-
-  var handleResend = function () {
-    var _ref4 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      return regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              setIsLoading(true);
-              _context.prev = 1;
-              _context.next = 4;
-              return onResend(email);
-
-            case 4:
-              setIsLoading(false);
-              _context.next = 9;
-              break;
-
-            case 7:
-              _context.prev = 7;
-              _context.t0 = _context['catch'](1);
-
-            case 9:
-            case 'end':
-              return _context.stop();
-          }
-        }
-      }, _callee, undefined, [[1, 7]]);
-    }));
-
-    return function handleResend() {
-      return _ref4.apply(this, arguments);
-    };
-  }();
-
-  var handleSubmit = function () {
-    var _ref5 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-      return regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              setIsLoading(true);
-              _context2.prev = 1;
-              _context2.next = 4;
-              return onSubmit(email, code);
-
-            case 4:
-              setCode('');
-              setIsLoading(false);
-              _context2.next = 10;
-              break;
-
-            case 8:
-              _context2.prev = 8;
-              _context2.t0 = _context2['catch'](1);
-
-            case 10:
-            case 'end':
-              return _context2.stop();
-          }
-        }
-      }, _callee2, undefined, [[1, 8]]);
-    }));
+      isResetLoading = _useState8[0],
+      setIsResetLoading = _useState8[1];
+
+  var _onResend = function _onResend(e) {
+    e.preventDefault();
+    setIsResetLoading(true);
+    onResend({
+      Email: email,
+      callback: function callback() {
+        return setIsResetLoading(false);
+      }
+    });
+  };
 
-    return function handleSubmit() {
-      return _ref5.apply(this, arguments);
-    };
-  }();
+  var _onSubmit = function _onSubmit(e) {
+    e.preventDefault();
+    setIsLoading(true);
+    onSubmit({
+      Email: email,
+      Code: code,
+      callback: function callback() {
+        return setIsLoading(false);
+      }
+    });
+  };
 
   return _react2.default.createElement(
     'div',
     { className: 'ActivateWidget' },
     _react2.default.createElement(
-      'div',
-      { className: 'ActivateWidget__message' },
-      _react2.default.createElement(_Translate2.default, {
-        id: 'label.activation_code_received',
-        defaultMessage: 'An activation code has been sent to your email address and your phone number'
-      })
-    ),
-    _react2.default.createElement(
-      'div',
-      { className: 'form' },
-      !pEmail && _react2.default.createElement(_Input2.default, {
-        autoFocus: true,
-        label: (0, _translate2.default)({ id: 'label.email', defaultMessage: 'Email' }, intl),
-        value: email || '',
+      'form',
+      { onSubmit: _onSubmit },
+      _react2.default.createElement(_Input2.default, {
+        title: (0, _translate2.default)({ id: 'label.email' }, intl),
+        value: email,
         onChange: function onChange(e) {
-          return setEmail(e.target.value);
+          return onEmailChange(e.target.value);
         },
-        name: 'Email',
-        status: errors.Email ? 'failure' : 'idle',
-        statusText: errors.Email && (0, _translate2.default)({ id: errors.Email }, intl)
+        name: 'Email'
       }),
-      _react2.default.createElement(ActivationCode, {
-        onChange: setCode,
-        code: code,
-        autoFocus: Boolean(pEmail),
-        isLoading: isLoading,
-        name: 'ActivationCode',
-        status: errors.ActivationCode ? 'failure' : 'idle',
-        statusText: errors.ActivationCode && (0, _translate2.default)({ id: errors.ActivationCode }, intl)
+      _react2.default.createElement(_Input2.default, {
+        title: (0, _translate2.default)({ id: 'label.activation_code' }, intl),
+        value: code,
+        onChange: function onChange(e) {
+          return onCodeChange(e.target.value);
+        },
+        name: 'Code',
+        autoComplete: 'one-time-code'
       }),
       _react2.default.createElement(
         _Button2.default,
-        {
-          isLoading: isLoading,
-          className: 'button primary wide',
-          onClick: handleSubmit },
+        { isLoading: isLoading, className: 'button primary wide' },
         _react2.default.createElement(_Translate2.default, { id: 'action.activate', defaultMessage: 'Activate' })
       )
     ),
-    _react2.default.createElement('hr', { className: 'hr--1' }),
-    _react2.default.createElement(
-      'div',
-      { className: 'ActivateWidget__resend' },
-      _react2.default.createElement(_Translate2.default, {
-        id: 'action.send_new_code',
-        defaultMessage: 'Didn\'t get code?'
-      })
-    ),
     _react2.default.createElement(
       _Button2.default,
       {
-        isLoading: isLoading,
+        isLoading: isResetLoading,
         className: 'button tertiary wide',
-        onClick: handleResend },
+        onClick: _onResend },
       _react2.default.createElement(_Translate2.default, {
         id: 'action.resend_activation_code',
         defaultMessage: 'Resend activation code'
@@ -385,9 +143,4 @@ ActivateWidget.defaultProps = {
   onResend: Function
 };
 
-var rules = {
-  Email: [[_required2.default, 'error.empty.email'], [_email2.default, 'error.condition.email']],
-  ActivationCode: [[_required2.default, 'error.empty.activation_code']]
-};
-
-exports.default = (0, _compose2.default)((0, _WithValidation2.default)(rules), _reactIntl.injectIntl)(ActivateWidget);
+exports.default = (0, _reactIntl.injectIntl)(ActivateWidget);