tg-core-components 6.1.9-intl-test.2 → 6.2.0-alpha.0

package/lib/widgets/BonusOffers/BonusCode.js

@@ -0,0 +1,85 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+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"); } }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactIntl = require('react-intl');
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _Input = require('../../components/Input');
+
+var _Input2 = _interopRequireDefault(_Input);
+
+var _Button = require('../../components/Button');
+
+var _Button2 = _interopRequireDefault(_Button);
+
+var _Icon = require('../../components/Icon');
+
+var _Icon2 = _interopRequireDefault(_Icon);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var BonusCode = function BonusCode(_ref) {
+  var _onSubmit = _ref.onSubmit,
+      intl = _ref.intl;
+
+  var _useState = (0, _react.useState)(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      bonusCode = _useState2[0],
+      setBonusCode = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      showInput = _useState4[0],
+      setShowInput = _useState4[1];
+
+  return _react2.default.createElement(
+    'div',
+    { className: (0, _classnames2.default)('BonusCode', { 'BonusCode--active': showInput }) },
+    _react2.default.createElement(
+      'span',
+      { onClick: function onClick() {
+          return setShowInput(!showInput);
+        } },
+      _react2.default.createElement(_reactIntl.FormattedMessage, {
+        id: 'message.have_bonus_code',
+        defaultMessage: 'Do you have a bonus code?'
+      })
+    ),
+    showInput && _react2.default.createElement(
+      'form',
+      {
+        onSubmit: function onSubmit(e) {
+          e.preventDefault();
+          _onSubmit(bonusCode);
+        } },
+      _react2.default.createElement(_Input2.default, {
+        onChange: function onChange(e) {
+          return setBonusCode(e.target.value);
+        },
+        placeholder: intl.formatMessage({ id: 'cashier.bonus_code' })
+      }),
+      _react2.default.createElement(
+        _Button2.default,
+        {
+          className: 'button secondary',
+          type: 'submit',
+          disabled: bonusCode.trim() === '' },
+        _react2.default.createElement(_Icon2.default, { icon: 'chevron-right' })
+      )
+    )
+  );
+};
+
+exports.default = (0, _reactIntl.injectIntl)(BonusCode);

package/lib/widgets/BonusOffers/Details.js

@@ -0,0 +1,157 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _marked = require('marked');
+
+var _marked2 = _interopRequireDefault(_marked);
+
+var _Icon = require('../../components/Icon');
+
+var _Icon2 = _interopRequireDefault(_Icon);
+
+var _Notice = require('../CashierAccordion/Payment/Notice');
+
+var _Notice2 = _interopRequireDefault(_Notice);
+
+var _get = require('lodash/get');
+
+var _get2 = _interopRequireDefault(_get);
+
+var _Actions = require('./Actions');
+
+var _Actions2 = _interopRequireDefault(_Actions);
+
+var _selectUnit = require('../../lib/utils/selectUnit');
+
+var _reactIntl = require('react-intl');
+
+var _Translate = require('../../components/Translate');
+
+var _Translate2 = _interopRequireDefault(_Translate);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Details = function Details(_ref) {
+  var bonus = _ref.bonus,
+      content = _ref.content,
+      defaultImage = _ref.defaultImage,
+      status = _ref.status,
+      wageringProgress = _ref.wageringProgress,
+      onBack = _ref.onBack,
+      onClaim = _ref.onClaim,
+      onReject = _ref.onReject,
+      onTriggerByPromoCode = _ref.onTriggerByPromoCode,
+      selectBonus = _ref.selectBonus,
+      alert = _ref.alert;
+
+  return _react2.default.createElement(
+    'div',
+    { className: 'Details' },
+    _react2.default.createElement(
+      'div',
+      {
+        className: 'Details__banner',
+        style: {
+          backgroundImage: 'url(' + (0, _get2.default)(content, 'image.file.url', defaultImage) + ')'
+        } },
+      _react2.default.createElement(
+        'div',
+        { className: 'Details__banner__back', onClick: onBack },
+        _react2.default.createElement(_Icon2.default, { icon: 'chevron-left' }),
+        _react2.default.createElement(_Translate2.default, { id: 'action.back', defaultMessage: 'Back' })
+      )
+    ),
+    _react2.default.createElement(
+      'div',
+      { className: 'Details__content' },
+      alert && _react2.default.createElement(_Notice2.default, {
+        level: alert.level,
+        icon: alert.level === 'success' ? _react2.default.createElement(_Icon2.default, { icon: 'check' }) : _react2.default.createElement(_Icon2.default, { icon: 'stop-circle' }),
+        header: _react2.default.createElement(_Translate2.default, { id: 'label.bonus-offers.' + alert.type })
+      }),
+      _react2.default.createElement(
+        'div',
+        { className: 'Details__content__name' },
+        (0, _get2.default)(content, 'name') || bonus.Name
+      ),
+      _react2.default.createElement(
+        'div',
+        { className: 'Details__content__summary' },
+        (0, _get2.default)(content, 'summary') || bonus.Description
+      ),
+      _react2.default.createElement(_Actions2.default, {
+        bonus: bonus,
+        onClaim: onClaim,
+        onReject: onReject,
+        onTriggerByPromoCode: onTriggerByPromoCode,
+        status: status,
+        promotionCode: (0, _get2.default)(content, 'promotionCode'),
+        onSuccess: function onSuccess() {
+          return selectBonus(null);
+        }
+      }),
+      _react2.default.createElement(
+        'div',
+        { className: 'Details__content__statistics' },
+        _react2.default.createElement(
+          'ul',
+          null,
+          wageringProgress && _react2.default.createElement(
+            'li',
+            null,
+            status === 'available' ? _react2.default.createElement(_Translate2.default, {
+              id: 'label.bonus-offers.prewager',
+              defaultMessage: 'Progress'
+            }) : _react2.default.createElement(_Translate2.default, {
+              id: 'label.bonus-offers.wager',
+              defaultMessage: 'Progress'
+            }),
+            _react2.default.createElement(
+              'span',
+              null,
+              wageringProgress,
+              '%'
+            )
+          ),
+          _react2.default.createElement(
+            'li',
+            null,
+            _react2.default.createElement(_Translate2.default, { id: 'label.expires.bonus', defaultMessage: 'Expires' }),
+            _react2.default.createElement(_reactIntl.FormattedRelativeTime, (0, _selectUnit.selectUnit)(new Date(bonus.Expires + '+00:00'), true))
+          ),
+          bonus.Amount > 0 && _react2.default.createElement(
+            'li',
+            null,
+            _react2.default.createElement(_Translate2.default, { id: 'label.amount', defaultMessage: 'Amount' }),
+            _react2.default.createElement(_reactIntl.FormattedNumber, {
+              value: bonus.Amount,
+              style: bonus.Type === 'Freespins' ? 'decimal' : 'currency',
+              currency: bonus.Currency
+            })
+          )
+        )
+      ),
+      _react2.default.createElement('div', {
+        className: 'Details__content__description',
+        dangerouslySetInnerHTML: {
+          __html: (0, _marked2.default)((0, _get2.default)(content, 'content') || '')
+        }
+      }),
+      _react2.default.createElement('div', {
+        className: 'Details__content__tac',
+        dangerouslySetInnerHTML: {
+          __html: (0, _marked2.default)((0, _get2.default)(content, 'termsAndConditions') || '')
+        }
+      })
+    )
+  );
+};
+
+exports.default = Details;

package/lib/widgets/BonusOffers/Finished.js

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _BonusWidget = require('../BonusWidget');
+
+var _BonusWidget2 = _interopRequireDefault(_BonusWidget);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Finished = function Finished(_ref) {
+  var bonuses = _ref.bonuses;
+
+  return _react2.default.createElement(
+    'div',
+    { className: 'Finished' },
+    _react2.default.createElement(_BonusWidget2.default, {
+      bonuses: bonuses,
+      exclude: ['available', 'active'],
+      disableBonusCodeForm: true
+    })
+  );
+};
+
+exports.default = Finished;

package/lib/widgets/BonusOffers/List.js

@@ -0,0 +1,104 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _marked = require('marked');
+
+var _marked2 = _interopRequireDefault(_marked);
+
+var _get = require('lodash/get');
+
+var _get2 = _interopRequireDefault(_get);
+
+var _reactIntl = require('react-intl');
+
+var _AccordionWidget = require('../AccordionWidget');
+
+var _AccordionWidget2 = _interopRequireDefault(_AccordionWidget);
+
+var _bonus = require('../../lib/utils/bonus');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Item = function Item(_ref) {
+  var bonus = _ref.bonus,
+      content = _ref.content,
+      status = _ref.status,
+      defaultImage = _ref.defaultImage;
+  return _react2.default.createElement(
+    'div',
+    { className: 'List__Item' },
+    _react2.default.createElement(
+      'div',
+      {
+        className: 'List__Item__image',
+        style: {
+          backgroundImage: 'url(' + (0, _get2.default)(content, 'image.file.url', defaultImage) + ')'
+        } },
+      status === 'active' && _react2.default.createElement(
+        'span',
+        { className: 'List__Item__image__badge' },
+        _react2.default.createElement(_reactIntl.FormattedMessage, { id: 'label.' + bonus.State.toLowerCase() })
+      )
+    ),
+    _react2.default.createElement(
+      'div',
+      { className: 'List__Item__content' },
+      _react2.default.createElement(
+        'div',
+        { className: 'List__Item__content__name' },
+        (0, _get2.default)(content, 'name') || bonus.Name
+      ),
+      _react2.default.createElement(
+        'div',
+        { className: 'List__Item__content__summary' },
+        (0, _get2.default)(content, 'summary') || bonus.Description
+      ),
+      _react2.default.createElement('div', {
+        className: 'List__Item__content__disclaimer',
+        dangerouslySetInnerHTML: {
+          __html: (0, _marked2.default)((0, _get2.default)(content, 'disclaimer') || '')
+        }
+      })
+    )
+  );
+};
+
+var List = function List(_ref2) {
+  var bonuses = _ref2.bonuses,
+      content = _ref2.content,
+      defaultImage = _ref2.defaultImage,
+      selectBonus = _ref2.selectBonus;
+
+  return _react2.default.createElement(
+    'div',
+    { className: 'List' },
+    _react2.default.createElement(_AccordionWidget2.default, {
+      onClickHeader: function onClickHeader(e, key, item) {
+        return selectBonus(item.item);
+      },
+      items: bonuses.map(function (b, i) {
+        return {
+          customClass: (0, _bonus.getStatus)(b),
+          item: b,
+          header: _react2.default.createElement(Item, {
+            bonus: b,
+            status: (0, _bonus.getStatus)(b),
+            content: content.find(function (c) {
+              return c.identifier === b.Identifier;
+            }),
+            defaultImage: defaultImage
+          })
+        };
+      })
+    })
+  );
+};
+
+exports.default = List;

package/lib/widgets/BonusOffers/Overview.js

@@ -0,0 +1,77 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactIntl = require('react-intl');
+
+var _Icon = require('../../components/Icon');
+
+var _Icon2 = _interopRequireDefault(_Icon);
+
+var _Notice = require('../CashierAccordion/Payment/Notice');
+
+var _Notice2 = _interopRequireDefault(_Notice);
+
+var _List = require('./List.js');
+
+var _List2 = _interopRequireDefault(_List);
+
+var _BonusCode = require('./BonusCode.js');
+
+var _BonusCode2 = _interopRequireDefault(_BonusCode);
+
+var _Finished = require('./Finished');
+
+var _Finished2 = _interopRequireDefault(_Finished);
+
+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 Overview = function Overview(_ref) {
+  var bonuses = _ref.bonuses,
+      content = _ref.content,
+      defaultImage = _ref.defaultImage,
+      selectBonus = _ref.selectBonus,
+      onPreClaim = _ref.onPreClaim,
+      alert = _ref.alert;
+
+  var availableBonuses = [].concat(_toConsumableArray(bonuses.active), _toConsumableArray(bonuses.available));
+  var finishedBonuses = bonuses.finished;
+
+  return _react2.default.createElement(
+    'div',
+    { className: 'Overview' },
+    alert && _react2.default.createElement(_Notice2.default, {
+      level: alert.level,
+      icon: alert.level === 'success' ? _react2.default.createElement(_Icon2.default, { icon: 'check' }) : _react2.default.createElement(_Icon2.default, { icon: 'stop-circle' }),
+      header: _react2.default.createElement(_reactIntl.FormattedMessage, { id: 'label.bonus-offers.' + alert.type })
+    }),
+    _react2.default.createElement(_reactIntl.FormattedMessage, {
+      id: 'label.bonus-offers.overview-title',
+      defaultMessage: 'My Offers',
+      tagName: 'h3'
+    }),
+    availableBonuses.length === 0 && _react2.default.createElement(_reactIntl.FormattedMessage, {
+      id: 'label.bonus-offers.overview-no-offers',
+      defaultMessage: 'No bonus offers available...',
+      tagName: 'p'
+    }),
+    availableBonuses.length > 0 && _react2.default.createElement(_List2.default, {
+      bonuses: availableBonuses,
+      content: content,
+      defaultImage: defaultImage,
+      selectBonus: selectBonus
+    }),
+    _react2.default.createElement(_BonusCode2.default, { onSubmit: onPreClaim }),
+    finishedBonuses.length > 0 && _react2.default.createElement(_Finished2.default, { bonuses: finishedBonuses })
+  );
+};
+
+exports.default = Overview;

package/lib/widgets/BonusOffers/index.js

@@ -0,0 +1,95 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+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"); } }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _Overview = require('./Overview');
+
+var _Overview2 = _interopRequireDefault(_Overview);
+
+var _Details = require('./Details');
+
+var _Details2 = _interopRequireDefault(_Details);
+
+var _bonus = require('../../lib/utils/bonus');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var BonusOffers = function BonusOffers(_ref) {
+  var bonuses = _ref.bonuses,
+      content = _ref.content,
+      defaultImage = _ref.defaultImage,
+      onClaim = _ref.onClaim,
+      onCancel = _ref.onCancel,
+      onReject = _ref.onReject,
+      onPreClaim = _ref.onPreClaim,
+      onTriggerByPromoCode = _ref.onTriggerByPromoCode,
+      onOther = _ref.onOther,
+      getBonus = _ref.getBonus,
+      alerts = _ref.alerts,
+      removeAlert = _ref.removeAlert,
+      scrollToTop = _ref.scrollToTop;
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedBonus = _useState2[0],
+      _selectBonus = _useState2[1];
+
+  var mappedBonuses = (0, _bonus.categorizeByState)(bonuses);
+  var alert = alerts && alerts.length > 0 ? alerts[0] : null;
+
+  (0, _react.useEffect)(function () {
+    scrollToTop();
+    alert && removeAlert(alert.type);
+  }, [selectedBonus]);
+
+  (0, _react.useEffect)(function () {
+    alert && scrollToTop();
+  }, [alert]);
+
+  return _react2.default.createElement(
+    'div',
+    { className: 'BonusOffers' },
+    !selectedBonus && _react2.default.createElement(_Overview2.default, {
+      bonuses: mappedBonuses,
+      content: content,
+      defaultImage: defaultImage,
+      selectBonus: function selectBonus(bonus) {
+        return _selectBonus(bonus);
+      },
+      onPreClaim: onPreClaim,
+      alert: alert
+    }),
+    selectedBonus && _react2.default.createElement(_Details2.default, {
+      bonus: selectedBonus,
+      content: content.find(function (c) {
+        return c.identifier === selectedBonus.Identifier;
+      }) || {},
+      defaultImage: defaultImage,
+      wageringProgress: (0, _bonus.getWageringProgress)(selectedBonus),
+      onBack: function onBack() {
+        return _selectBonus(null);
+      },
+      status: (0, _bonus.getStatus)(selectedBonus),
+      onClaim: onClaim,
+      onReject: onReject,
+      onCancel: onCancel,
+      onTriggerByPromoCode: onTriggerByPromoCode,
+      onOther: onOther,
+      getBonus: getBonus,
+      selectBonus: function selectBonus(bonus) {
+        return _selectBonus(bonus);
+      },
+      alert: alert
+    })
+  );
+};
+
+exports.default = BonusOffers;

package/lib/widgets/BonusWidget/index.js

@@ -38,6 +38,8 @@ var _marked2 = _interopRequireDefault(_marked);
 
 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 ALEACC_BONUS_CLAIM_STATE = ['Initiated', 'PreClaimed'];
 var ALEACC_BONUS_REJECT_STATE = ['Initiated', 'PreClaimed', 'Pending', 'PreWager'];
 var ALEACC_BONUS_ACTION_STATE = [].concat(ALEACC_BONUS_CLAIM_STATE, ALEACC_BONUS_REJECT_STATE);
@@ -155,7 +157,10 @@ var BonusWidget = function BonusWidget(_ref3) {
   var bonuses = _ref3.bonuses,
       handleBonusCodeSubmit = _ref3.handleBonusCodeSubmit,
       onClaimBonus = _ref3.onClaimBonus,
-      onRejectBonus = _ref3.onRejectBonus;
+      onRejectBonus = _ref3.onRejectBonus,
+      _ref3$exclude = _ref3.exclude,
+      exclude = _ref3$exclude === undefined ? [] : _ref3$exclude,
+      disableBonusCodeForm = _ref3.disableBonusCodeForm;
 
   var bonusList = { active: null, available: null, finished: null };
 
@@ -290,19 +295,25 @@ var BonusWidget = function BonusWidget(_ref3) {
 
   var menu = {
     identifier: 'account-history',
-    items: [{
+    items: [].concat(_toConsumableArray(!exclude.includes('active') ? [{
       name: _react2.default.createElement(_Translate2.default, { id: 'label.active', defaultMessage: 'Activate' }),
       content: _react2.default.createElement(_tgCoreComponents.List, { data: bonusList['active'], noData: 'list.no_data.active' })
-    }, {
+    }] : []), _toConsumableArray(!exclude.includes('available') ? [{
       name: _react2.default.createElement(_Translate2.default, { id: 'label.available', defaultMessage: 'Available' }),
-      content: _react2.default.createElement(_tgCoreComponents.List, { data: bonusList['available'], noData: 'list.no_data.available' })
-    }, {
+      content: _react2.default.createElement(_tgCoreComponents.List, {
+        data: bonusList['available'],
+        noData: 'list.no_data.available'
+      })
+    }] : []), _toConsumableArray(!exclude.includes('finished') ? [{
       name: _react2.default.createElement(_Translate2.default, { id: 'label.finished', defaultMessage: 'Finished' }),
-      content: _react2.default.createElement(_tgCoreComponents.List, { data: bonusList['finished'], noData: 'list.no_data.finished' })
-    }, {
+      content: _react2.default.createElement(_tgCoreComponents.List, {
+        data: bonusList['finished'],
+        noData: 'list.no_data.finished'
+      })
+    }] : []), _toConsumableArray(disableBonusCodeForm && {
       name: _react2.default.createElement(_Translate2.default, { id: 'label.bonus_code', defaultMessage: 'Bonus code' }),
       content: _react2.default.createElement(_BonusCode2.default, { handleSubmit: handleBonusCodeSubmit })
-    }]
+    }))
   };
 
   var items = menu.items.map(function (item, i) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tg-core-components",
-  "version": "6.1.9-intl-test.2",
+  "version": "6.2.0-alpha.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": "742fde492d0ae1db9ad6762d5b0e961c4940e87e"
+  "gitHead": "8d4a433b94fab6315b39a09655d7d4af38eec7f1"
 }