tg-core-components 5.4.3-bethard-account-changes.0 → 5.5.0-master

package/es/widgets/AccountDetail/index.js

@@ -5,11 +5,8 @@ import { injectIntl } from 'react-intl';
 import require from '../../lib/WithValidation/rules/required';
 import WithValidation from '../../lib/WithValidation';
 import Input from '../../components/Input';
-import Select from '../../components/Select';
 import translate from '../../lib/utils/translate';
 import Button from '../../components/Button';
-import countryEmojiFlags from '../../misc/countryEmojiFlags';
-import Icon from '../../components/Icon';
 
 var AccountDetail = function AccountDetail(_ref) {
   var data = _ref.data,
@@ -17,7 +14,6 @@ var AccountDetail = function AccountDetail(_ref) {
       errors = _ref.errors,
       onSubmit = _ref.onSubmit,
       jurisdiction = _ref.jurisdiction,
-      countries = _ref.countries,
       isLoading = _ref.isLoading;
 
   return React.createElement(
@@ -30,136 +26,113 @@ var AccountDetail = function AccountDetail(_ref) {
         disabled: true,
         className: 'layout-item-6',
         value: data.FirstName,
-        label: translate({
+        title: translate({
           id: 'title.first_name',
           defaultMessage: 'First name'
         }, intl),
+        placeholder: translate({ id: 'label.first_name' }, intl),
         name: 'FirstName',
-        status: errors.FirstName && 'failure' || 'idle',
-        statusText: errors.FirstName && translate({ id: errors.FirstName }, intl)
+        error: errors.FirstName && translate({ id: errors.FirstName }, intl)
       }),
       React.createElement(Input, {
         disabled: true,
         className: 'layout-item-6',
         value: data.LastName,
-        label: translate({
+        title: translate({
           id: 'title.last_name',
           defaultMessage: 'Last name'
         }, intl),
+        placeholder: translate({ id: 'label.last_name' }, intl),
         name: 'LastName',
-        status: errors.LastName && 'failure' || 'idle',
-        statusText: errors.LastName && translate({ id: errors.LastName }, intl)
+        error: errors.LastName && translate({ id: errors.LastName }, intl)
+      })
+    ),
+    React.createElement(
+      'div',
+      { className: 'layout-item' },
+      React.createElement(Input, {
+        title: translate({
+          id: 'title.address',
+          defaultMessage: 'Address'
+        }, intl),
+        placeholder: translate({ id: 'label.address' }, intl),
+        name: 'Address1',
+        value: data.Address1,
+        error: errors.Address1 && translate({ id: errors.Address1 }, intl),
+        autoComplete: 'off'
       })
     ),
-    React.createElement(Input, {
-      label: translate({
-        id: 'title.address',
-        defaultMessage: 'Address'
-      }, intl),
-      name: 'Address1',
-      value: data.Address1,
-      status: errors.Address1 && 'failure' || 'idle',
-      statusText: errors.Address1 && translate({ id: 'errors.Address1' }, intl),
-      autoComplete: 'off'
-    }),
     React.createElement(
       'div',
       { className: 'layout-item' },
       React.createElement(Input, {
         className: 'layout-item-6',
         value: data.Zip,
-        label: translate({ id: 'title.zip', defaultMessage: 'Zip' }, intl),
+        title: translate({ id: 'title.zip', defaultMessage: 'Zip' }, intl),
+        placeholder: translate({ id: 'label.zip_code' }, intl),
         name: 'Zip',
-        status: errors.Zip && 'failure' || 'idle',
-        statusText: errors.Zip && translate({ id: errors.Zip }, intl),
+        error: errors.Zip && translate({ id: errors.Zip }, intl),
         autoComplete: 'off'
       }),
       React.createElement(Input, {
         className: 'layout-item-6',
         value: data.City,
-        label: translate({
+        title: translate({
           id: 'title.city',
           defaultMessage: 'City'
         }, intl),
+        placeholder: translate({ id: 'label.city' }, intl),
         name: 'City',
-        status: errors.City && 'failure' || 'idle',
-        statusText: errors.City && translate({ id: errors.City }, intl),
+        error: errors.City && translate({ id: errors.City }, intl),
         autoComplete: 'off'
       })
     ),
     React.createElement(
       'div',
       { className: 'layout-item' },
-      React.createElement(
-        Select,
-        {
-          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: translate({
-            id: 'title.country',
-            defaultMessage: 'Country'
-          }, intl),
-          name: 'Country',
-          icon: React.createElement(Icon, { icon: 'flag' }) },
-        React.createElement(
-          Select.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
-        )
-      ),
+      React.createElement(Input, {
+        disabled: true,
+        className: 'layout-item-6',
+        value: data.Country,
+        title: translate({
+          id: 'title.country',
+          defaultMessage: 'Country'
+        }, intl),
+        placeholder: translate({ id: 'label.country' }, intl),
+        name: 'Country'
+      }),
       React.createElement(Input, {
         disabled: true,
         className: 'layout-item-6',
         value: intl.formatDate(new Date(data.BirthDate)),
-        label: translate({
+        title: translate({
           id: 'title.user_birthday',
           defaultMessage: 'Birthday'
         }, intl),
+        placeholder: translate({ id: 'label.user_birthday' }, intl),
         name: 'BirthDate'
       })
     ),
     React.createElement(Input, {
       disabled: true,
       value: data.Email,
-      label: translate({
+      title: translate({
         id: 'title.email',
         defaultMessage: 'Email'
       }, intl),
+      placeholder: translate({ id: 'label.email' }, intl),
       name: 'Email'
     }),
     React.createElement(Input, {
       value: data.MobilePhoneNumber,
-      type: 'tel',
-      label: translate({
+      title: translate({
         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 + ' ' + (countryEmojiFlags[i.value] || '')
-        };
-      }) : [],
+      placeholder: translate({ id: 'label.mobile_number' }, intl),
       name: 'MobilePhoneNumber',
       autoComplete: 'off',
-      status: errors.MobilePhoneNumber && 'failure' || 'idle',
-      statusText: errors.MobilePhoneNumber && translate({ id: errors.MobilePhoneNumber }, intl)
+      error: errors.MobilePhoneNumber && translate({ id: errors.MobilePhoneNumber }, intl)
     }),
     !['sga', 'dga'].includes(jurisdiction) && React.createElement(
       Fragment,
@@ -168,13 +141,16 @@ var AccountDetail = function AccountDetail(_ref) {
       React.createElement(Input, {
         value: '',
         type: 'password',
-        label: translate({
+        title: translate({
           id: 'title.password',
           defaultMessage: 'Password'
         }, intl),
+        placeholder: translate({
+          id: 'label.old_password',
+          defaultMessage: 'Password'
+        }, intl),
         name: 'Password',
-        status: errors.Password && 'failure' || 'idle',
-        statusText: errors.Password && translate({ id: errors.Password }, intl),
+        error: errors.Password && translate({ id: errors.Password }, intl),
         autoComplete: 'off'
       })
     ),
@@ -198,7 +174,7 @@ AccountDetail.propTypes = {
   /** The form input fields and content */
   children: PropTypes.any,
   /** The above title for each field */
-  label: PropTypes.string,
+  title: PropTypes.string,
   /** The value inside each field */
   value: PropTypes.any,
   /** The name of each field */
@@ -212,7 +188,7 @@ AccountDetail.propTypes = {
 AccountDetail.defaultProps = {
   disabled: Function,
   children: '',
-  label: '',
+  title: '',
   value: '',
   name: '',
   error: [],

package/es/widgets/ActivateWidget/index.js

@@ -1,327 +1,98 @@
-var _this = this;
-
 var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
-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"); }); }; }
-
-import React, { useState, useEffect, useRef } from 'react';
-import compose from 'recompose/compose';
+import React, { useState } from 'react';
 import { injectIntl } from 'react-intl';
 import Input from '../../components/Input';
 import Button from '../../components/Button';
 import Translate from '../../components/Translate';
 import PropTypes from 'prop-types';
 import translate from '../../lib/utils/translate';
-import cn from 'classnames';
-import withValidation from '../../lib/WithValidation';
-import email from '../../lib/WithValidation/rules/email';
-import require from '../../lib/WithValidation/rules/required';
-
-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 = useState(-1),
+  var _useState = useState(defaultCode),
       _useState2 = _slicedToArray(_useState, 2),
-      activeIndex = _useState2[0],
-      setActiveIndex = _useState2[1];
-
-  var inputRef = useRef();
-
-  useEffect(function () {
-    if (autoFocus && !code.length) {
-      inputRef.current.focus();
-      setActiveIndex(0);
-    }
-  }, [autoFocus, code]);
-
-  useEffect(function () {
-    return inputRef.current.value = code;
-  }, [code]);
-
-  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 React.createElement(
-    'div',
-    {
-      className: cn('ActivationCode', {
-        'tg-input__status-failure': status === 'failure'
-      }) },
-    React.createElement(
-      'div',
-      { className: 'ActivationCode__wrapper' },
-      React.createElement(
-        'div',
-        { className: 'ActivationCode__label' },
-        React.createElement(Translate, {
-          id: 'label.activation_code',
-          defaultMessage: 'Activation code'
-        })
-      ),
-      React.createElement(
-        'div',
-        { className: 'ActivationCode__boxes' },
-        React.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 React.createElement(
-            'div',
-            {
-              className: cn('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]
-          );
-        })
-      )
-    ),
-    React.createElement(
-      'div',
-      { className: 'tg-input__status-text' },
-      statusText
-    )
-  );
-};
+      code = _useState2[0],
+      onCodeChange = _useState2[1];
 
-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 = useState(pCode),
+  var _useState3 = useState(defaultEmail),
       _useState4 = _slicedToArray(_useState3, 2),
-      code = _useState4[0],
-      setCode = _useState4[1];
+      email = _useState4[0],
+      onEmailChange = _useState4[1];
 
-  var _useState5 = useState(pEmail),
+  var _useState5 = useState(false),
       _useState6 = _slicedToArray(_useState5, 2),
-      email = _useState6[0],
-      setEmail = _useState6[1];
+      isLoading = _useState6[0],
+      setIsLoading = _useState6[1];
 
   var _useState7 = useState(false),
       _useState8 = _slicedToArray(_useState7, 2),
-      isLoading = _useState8[0],
-      setIsLoading = _useState8[1];
-
-  var pattern = new RegExp('^[0-9]{4}$');
-
-  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, _this, [[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, _this, [[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 React.createElement(
     'div',
     { className: 'ActivateWidget' },
     React.createElement(
-      'div',
-      { className: 'ActivateWidget__message' },
-      React.createElement(Translate, {
-        id: 'label.activation_code_received',
-        defaultMessage: 'An activation code has been sent to your email address and your phone number'
-      })
-    ),
-    React.createElement(
-      'div',
-      { className: 'form' },
-      !pEmail && React.createElement(Input, {
-        autoFocus: true,
-        label: translate({ id: 'label.email', defaultMessage: 'Email' }, intl),
-        value: email || '',
+      'form',
+      { onSubmit: _onSubmit },
+      React.createElement(Input, {
+        title: translate({ 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 && translate({ id: errors.Email }, intl)
+        name: 'Email'
       }),
-      React.createElement(ActivationCode, {
-        onChange: setCode,
-        code: code,
-        autoFocus: Boolean(pEmail),
-        isLoading: isLoading,
-        name: 'ActivationCode',
-        status: errors.ActivationCode ? 'failure' : 'idle',
-        statusText: errors.ActivationCode && translate({ id: errors.ActivationCode }, intl)
+      React.createElement(Input, {
+        title: translate({ id: 'label.activation_code' }, intl),
+        value: code,
+        onChange: function onChange(e) {
+          return onCodeChange(e.target.value);
+        },
+        name: 'Code',
+        autoComplete: 'one-time-code'
       }),
       React.createElement(
         Button,
-        {
-          isLoading: isLoading,
-          className: 'button primary wide',
-          onClick: handleSubmit },
+        { isLoading: isLoading, className: 'button primary wide' },
         React.createElement(Translate, { id: 'action.activate', defaultMessage: 'Activate' })
       )
     ),
-    React.createElement('hr', { className: 'hr--1' }),
-    React.createElement(
-      'div',
-      { className: 'ActivateWidget__resend' },
-      React.createElement(Translate, {
-        id: 'action.send_new_code',
-        defaultMessage: 'Didn\'t get code?'
-      })
-    ),
     React.createElement(
       Button,
       {
-        isLoading: isLoading,
+        isLoading: isResetLoading,
         className: 'button tertiary wide',
-        onClick: handleResend },
+        onClick: _onResend },
       React.createElement(Translate, {
         id: 'action.resend_activation_code',
         defaultMessage: 'Resend activation code'
@@ -346,9 +117,4 @@ ActivateWidget.defaultProps = {
   onResend: Function
 };
 
-var rules = {
-  Email: [[require, 'error.empty.email'], [email, 'error.condition.email']],
-  ActivationCode: [[require, 'error.empty.activation_code']]
-};
-
-export default compose(withValidation(rules), injectIntl)(ActivateWidget);
+export default injectIntl(ActivateWidget);