tg-core-components 6.2.0-crypto.0 → 6.2.0-edit-profile.0

package/es/lib/WithValidation/rules/blacklistedCharacters.js

@@ -0,0 +1,3 @@
+export default (function (value) {
+  return !value.match(/[\+\=?!@%&<>\[\]{}()<>|$€£#\/\\]/);
+});

package/es/lib/WithValidation/rules/noSpecialCharacters.js

@@ -0,0 +1,3 @@
+export default (function (value) {
+  return !value.match(/[\s!"#\$%&'\(\)\*\+,\-\.\/:;<>\?@\[\\\]\^_`{|}~]/);
+});

package/es/lib/WithValidation/rules/phone.js

@@ -1,3 +1,3 @@
-export default (function (phone) {
-  return phone ? /^[\+]?[0-9]{0,4}[0-9]{8,12}$/.test(phone) : true;
+export default (function (value) {
+  return value.match(/^\+?\d{9,17}$/);
 });

package/es/widgets/AccountDetail/index.js

@@ -3,6 +3,10 @@ import compose from 'recompose/compose';
 import PropTypes from 'prop-types';
 import { injectIntl } from 'react-intl';
 import require from '../../lib/WithValidation/rules/required';
+import phone from '../../lib/WithValidation/rules/phone';
+import blacklistedCharacters from '../../lib/WithValidation/rules/blacklistedCharacters';
+import noSpecialCharacters from '../../lib/WithValidation/rules/noSpecialCharacters';
+import stringWithoutNumbers from '../../lib/WithValidation/rules/stringWithoutNumbers';
 import WithValidation from '../../lib/WithValidation';
 import Input from '../../components/Input';
 import Select from '../../components/Select';
@@ -11,6 +15,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 +48,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 +124,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 +154,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',
@@ -148,11 +161,61 @@ var AccountDetail = function AccountDetail(_ref) {
         id: 'title.mobile_number',
         defaultMessage: 'Mobile number'
       }, intl),
+      callingCodes: !data.MobilePhoneNumber && countries ? countries.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] || '')
+        };
+      }) : [],
       name: 'MobilePhoneNumber',
       autoComplete: 'off',
       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 +230,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 +261,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,15 +273,18 @@ AccountDetail.defaultProps = {
   value: '',
   name: '',
   error: [],
-  onSubmit: Function
+  onSubmit: Function,
+  isComplete: false
 };
 
 var rules = {
-  MobilePhoneNumber: [[require, 'error.empty.mobilePhoneNumber']],
-  Address1: [[require, 'error.empty.address']],
-  Zip: [[require, 'error.empty.zip_code']],
-  City: [[require, 'error.empty.city']],
-  Password: [[require, 'error.empty.password']]
+  MobilePhoneNumber: [[require, 'error.empty.mobilePhoneNumber'], [phone, 'error.condition.phone']],
+  Address1: [[require, 'error.empty.address'], [blacklistedCharacters, 'error.format.address']],
+  Zip: [[require, 'error.empty.zip_code'], [noSpecialCharacters, 'error.format.zip']],
+  City: [[require, 'error.empty.city'], [stringWithoutNumbers, 'error.invalid.city'], [blacklistedCharacters, 'error.invalid.city']],
+  Password: [[require, 'error.empty.password']],
+  Country: [[require, 'error.empty.country']],
+  Gender: [[require, 'error.empty.gender']]
 };
 
 export default compose(WithValidation(rules), injectIntl)(AccountDetail);

package/lib/lib/WithValidation/rules/blacklistedCharacters.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = function (value) {
+  return !value.match(/[\+\=?!@%&<>\[\]{}()<>|$€£#\/\\]/);
+};

package/lib/lib/WithValidation/rules/noSpecialCharacters.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = function (value) {
+  return !value.match(/[\s!"#\$%&'\(\)\*\+,\-\.\/:;<>\?@\[\\\]\^_`{|}~]/);
+};

package/lib/lib/WithValidation/rules/phone.js

@@ -4,6 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.default = function (phone) {
-  return phone ? /^[\+]?[0-9]{0,4}[0-9]{8,12}$/.test(phone) : true;
+exports.default = function (value) {
+  return value.match(/^\+?\d{9,17}$/);
 };

package/lib/widgets/AccountDetail/index.js

@@ -22,6 +22,22 @@ var _required = require('../../lib/WithValidation/rules/required');
 
 var _required2 = _interopRequireDefault(_required);
 
+var _phone = require('../../lib/WithValidation/rules/phone');
+
+var _phone2 = _interopRequireDefault(_phone);
+
+var _blacklistedCharacters = require('../../lib/WithValidation/rules/blacklistedCharacters');
+
+var _blacklistedCharacters2 = _interopRequireDefault(_blacklistedCharacters);
+
+var _noSpecialCharacters = require('../../lib/WithValidation/rules/noSpecialCharacters');
+
+var _noSpecialCharacters2 = _interopRequireDefault(_noSpecialCharacters);
+
+var _stringWithoutNumbers = require('../../lib/WithValidation/rules/stringWithoutNumbers');
+
+var _stringWithoutNumbers2 = _interopRequireDefault(_stringWithoutNumbers);
+
 var _WithValidation = require('../../lib/WithValidation');
 
 var _WithValidation2 = _interopRequireDefault(_WithValidation);
@@ -52,6 +68,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 +101,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 +177,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 +207,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',
@@ -189,11 +214,61 @@ var AccountDetail = function AccountDetail(_ref) {
         id: 'title.mobile_number',
         defaultMessage: 'Mobile number'
       }, intl),
+      callingCodes: !data.MobilePhoneNumber && countries ? countries.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] || '')
+        };
+      }) : [],
       name: 'MobilePhoneNumber',
       autoComplete: 'off',
       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 +283,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 +314,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,15 +326,18 @@ AccountDetail.defaultProps = {
   value: '',
   name: '',
   error: [],
-  onSubmit: Function
+  onSubmit: Function,
+  isComplete: false
 };
 
 var rules = {
-  MobilePhoneNumber: [[_required2.default, 'error.empty.mobilePhoneNumber']],
-  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']]
+  MobilePhoneNumber: [[_required2.default, 'error.empty.mobilePhoneNumber'], [_phone2.default, 'error.condition.phone']],
+  Address1: [[_required2.default, 'error.empty.address'], [_blacklistedCharacters2.default, 'error.format.address']],
+  Zip: [[_required2.default, 'error.empty.zip_code'], [_noSpecialCharacters2.default, 'error.format.zip']],
+  City: [[_required2.default, 'error.empty.city'], [_stringWithoutNumbers2.default, 'error.invalid.city'], [_blacklistedCharacters2.default, 'error.invalid.city']],
+  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-edit-profile.0",
   "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": "2ec4bead075692356f774233854cf030e9129efd"
 }