tg-core-components 5.4.5-bethard → 5.5.1-master

package/lib/components/Select/test.js

@@ -0,0 +1,121 @@
+'use strict';
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDom = require('react-dom');
+
+var _testUtils = require('react-dom/test-utils');
+
+var _index = require('./index');
+
+var _index2 = _interopRequireDefault(_index);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+var container = null;
+beforeEach(function () {
+  // setup a DOM element as a render target
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterEach(function () {
+  // cleanup on exiting
+  (0, _reactDom.unmountComponentAtNode)(container);
+  container.remove();
+  container = null;
+});
+
+describe('renders with correct options', function () {
+  it('with only options', function () {
+    (0, _testUtils.act)(function () {
+      (0, _reactDom.render)(_react2.default.createElement(_index2.default, { options: ['Male', 'Female'] }), container);
+    });
+    expect([].concat(_toConsumableArray(container.querySelectorAll('option'))).map(function (o) {
+      return o.textContent;
+    }).join(',')).toBe('Male,Female');
+  });
+
+  it('with preset value and placeholder', function () {
+    (0, _testUtils.act)(function () {
+      (0, _reactDom.render)(_react2.default.createElement(_index2.default, {
+        options: ['Male', 'Female'],
+        value: 'Female',
+        placeholder: 'Gender'
+      }), container);
+    });
+    expect([].concat(_toConsumableArray(container.querySelectorAll('option'))).map(function (o) {
+      return o.textContent;
+    }).join(',')).toBe('Gender,Male,Female');
+  });
+});
+
+describe('renders with correct initial value', function () {
+  it('with only options', function () {
+    (0, _testUtils.act)(function () {
+      (0, _reactDom.render)(_react2.default.createElement(_index2.default, { options: ['Male', 'Female'] }), container);
+    });
+    expect(container.querySelector('select').value).toBe('Male');
+  });
+
+  it('with preset value', function () {
+    (0, _testUtils.act)(function () {
+      (0, _reactDom.render)(_react2.default.createElement(_index2.default, { options: ['Male', 'Female'], value: 'Female' }), container);
+    });
+    expect(container.querySelector('select').value).toBe('Female');
+  });
+});
+
+describe('renders with correct placeholder value', function () {
+  it('with placeholder', function () {
+    (0, _testUtils.act)(function () {
+      (0, _reactDom.render)(_react2.default.createElement(_index2.default, { options: ['Male', 'Female'], placeholder: 'Gender' }), container);
+    });
+    expect(container.querySelector('select').value).toBe('Gender');
+  });
+
+  it('with preset value title and placeholder', function () {
+    (0, _testUtils.act)(function () {
+      (0, _reactDom.render)(_react2.default.createElement(_index2.default, {
+        options: ['Male', 'Female'],
+        value: 'Female',
+        title: 'What is your gender',
+        placeholder: 'gender'
+      }), container);
+    });
+    expect(container.querySelector('select').value).toBe('Female');
+  });
+});
+
+describe('renders with correct placeholder value', function () {
+  it('with placeholder and require', function () {
+    (0, _testUtils.act)(function () {
+      (0, _reactDom.render)(_react2.default.createElement(_index2.default, { options: ['Male', 'Female'], placeholder: 'Gender', require: true }), container);
+    });
+    expect(container.querySelector('select').value).toBe('Gender');
+  });
+
+  it('with preset value, title, placeholder and require', function () {
+    (0, _testUtils.act)(function () {
+      (0, _reactDom.render)(_react2.default.createElement(_index2.default, {
+        options: ['Male', 'Female'],
+        value: 'Male',
+        title: 'What is your gender',
+        placeholder: 'gender',
+        require: true
+      }), container);
+    });
+    expect(container.querySelector('select').value).toBe('Male');
+  });
+
+  it('with placeholder and require', function () {
+    (0, _testUtils.act)(function () {
+      (0, _reactDom.render)(_react2.default.createElement(_index2.default, { options: ['Male', 'Female'], placeholder: 'Gender', require: true }), container);
+    });
+    expect(container.querySelector('select').value).toBe('Gender');
+  });
+});

package/lib/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AutocompleteInput = exports.Skeleton = exports.countryEmojiFlags = exports.Picture = exports.Translate = exports.VerifyAccordionWidget = exports.List = exports.ResponsibleGamingWidget = exports.ResponsibleGamingSingleSignUp = exports.ResponsibleGamingAccordionSignUp = exports.ResponsibleGamingAccordion = exports.WithdrawWidgetAccordion = exports.DepositWidgetAccordion = exports.SportsbookHistoryTable = exports.PaymentHistoryTable = exports.CasinoHistoryTable = exports.Subscriptions = exports.Verify = exports.TableWidget = exports.Settings = exports.Pagination = exports.SignIn = exports.RequestResetPassword = exports.ResetPassword = exports.ChangePassword = exports.ChangeUsername = exports.SignUp = exports.Withdraw = exports.Deposit = exports.Bonus = exports.Balance = exports.ActivateWidget = exports.AccountDetail = exports.AccordionWidget = exports.Uploader = exports.Textarea = exports.Single = exports.Select = exports.Radio = exports.Notification = exports.Money = exports.Loader = exports.InternalMessagesInbox = exports.Input = exports.Image = exports.Icon = exports.Checklist = exports.ButtonLoader = exports.Button = exports.Alert = exports.AcceptUpdatedTaC = undefined;
+exports.countryEmojiFlags = exports.Skeleton = exports.Picture = exports.Translate = exports.VerifyAccordionWidget = exports.List = exports.ResponsibleGamingWidget = exports.ResponsibleGamingSingleSignUp = exports.ResponsibleGamingAccordionSignUp = exports.ResponsibleGamingAccordion = exports.WithdrawWidgetAccordion = exports.DepositWidgetAccordion = exports.SportsbookHistoryTable = exports.PaymentHistoryTable = exports.CasinoHistoryTable = exports.Subscriptions = exports.Verify = exports.TableWidget = exports.Settings = exports.Pagination = exports.SignIn = exports.RequestResetPassword = exports.ResetPassword = exports.ChangePassword = exports.ChangeUsername = exports.SignUp = exports.Withdraw = exports.Deposit = exports.Bonus = exports.Balance = exports.ActivateWidget = exports.AccountDetail = exports.AccordionWidget = exports.Uploader = exports.Textarea = exports.Single = exports.Select = exports.Radio = exports.Notification = exports.Money = exports.Loader = exports.InternalMessagesInbox = exports.Input = exports.Image = exports.Icon = exports.Checklist = exports.Checkbox = exports.ButtonLoader = exports.Button = exports.Alert = exports.AcceptUpdatedTaC = undefined;
 
 var _AcceptUpdatedTaC = require('./components/AcceptUpdatedTaC');
 
@@ -21,6 +21,10 @@ var _ButtonLoader = require('./components/ButtonLoader');
 
 var _ButtonLoader2 = _interopRequireDefault(_ButtonLoader);
 
+var _Checkbox = require('./components/Checkbox');
+
+var _Checkbox2 = _interopRequireDefault(_Checkbox);
+
 var _Checklist = require('./components/Checklist');
 
 var _Checklist2 = _interopRequireDefault(_Checklist);
@@ -89,10 +93,6 @@ var _Skeleton = require('./components/Skeleton');
 
 var _Skeleton2 = _interopRequireDefault(_Skeleton);
 
-var _AutocompleteInput = require('./components/AutocompleteInput');
-
-var _AutocompleteInput2 = _interopRequireDefault(_AutocompleteInput);
-
 var _AccordionWidget = require('./widgets/AccordionWidget');
 
 var _AccordionWidget2 = _interopRequireDefault(_AccordionWidget);
@@ -215,6 +215,7 @@ exports.AcceptUpdatedTaC = _AcceptUpdatedTaC2.default;
 exports.Alert = _Alert2.default;
 exports.Button = _Button2.default;
 exports.ButtonLoader = _ButtonLoader2.default;
+exports.Checkbox = _Checkbox2.default;
 exports.Checklist = _Checklist2.default;
 exports.Icon = _Icon2.default;
 exports.Image = _Image2.default;
@@ -259,9 +260,8 @@ exports.List = _List2.default;
 exports.VerifyAccordionWidget = _VerifyAccordionWidget2.default;
 exports.Translate = _Translate2.default;
 exports.Picture = _Picture2.default;
-exports.countryEmojiFlags = _countryEmojiFlags2.default;
 exports.Skeleton = _Skeleton2.default;
-exports.AutocompleteInput = _AutocompleteInput2.default;
+exports.countryEmojiFlags = _countryEmojiFlags2.default;
 
 // misc
 

package/lib/lib/utils/translate.js

@@ -8,25 +8,18 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-var cache = {};
-
 var translate = function translate(_ref, intl) {
   var id = _ref.id,
       values = _ref.values,
       rest = _objectWithoutProperties(_ref, ['id', 'values']);
 
-  var cacheId = id + (JSON.stringify(values) || '');
-  if (cache[cacheId]) return cache[cacheId];
-
   var g = typeof window !== 'undefined' && window || typeof global !== 'undefined' && global || {};
 
   if (!intl) console.error('Missing intl object for "' + id + '"');
 
   if (g.showTranslations || !intl || !intl.formatMessage) return id;
 
-  var message = intl.formatMessage(_extends({ id: id }, rest), values);
-  cache[cacheId] = message;
-  return message;
+  return intl.formatMessage(_extends({ id: id }, rest), values);
 };
 
 exports.default = translate;

package/lib/misc/countryEmojiFlags.js

@@ -98,7 +98,6 @@ exports.default = {
   KI: '🇰🇮',
   KN: '🇰🇳',
   KR: '🇰🇷',
-  KY: '🇰🇾',
   KW: '🇰🇼',
   LA: '🇱🇦',
   LB: '🇱🇧',

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: [],