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

package/es/components/Message/index.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import Icon from '../Icon';
+import cn from 'classnames';
+
+var Message = function Message(_ref) {
+  var closeButton = _ref.closeButton,
+      count = _ref.count,
+      onClick = _ref.onClick,
+      onClose = _ref.onClose,
+      content = _ref.content,
+      className = _ref.className,
+      icon = _ref.icon;
+
+  return React.createElement(
+    'div',
+    { className: cn('Message', className), onClick: onClick },
+    closeButton && React.createElement(
+      'span',
+      { className: 'close', onClick: onClose },
+      React.createElement(Icon, { icon: 'times' })
+    ),
+    icon && React.createElement(
+      'div',
+      { className: 'icon' },
+      React.createElement(Icon, { icon: '' + icon })
+    ),
+    React.createElement(
+      'div',
+      { className: 'content' },
+      content
+    ),
+    count && React.createElement(
+      'div',
+      { className: 'count' },
+      count
+    ),
+    React.createElement(Icon, { icon: 'chevron-right' })
+  );
+};
+
+export default Message;

package/es/index.js

@@ -51,8 +51,9 @@ import ResponsibleGamingAccordionSignUp from './widgets/ResponsibleGamingAccordi
 import ResponsibleGamingSingleSignUp from './widgets/ResponsibleGamingSingleSignUp';
 import ResponsibleGamingWidget from './widgets/ResponsibleGamingWidget';
 import VerifyAccordionWidget from './widgets/VerifyAccordionWidget';
+import BonusOffers from './widgets/BonusOffers';
 
 // misc
 import countryEmojiFlags from './misc/countryEmojiFlags';
 
-export { AcceptUpdatedTaC, Alert, Button, ButtonLoader, Checklist, Icon, Image, Input, InternalMessagesInbox, Loader, Money, Notification, Radio, Select, Single, Textarea, Uploader, AccordionWidget, AccountDetail, ActivateWidget, Balance, Bonus, Deposit, Withdraw, SignUp, ChangeUsername, ChangePassword, ResetPassword, RequestResetPassword, SignIn, Pagination, Settings, TableWidget, Verify, Subscriptions, CasinoHistoryTable, PaymentHistoryTable, SportsbookHistoryTable, DepositWidgetAccordion, WithdrawWidgetAccordion, ResponsibleGamingAccordion, ResponsibleGamingAccordionSignUp, ResponsibleGamingSingleSignUp, ResponsibleGamingWidget, List, VerifyAccordionWidget, Translate, Picture, countryEmojiFlags, Skeleton, AutocompleteInput };
+export { BonusOffers, AcceptUpdatedTaC, Alert, Button, ButtonLoader, Checklist, Icon, Image, Input, InternalMessagesInbox, Loader, Money, Notification, Radio, Select, Single, Textarea, Uploader, AccordionWidget, AccountDetail, ActivateWidget, Balance, Bonus, Deposit, Withdraw, SignUp, ChangeUsername, ChangePassword, ResetPassword, RequestResetPassword, SignIn, Pagination, Settings, TableWidget, Verify, Subscriptions, CasinoHistoryTable, PaymentHistoryTable, SportsbookHistoryTable, DepositWidgetAccordion, WithdrawWidgetAccordion, ResponsibleGamingAccordion, ResponsibleGamingAccordionSignUp, ResponsibleGamingSingleSignUp, ResponsibleGamingWidget, List, VerifyAccordionWidget, Translate, Picture, countryEmojiFlags, Skeleton, AutocompleteInput };

package/es/lib/utils/bonus.js

@@ -0,0 +1,47 @@
+export var bonusMapping = {
+  InPlay: 'active',
+  Active: 'active',
+  Initiated: 'available',
+  PreClaimed: 'available',
+  PreWager: 'available',
+  Expired: 'finished',
+  Rejected: 'finished',
+  Finished: 'finished',
+  Canceled: 'finished',
+  FinishedNoGains: 'finished',
+  AdminCanceled: 'finished'
+};
+
+export var categorizeByState = function categorizeByState(bonuses) {
+  return {
+    available: bonuses.filter(function (b) {
+      return bonusMapping[b.State] === 'available';
+    }),
+    active: bonuses.filter(function (b) {
+      return bonusMapping[b.State] === 'active';
+    }),
+    finished: bonuses.filter(function (b) {
+      return bonusMapping[b.State] === 'finished';
+    })
+  };
+};
+
+export var getStatus = function getStatus(bonus) {
+  return bonusMapping[bonus.State];
+};
+
+export var getWageringProgress = function getWageringProgress(bonus) {
+  var wageringRequirement = bonusMapping[bonus.State] === 'available' ? bonus.PreWageringRequirment : bonus.WageringRequirment;
+
+  var wageringRequirementRemaining = bonusMapping[bonus.State] === 'available' ? bonus.PreWageringRequirmentRemaining : bonus.WageringRequirmentRemaining;
+
+  return Boolean(wageringRequirement) ? (100 - wageringRequirementRemaining / wageringRequirement * 100).toFixed(2) : null;
+};
+
+export var getNumberOfAvailableBonuses = function getNumberOfAvailableBonuses(bonuses) {
+  if (!Array.isArray(bonuses) || bonuses.length < 1) return 0;
+
+  return bonuses.filter(function (b) {
+    return bonusMapping[b.State] === 'available';
+  }).length;
+};

package/es/lib/utils/selectUnit.js

@@ -8,51 +8,55 @@ var MILISECONDS = {
   IN_A_YEAR: 31536000000
 };
 
-export var selectUnit = function selectUnit(from) {
+export var selectUnit = function selectUnit(value) {
+  var isFuture = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
   var now = Date.now();
-  var ms = now - from;
+  var ms = isFuture ? value - now : now - value;
+
+  var operatorCalc = isFuture ? 1 : -1;
 
   switch (true) {
     case MILISECONDS.IN_A_SECOND < ms && ms < MILISECONDS.IN_A_MINUTE:
       return {
-        value: -1 * Math.floor(ms / MILISECONDS.IN_A_SECOND),
+        value: operatorCalc * Math.floor(ms / MILISECONDS.IN_A_SECOND),
         unit: 'second',
         updateIntervalInSeconds: 1
       };
 
     case MILISECONDS.IN_A_MINUTE < ms && ms < MILISECONDS.IN_AN_HOUR:
       return {
-        value: -1 * Math.floor(ms / MILISECONDS.IN_A_MINUTE),
+        value: operatorCalc * Math.floor(ms / MILISECONDS.IN_A_MINUTE),
         unit: 'minute'
       };
 
     case MILISECONDS.IN_AN_HOUR < ms && ms < MILISECONDS.IN_A_DAY:
       return {
-        value: -1 * Math.floor(ms / MILISECONDS.IN_AN_HOUR),
+        value: operatorCalc * Math.floor(ms / MILISECONDS.IN_AN_HOUR),
         unit: 'hour'
       };
 
     case MILISECONDS.IN_A_DAY < ms && ms < MILISECONDS.IN_A_WEEK:
       return {
-        value: -1 * Math.floor(ms / MILISECONDS.IN_A_DAY),
+        value: operatorCalc * Math.floor(ms / MILISECONDS.IN_A_DAY),
         unit: 'day'
       };
 
     case MILISECONDS.IN_A_WEEK < ms && ms < MILISECONDS.IN_A_MONTH:
       return {
-        value: -1 * Math.floor(ms / MILISECONDS.IN_A_WEEK),
+        value: operatorCalc * Math.floor(ms / MILISECONDS.IN_A_WEEK),
         unit: 'week'
       };
 
     case MILISECONDS.IN_A_MONTH < ms && ms < MILISECONDS.IN_A_YEAR:
       return {
-        value: -1 * Math.floor(ms / MILISECONDS.IN_A_MONTH),
+        value: operatorCalc * Math.floor(ms / MILISECONDS.IN_A_MONTH),
         unit: 'month'
       };
 
     case MILISECONDS.IN_A_YEAR < ms:
       return {
-        value: -1 * Math.floor(ms / MILISECONDS.IN_A_YEAR),
+        value: operatorCalc * Math.floor(ms / MILISECONDS.IN_A_YEAR),
         unit: 'year'
       };
 

package/es/lib/utils/translate.js

@@ -9,7 +9,7 @@ var translate = function translate(_ref, intl) {
       values = _ref.values,
       rest = _objectWithoutProperties(_ref, ['id', 'values']);
 
-  var cacheId = intl.locale + id + (JSON.stringify(values) || '');
+  var cacheId = id + (JSON.stringify(values) || '');
   if (cache[cacheId]) return cache[cacheId];
 
   var g = typeof window !== 'undefined' && window || typeof global !== 'undefined' && global || {};

package/es/widgets/AccordionWidget/index.js

@@ -12,10 +12,13 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 import React, { Component, useState } from 'react';
 import PropTypes from 'prop-types';
 import AnimateHeight from 'react-animate-height';
 import Icon from '../../components/Icon';
+import cn from 'classnames';
 
 var AccordionHeader = function AccordionHeader(_ref) {
   var expanded = _ref.expanded,
@@ -83,10 +86,14 @@ var AccordionContent = function AccordionContent(_ref2) {
 var AccordionItem = function AccordionItem(_ref3) {
   var header = _ref3.header,
       content = _ref3.content,
-      expanded = _ref3.expanded;
+      expanded = _ref3.expanded,
+      customClass = _ref3.customClass;
   return React.createElement(
     'div',
-    { className: 'AccordionItem' + (expanded ? ' AccordionItem--expanded' : '') },
+    {
+      className: cn('AccordionItem', _defineProperty({
+        'AccordionItem--expanded': expanded
+      }, 'AccordionItem--' + customClass, customClass)) },
     header,
     content
   );
@@ -175,7 +182,8 @@ var Accordion = function (_Component) {
             animationDuration: animationDuration,
             contentCollapsedHeight: contentCollapsedHeight
           }),
-          key: index
+          key: index,
+          customClass: item.customClass
         };
       });
 

package/es/widgets/BonusOffers/Actions.js

@@ -0,0 +1,167 @@
+var _this = this;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+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 _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); } }
+
+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 } from 'react';
+import Button from '../../components/Button';
+import { FormattedMessage } from 'react-intl';
+import cn from 'classnames';
+
+var Actions = function Actions(_ref) {
+  var bonus = _ref.bonus,
+      onClaim = _ref.onClaim,
+      onCancel = _ref.onCancel,
+      onReject = _ref.onReject,
+      onTriggerByPromoCode = _ref.onTriggerByPromoCode,
+      status = _ref.status,
+      promotionCode = _ref.promotionCode,
+      onOther = _ref.onOther,
+      onSuccess = _ref.onSuccess;
+
+  var _useState = useState([{
+    conditions: status === 'active' || bonus.State === 'PreWager',
+    onClick: onOther,
+    isLoading: false,
+    disabled: false,
+    type: 'primary',
+    translation: 'action.other-bonus',
+    name: 'other',
+    args: [bonus, promotionCode]
+  }, {
+    conditions: bonus.State === 'Initiated',
+    onClick: onClaim,
+    isLoading: false,
+    disabled: false,
+    type: 'primary',
+    translation: 'action.claim',
+    name: 'claim',
+    args: [bonus]
+  }, {
+    conditions: status === 'available' && bonus.State !== 'Initiated' && bonus.State !== 'PreWager' && promotionCode,
+    onClick: onTriggerByPromoCode,
+    isLoading: false,
+    isDisabled: false,
+    type: 'primary',
+    translation: 'action.claim',
+    name: 'trigger',
+    args: [promotionCode]
+  }, {
+    conditions: bonus.State === 'Initiated',
+    onClick: onReject,
+    isLoading: false,
+    disabled: false,
+    type: 'tertiary',
+    translation: 'action.reject',
+    name: 'reject',
+    args: [bonus]
+  }, {
+    conditions: status === 'active',
+    onClick: onCancel,
+    isLoading: false,
+    disabled: false,
+    type: 'tertiary',
+    translation: 'action.cancel',
+    name: 'cancel',
+    args: [bonus.Id]
+  }]),
+      _useState2 = _slicedToArray(_useState, 2),
+      buttons = _useState2[0],
+      setButtons = _useState2[1];
+
+  var actionWrapper = function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(action, name) {
+      for (var _len = arguments.length, args = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+        args[_key - 2] = arguments[_key];
+      }
+
+      var res;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              setButtons([].concat(_toConsumableArray(buttons.map(function (b) {
+                if (b.name === name) {
+                  return _extends({}, b, {
+                    isLoading: true,
+                    disabled: true
+                  });
+                }
+
+                return b;
+              }))));
+
+              _context.next = 3;
+              return action.apply(undefined, _toConsumableArray(args));
+
+            case 3:
+              res = _context.sent;
+
+
+              if (res && res.payload && res.payload.isNetworkException || res && res.payload && res.payload === 0) {
+                setButtons([].concat(_toConsumableArray(buttons.map(function (b) {
+                  if (b.name === name) {
+                    return _extends({}, b, {
+                      isLoading: false,
+                      disabled: false
+                    });
+                  }
+
+                  return b;
+                }))));
+              } else {
+                onSuccess();
+
+                setButtons([].concat(_toConsumableArray(buttons.map(function (b) {
+                  if (b.name === name) {
+                    return _extends({}, b, {
+                      isLoading: false,
+                      disabled: true
+                    });
+                  }
+
+                  return b;
+                }))));
+              }
+
+            case 5:
+            case 'end':
+              return _context.stop();
+          }
+        }
+      }, _callee, _this);
+    }));
+
+    return function actionWrapper(_x, _x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  return React.createElement(
+    'div',
+    { className: 'Actions' },
+    buttons && buttons.filter(function (b) {
+      return b.conditions;
+    }).map(function (b) {
+      return React.createElement(
+        Button,
+        {
+          key: b.name,
+          isLoading: b.isLoading,
+          disabled: b.disabled,
+          className: cn('button small', b.type),
+          onClick: function onClick() {
+            return actionWrapper.apply(undefined, [b.onClick, b.name].concat(_toConsumableArray(b.args)));
+          } },
+        React.createElement(FormattedMessage, { id: b.translation })
+      );
+    })
+  );
+};
+
+export default Actions;

package/es/widgets/BonusOffers/BonusCode.js

@@ -0,0 +1,62 @@
+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"); } }; }();
+
+import React, { useState } from 'react';
+import { FormattedMessage, injectIntl } from 'react-intl';
+import cn from 'classnames';
+import Input from '../../components/Input';
+import Button from '../../components/Button';
+import Icon from '../../components/Icon';
+
+var BonusCode = function BonusCode(_ref) {
+  var _onSubmit = _ref.onSubmit,
+      intl = _ref.intl;
+
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      bonusCode = _useState2[0],
+      setBonusCode = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      showInput = _useState4[0],
+      setShowInput = _useState4[1];
+
+  return React.createElement(
+    'div',
+    { className: cn('BonusCode', { 'BonusCode--active': showInput }) },
+    React.createElement(
+      'span',
+      { onClick: function onClick() {
+          return setShowInput(!showInput);
+        } },
+      React.createElement(FormattedMessage, {
+        id: 'message.have_bonus_code',
+        defaultMessage: 'Do you have a bonus code?'
+      })
+    ),
+    showInput && React.createElement(
+      'form',
+      {
+        onSubmit: function onSubmit(e) {
+          e.preventDefault();
+          _onSubmit(bonusCode);
+        } },
+      React.createElement(Input, {
+        onChange: function onChange(e) {
+          return setBonusCode(e.target.value);
+        },
+        placeholder: intl.formatMessage({ id: 'cashier.bonus_code' })
+      }),
+      React.createElement(
+        Button,
+        {
+          className: 'button secondary',
+          type: 'submit',
+          disabled: bonusCode.trim() === '' },
+        React.createElement(Icon, { icon: 'chevron-right' })
+      )
+    )
+  );
+};
+
+export default injectIntl(BonusCode);

package/es/widgets/BonusOffers/Details.js

@@ -0,0 +1,127 @@
+import React from 'react';
+import marked from 'marked';
+import Icon from '../../components/Icon';
+import Notice from '../CashierAccordion/Payment/Notice';
+import getByPath from 'lodash/get';
+import Actions from './Actions';
+import { selectUnit } from '../../lib/utils/selectUnit';
+import { FormattedRelativeTime, FormattedNumber } from 'react-intl';
+import Translate from '../../components/Translate';
+
+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 React.createElement(
+    'div',
+    { className: 'Details' },
+    React.createElement(
+      'div',
+      {
+        className: 'Details__banner',
+        style: {
+          backgroundImage: 'url(' + getByPath(content, 'image.file.url', defaultImage) + ')'
+        } },
+      React.createElement(
+        'div',
+        { className: 'Details__banner__back', onClick: onBack },
+        React.createElement(Icon, { icon: 'chevron-left' }),
+        React.createElement(Translate, { id: 'action.back', defaultMessage: 'Back' })
+      )
+    ),
+    React.createElement(
+      'div',
+      { className: 'Details__content' },
+      alert && React.createElement(Notice, {
+        level: alert.level,
+        icon: alert.level === 'success' ? React.createElement(Icon, { icon: 'check' }) : React.createElement(Icon, { icon: 'stop-circle' }),
+        header: React.createElement(Translate, { id: 'label.bonus-offers.' + alert.type })
+      }),
+      React.createElement(
+        'div',
+        { className: 'Details__content__name' },
+        getByPath(content, 'name') || bonus.Name
+      ),
+      React.createElement(
+        'div',
+        { className: 'Details__content__summary' },
+        getByPath(content, 'summary') || bonus.Description
+      ),
+      React.createElement(Actions, {
+        bonus: bonus,
+        onClaim: onClaim,
+        onReject: onReject,
+        onTriggerByPromoCode: onTriggerByPromoCode,
+        status: status,
+        promotionCode: getByPath(content, 'promotionCode'),
+        onSuccess: function onSuccess() {
+          return selectBonus(null);
+        }
+      }),
+      React.createElement(
+        'div',
+        { className: 'Details__content__statistics' },
+        React.createElement(
+          'ul',
+          null,
+          wageringProgress && React.createElement(
+            'li',
+            null,
+            status === 'available' ? React.createElement(Translate, {
+              id: 'label.bonus-offers.prewager',
+              defaultMessage: 'Progress'
+            }) : React.createElement(Translate, {
+              id: 'label.bonus-offers.wager',
+              defaultMessage: 'Progress'
+            }),
+            React.createElement(
+              'span',
+              null,
+              wageringProgress,
+              '%'
+            )
+          ),
+          React.createElement(
+            'li',
+            null,
+            React.createElement(Translate, { id: 'label.expires.bonus', defaultMessage: 'Expires' }),
+            React.createElement(FormattedRelativeTime, selectUnit(new Date(bonus.Expires + '+00:00'), true))
+          ),
+          bonus.Amount > 0 && React.createElement(
+            'li',
+            null,
+            React.createElement(Translate, { id: 'label.amount', defaultMessage: 'Amount' }),
+            React.createElement(FormattedNumber, {
+              value: bonus.Amount,
+              style: bonus.Type === 'Freespins' ? 'decimal' : 'currency',
+              currency: bonus.Currency
+            })
+          )
+        )
+      ),
+      React.createElement('div', {
+        className: 'Details__content__description',
+        dangerouslySetInnerHTML: {
+          __html: marked(getByPath(content, 'content') || '')
+        }
+      }),
+      React.createElement('div', {
+        className: 'Details__content__tac',
+        dangerouslySetInnerHTML: {
+          __html: marked(getByPath(content, 'termsAndConditions') || '')
+        }
+      })
+    )
+  );
+};
+
+export default Details;

package/es/widgets/BonusOffers/Finished.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import BonusWidget from '../BonusWidget';
+
+var Finished = function Finished(_ref) {
+  var bonuses = _ref.bonuses;
+
+  return React.createElement(
+    'div',
+    { className: 'Finished' },
+    React.createElement(BonusWidget, {
+      bonuses: bonuses,
+      exclude: ['available', 'active'],
+      disableBonusCodeForm: true
+    })
+  );
+};
+
+export default Finished;

package/es/widgets/BonusOffers/List.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import marked from 'marked';
+import getByPath from 'lodash/get';
+import { FormattedMessage } from 'react-intl';
+import AccordionWidget from '../AccordionWidget';
+import { getStatus } from '../../lib/utils/bonus';
+
+var Item = function Item(_ref) {
+  var bonus = _ref.bonus,
+      content = _ref.content,
+      status = _ref.status,
+      defaultImage = _ref.defaultImage;
+  return React.createElement(
+    'div',
+    { className: 'List__Item' },
+    React.createElement(
+      'div',
+      {
+        className: 'List__Item__image',
+        style: {
+          backgroundImage: 'url(' + getByPath(content, 'image.file.url', defaultImage) + ')'
+        } },
+      status === 'active' && React.createElement(
+        'span',
+        { className: 'List__Item__image__badge' },
+        React.createElement(FormattedMessage, { id: 'label.' + bonus.State.toLowerCase() })
+      )
+    ),
+    React.createElement(
+      'div',
+      { className: 'List__Item__content' },
+      React.createElement(
+        'div',
+        { className: 'List__Item__content__name' },
+        getByPath(content, 'name') || bonus.Name
+      ),
+      React.createElement(
+        'div',
+        { className: 'List__Item__content__summary' },
+        getByPath(content, 'summary') || bonus.Description
+      ),
+      React.createElement('div', {
+        className: 'List__Item__content__disclaimer',
+        dangerouslySetInnerHTML: {
+          __html: marked(getByPath(content, 'disclaimer') || '')
+        }
+      })
+    )
+  );
+};
+
+var List = function List(_ref2) {
+  var bonuses = _ref2.bonuses,
+      content = _ref2.content,
+      defaultImage = _ref2.defaultImage,
+      selectBonus = _ref2.selectBonus;
+
+  return React.createElement(
+    'div',
+    { className: 'List' },
+    React.createElement(AccordionWidget, {
+      onClickHeader: function onClickHeader(e, key, item) {
+        return selectBonus(item.item);
+      },
+      items: bonuses.map(function (b, i) {
+        return {
+          customClass: getStatus(b),
+          item: b,
+          header: React.createElement(Item, {
+            bonus: b,
+            status: getStatus(b),
+            content: content.find(function (c) {
+              return c.identifier === b.Identifier;
+            }),
+            defaultImage: defaultImage
+          })
+        };
+      })
+    })
+  );
+};
+
+export default List;