tg-core-components 6.2.0-crypto.0 → 6.2.0-crypto.1

package/es/widgets/AccountDetail/index.js

@@ -11,6 +11,32 @@ import Button from '../../components/Button';
 import countryEmojiFlags from '../../misc/countryEmojiFlags';
 import Icon from '../../components/Icon';
 
+var genders = [{
+  label: function label(intl) {
+    return translate({
+      id: 'noun.male',
+      defaultMessage: 'Male'
+    }, intl);
+  },
+  value: 'Male'
+}, {
+  label: function label(intl) {
+    return translate({
+      id: 'noun.female',
+      defaultMessage: 'Female'
+    }, intl);
+  },
+  value: 'Female'
+}, {
+  label: function label(intl) {
+    return translate({
+      id: 'noun.other',
+      defaultMessage: 'Other'
+    }, intl);
+  },
+  value: 'Other'
+}];
+
 var AccountDetail = function AccountDetail(_ref) {
   var data = _ref.data,
       intl = _ref.intl,
@@ -18,7 +44,8 @@ var AccountDetail = function AccountDetail(_ref) {
       onSubmit = _ref.onSubmit,
       jurisdiction = _ref.jurisdiction,
       countries = _ref.countries,
-      isLoading = _ref.isLoading;
+      isLoading = _ref.isLoading,
+      isComplete = _ref.isComplete;
 
   return React.createElement(
     'form',
@@ -93,33 +120,24 @@ var AccountDetail = function AccountDetail(_ref) {
       React.createElement(
         Select,
         {
-          disabled: true,
+          disabled: isComplete,
           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,
+          value: data.Country,
           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
-        )
+        countries.sort(function (a, b) {
+          return a.label.localeCompare(b.label);
+        }).map(function (c) {
+          return React.createElement(
+            Select.Option,
+            { key: c.value, value: c.value },
+            c.label
+          );
+        })
       ),
       React.createElement(Input, {
         disabled: true,
@@ -132,15 +150,6 @@ var AccountDetail = function AccountDetail(_ref) {
         name: 'BirthDate'
       })
     ),
-    React.createElement(Input, {
-      disabled: true,
-      value: data.Email,
-      label: translate({
-        id: 'title.email',
-        defaultMessage: 'Email'
-      }, intl),
-      name: 'Email'
-    }),
     React.createElement(Input, {
       value: data.MobilePhoneNumber,
       type: 'tel',
@@ -153,6 +162,48 @@ var AccountDetail = function AccountDetail(_ref) {
       status: errors.MobilePhoneNumber && 'failure' || 'idle',
       statusText: errors.MobilePhoneNumber && translate({ id: errors.MobilePhoneNumber }, intl)
     }),
+    React.createElement(
+      'div',
+      { className: 'layout-item' },
+      React.createElement(Input, {
+        className: 'layout-item-6',
+        disabled: true,
+        value: data.Email,
+        label: translate({
+          id: 'title.email',
+          defaultMessage: 'Email'
+        }, intl),
+        name: 'Email'
+      }),
+      React.createElement(
+        Select,
+        {
+          className: 'layout-item-6',
+          value: data.Gender,
+          label: translate({
+            id: 'title.gender',
+            defaultMessage: 'Gender'
+          }, intl),
+          name: 'Gender',
+          status: errors.Gender && 'failure' || 'idle',
+          statusText: errors.Gender && translate({ id: errors.Gender }, intl) },
+        React.createElement(
+          Select.Option,
+          { value: '', disabled: true },
+          translate({
+            id: 'label.select-gender',
+            defaultMessage: 'Select gender'
+          }, intl)
+        ),
+        genders.map(function (gender) {
+          return React.createElement(
+            Select.Option,
+            { value: gender.value },
+            gender.label(intl)
+          );
+        })
+      )
+    ),
     !['sga', 'dga'].includes(jurisdiction) && React.createElement(
       Fragment,
       null,
@@ -167,7 +218,7 @@ var AccountDetail = function AccountDetail(_ref) {
         name: 'Password',
         status: errors.Password && 'failure' || 'idle',
         statusText: errors.Password && translate({ id: errors.Password }, intl),
-        autoComplete: 'off'
+        autocomplete: 'new-password'
       })
     ),
     React.createElement(
@@ -198,7 +249,9 @@ AccountDetail.propTypes = {
   /** Array of validation errors where the error display depends on which invalid rule it breaks */
   error: PropTypes.array,
   /** The submission function firing when submitting the form */
-  onSubmit: PropTypes.func
+  onSubmit: PropTypes.func,
+  /** If the user profile is complete or not */
+  isComplete: PropTypes.bool
 };
 
 AccountDetail.defaultProps = {
@@ -208,7 +261,8 @@ AccountDetail.defaultProps = {
   value: '',
   name: '',
   error: [],
-  onSubmit: Function
+  onSubmit: Function,
+  isComplete: false
 };
 
 var rules = {
@@ -216,7 +270,9 @@ var rules = {
   Address1: [[require, 'error.empty.address']],
   Zip: [[require, 'error.empty.zip_code']],
   City: [[require, 'error.empty.city']],
-  Password: [[require, 'error.empty.password']]
+  Password: [[require, 'error.empty.password']],
+  Country: [[require, 'error.empty.country']],
+  Gender: [[require, 'error.empty.gender']]
 };
 
 export default compose(WithValidation(rules), injectIntl)(AccountDetail);

package/lib/widgets/AccountDetail/index.js

@@ -52,6 +52,32 @@ var _Icon2 = _interopRequireDefault(_Icon);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var genders = [{
+  label: function label(intl) {
+    return (0, _translate2.default)({
+      id: 'noun.male',
+      defaultMessage: 'Male'
+    }, intl);
+  },
+  value: 'Male'
+}, {
+  label: function label(intl) {
+    return (0, _translate2.default)({
+      id: 'noun.female',
+      defaultMessage: 'Female'
+    }, intl);
+  },
+  value: 'Female'
+}, {
+  label: function label(intl) {
+    return (0, _translate2.default)({
+      id: 'noun.other',
+      defaultMessage: 'Other'
+    }, intl);
+  },
+  value: 'Other'
+}];
+
 var AccountDetail = function AccountDetail(_ref) {
   var data = _ref.data,
       intl = _ref.intl,
@@ -59,7 +85,8 @@ var AccountDetail = function AccountDetail(_ref) {
       onSubmit = _ref.onSubmit,
       jurisdiction = _ref.jurisdiction,
       countries = _ref.countries,
-      isLoading = _ref.isLoading;
+      isLoading = _ref.isLoading,
+      isComplete = _ref.isComplete;
 
   return _react2.default.createElement(
     'form',
@@ -134,33 +161,24 @@ var AccountDetail = function AccountDetail(_ref) {
       _react2.default.createElement(
         _Select2.default,
         {
-          disabled: true,
+          disabled: isComplete,
           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,
+          value: data.Country,
           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
-        )
+        countries.sort(function (a, b) {
+          return a.label.localeCompare(b.label);
+        }).map(function (c) {
+          return _react2.default.createElement(
+            _Select2.default.Option,
+            { key: c.value, value: c.value },
+            c.label
+          );
+        })
       ),
       _react2.default.createElement(_Input2.default, {
         disabled: true,
@@ -173,15 +191,6 @@ var AccountDetail = function AccountDetail(_ref) {
         name: 'BirthDate'
       })
     ),
-    _react2.default.createElement(_Input2.default, {
-      disabled: true,
-      value: data.Email,
-      label: (0, _translate2.default)({
-        id: 'title.email',
-        defaultMessage: 'Email'
-      }, intl),
-      name: 'Email'
-    }),
     _react2.default.createElement(_Input2.default, {
       value: data.MobilePhoneNumber,
       type: 'tel',
@@ -194,6 +203,48 @@ var AccountDetail = function AccountDetail(_ref) {
       status: errors.MobilePhoneNumber && 'failure' || 'idle',
       statusText: errors.MobilePhoneNumber && (0, _translate2.default)({ id: errors.MobilePhoneNumber }, intl)
     }),
+    _react2.default.createElement(
+      'div',
+      { className: 'layout-item' },
+      _react2.default.createElement(_Input2.default, {
+        className: 'layout-item-6',
+        disabled: true,
+        value: data.Email,
+        label: (0, _translate2.default)({
+          id: 'title.email',
+          defaultMessage: 'Email'
+        }, intl),
+        name: 'Email'
+      }),
+      _react2.default.createElement(
+        _Select2.default,
+        {
+          className: 'layout-item-6',
+          value: data.Gender,
+          label: (0, _translate2.default)({
+            id: 'title.gender',
+            defaultMessage: 'Gender'
+          }, intl),
+          name: 'Gender',
+          status: errors.Gender && 'failure' || 'idle',
+          statusText: errors.Gender && (0, _translate2.default)({ id: errors.Gender }, intl) },
+        _react2.default.createElement(
+          _Select2.default.Option,
+          { value: '', disabled: true },
+          (0, _translate2.default)({
+            id: 'label.select-gender',
+            defaultMessage: 'Select gender'
+          }, intl)
+        ),
+        genders.map(function (gender) {
+          return _react2.default.createElement(
+            _Select2.default.Option,
+            { value: gender.value },
+            gender.label(intl)
+          );
+        })
+      )
+    ),
     !['sga', 'dga'].includes(jurisdiction) && _react2.default.createElement(
       _react.Fragment,
       null,
@@ -208,7 +259,7 @@ var AccountDetail = function AccountDetail(_ref) {
         name: 'Password',
         status: errors.Password && 'failure' || 'idle',
         statusText: errors.Password && (0, _translate2.default)({ id: errors.Password }, intl),
-        autoComplete: 'off'
+        autocomplete: 'new-password'
       })
     ),
     _react2.default.createElement(
@@ -239,7 +290,9 @@ AccountDetail.propTypes = {
   /** Array of validation errors where the error display depends on which invalid rule it breaks */
   error: _propTypes2.default.array,
   /** The submission function firing when submitting the form */
-  onSubmit: _propTypes2.default.func
+  onSubmit: _propTypes2.default.func,
+  /** If the user profile is complete or not */
+  isComplete: _propTypes2.default.bool
 };
 
 AccountDetail.defaultProps = {
@@ -249,7 +302,8 @@ AccountDetail.defaultProps = {
   value: '',
   name: '',
   error: [],
-  onSubmit: Function
+  onSubmit: Function,
+  isComplete: false
 };
 
 var rules = {
@@ -257,7 +311,9 @@ var rules = {
   Address1: [[_required2.default, 'error.empty.address']],
   Zip: [[_required2.default, 'error.empty.zip_code']],
   City: [[_required2.default, 'error.empty.city']],
-  Password: [[_required2.default, 'error.empty.password']]
+  Password: [[_required2.default, 'error.empty.password']],
+  Country: [[_required2.default, 'error.empty.country']],
+  Gender: [[_required2.default, 'error.empty.gender']]
 };
 
 exports.default = (0, _compose2.default)((0, _WithValidation2.default)(rules), _reactIntl.injectIntl)(AccountDetail);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tg-core-components",
-  "version": "6.2.0-crypto.0",
+  "version": "6.2.0-crypto.1",
   "description": "tg-core-components",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -76,5 +76,5 @@
     "webpack": "^3.0.0",
     "webpack-blocks": "^1.0.0"
   },
-  "gitHead": "ad98ef522b75ea7391e84e7d34e66b967870ed8e"
+  "gitHead": "726081c8015f50a46ad63c86ca9b4e0ac32a0864"
 }