kitten-components/dist/javascripts/kitten/components/cards/reward-card/legacy-reward-card-container.js

Front-end components library

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.LegacyRewardCardContainer = exports.styles = undefined;

var _paddings, _image, _lists, _paddings2;

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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _radium = require('radium');

var _radium2 = _interopRequireDefault(_radium);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _marger = require('kitten/components/layout/marger');

var _grid = require('kitten/components/grid/grid');

var _colorsConfig = require('kitten/constants/colors-config');

var _colorsConfig2 = _interopRequireDefault(_colorsConfig);

var _screenConfig = require('kitten/constants/screen-config');

var _content = require('kitten/components/cards/reward-card/content');

var _infos = require('kitten/components/cards/reward-card/infos');

var _image2 = require('kitten/components/cards/reward-card/image');

var _action = require('kitten/components/cards/reward-card/action');

var _deprecated = require('kitten/helpers/utils/deprecated');

var _mediaQueries = require('kitten/hoc/media-queries');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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; }

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; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

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; }

var Grid = (0, _radium2.default)(_grid.Grid);
var GridCol = (0, _radium2.default)(_grid.GridCol);

var LegacyRewardCardContainerBase = function (_Component) {
  _inherits(LegacyRewardCardContainerBase, _Component);

  function LegacyRewardCardContainerBase() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, LegacyRewardCardContainerBase);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = LegacyRewardCardContainerBase.__proto__ || Object.getPrototypeOf(LegacyRewardCardContainerBase)).call.apply(_ref, [this].concat(args))), _this), _this.isTinyVersion = function () {
      return _this.props.version === 'tiny' || _this.props.viewportIsMobile;
    }, _this.isSOrLessVersion = function () {
      return _this.isTinyVersion() || _this.props.viewportIsSOrLess;
    }, _this.legacyInfos = function () {
      var _this$props = _this.props,
          titleContributors = _this$props.titleContributors,
          titleDelivery = _this$props.titleDelivery,
          titleAvailability = _this$props.titleAvailability,
          valueContributors = _this$props.valueContributors,
          valueDelivery = _this$props.valueDelivery,
          valueAvailability = _this$props.valueAvailability;


      var infos = [];

      if (titleContributors) {
        infos.push({ label: titleContributors, value: valueContributors });
      }

      if (titleDelivery) {
        infos.push({ label: titleDelivery, value: valueDelivery });
      }

      if (titleAvailability) {
        infos.push({ label: titleAvailability, value: valueAvailability });
      }

      return infos;
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(LegacyRewardCardContainerBase, [{
    key: 'render',
    value: function render() {
      // We need to destructure the props to prevent them to hydrate children components.
      var _props = this.props,
          titleAmount = _props.titleAmount,
          titleTag = _props.titleTag,
          subtitle = _props.subtitle,
          subtitleTag = _props.subtitleTag,
          description = _props.description,
          infos = _props.infos,
          manageContributionDescription = _props.manageContributionDescription,
          manageContributionLinkLabel = _props.manageContributionLinkLabel,
          manageContributionLinkHref = _props.manageContributionLinkHref,
          buttonLabel = _props.buttonLabel,
          buttonOnMouseEnter = _props.buttonOnMouseEnter,
          buttonOnMouseLeave = _props.buttonOnMouseLeave,
          buttonOnClick = _props.buttonOnClick,
          isDisabled = _props.isDisabled,
          starred = _props.starred,
          starLabel = _props.starLabel,
          version = _props.version,
          viewportIsMobile = _props.viewportIsMobile,
          viewportIsSOrLess = _props.viewportIsSOrLess,
          viewportIsTabletOrLess = _props.viewportIsTabletOrLess,
          titleDescription = _props.titleDescription,
          textDescription = _props.textDescription,
          textTag = _props.textTag,
          myContribution = _props.myContribution,
          manageContribution = _props.manageContribution,
          manageContributionLink = _props.manageContributionLink,
          button = _props.button,
          titleContributors = _props.titleContributors,
          titleDelivery = _props.titleDelivery,
          titleAvailability = _props.titleAvailability,
          valueContributors = _props.valueContributors,
          valueDelivery = _props.valueDelivery,
          valueAvailability = _props.valueAvailability,
          imageProps = _props.imageProps,
          others = _objectWithoutProperties(_props, ['titleAmount', 'titleTag', 'subtitle', 'subtitleTag', 'description', 'infos', 'manageContributionDescription', 'manageContributionLinkLabel', 'manageContributionLinkHref', 'buttonLabel', 'buttonOnMouseEnter', 'buttonOnMouseLeave', 'buttonOnClick', 'isDisabled', 'starred', 'starLabel', 'version', 'viewportIsMobile', 'viewportIsSOrLess', 'viewportIsTabletOrLess', 'titleDescription', 'textDescription', 'textTag', 'myContribution', 'manageContribution', 'manageContributionLink', 'button', 'titleContributors', 'titleDelivery', 'titleAvailability', 'valueContributors', 'valueDelivery', 'valueAvailability', 'imageProps']);

      var shouldDisplayImage = imageProps && imageProps.src;

      var cardStyles = [others.style, styles.card];

      var cardPaddings = this.isTinyVersion() ? styles.card.paddings.tinyVersion : styles.card.paddings;

      var cardImageStyles = this.isTinyVersion() ? styles.card.image.tinyVersion : styles.card.image;

      var leftColumnProps = this.isTinyVersion() ? null : {
        'col-l': shouldDisplayImage ? 7 : 10,
        'col-s': 7
      };

      var rightColumnProps = this.isTinyVersion() ? null : {
        'col-s': 4,
        'offset-s': 1
      };

      var withImageOnTinyVersion = shouldDisplayImage && this.isTinyVersion();

      if (!titleAmount) return null;

      return _react2.default.createElement(
        _deprecated.Deprecated,
        { warningMessage: 'Please use RewardCard sub-component to make your composition. You can check some examples on https://kisskissbankbank.github.io/kitten/' },
        _react2.default.createElement(
          _radium.StyleRoot,
          _extends({}, others, { style: cardStyles }),
          _react2.default.createElement(
            _marger.Marger,
            {
              bottom: this.isSOrLessVersion() ? 0 : 4,
              top: this.isSOrLessVersion() ? 3 : 4
            },
            _react2.default.createElement(
              Grid,
              { style: cardPaddings },
              _react2.default.createElement(
                GridCol,
                leftColumnProps,
                titleAmount && _react2.default.createElement(_content.RewardCardContent, _extends({}, this.props, {
                  subtitle: subtitle || titleDescription,
                  subtitleTag: subtitleTag || textTag,
                  description: description || textDescription,
                  isTinyVersion: this.isTinyVersion()
                })),
                _react2.default.createElement(_infos.RewardCardInfos, _extends({
                  infos: this.legacyInfos()
                }, this.props, {
                  isTinyVersion: this.isTinyVersion(),
                  viewportIsTabletOrLess: viewportIsTabletOrLess
                })),
                !this.isSOrLessVersion() && _react2.default.createElement(_action.RewardCardActionOnMOrMore, _extends({}, this.props, {
                  manageContributionDescription: manageContributionDescription || myContribution,
                  manageContributionLinkLabel: manageContributionLinkLabel || manageContribution,
                  manageContributionLinkHref: manageContributionLinkHref || manageContributionLink,
                  buttonLabel: buttonLabel || button,
                  isTinyVersion: this.isTinyVersion(),
                  isSOrLessVersion: this.isSOrLessVersion()
                }))
              ),
              shouldDisplayImage && _react2.default.createElement(
                GridCol,
                _extends({}, rightColumnProps, { style: cardImageStyles }),
                _react2.default.createElement(
                  _marger.Marger,
                  { bottom: !myContribution ? 2 : null },
                  _react2.default.createElement(_image2.RewardCardImage, this.props)
                )
              )
            ),
            this.isSOrLessVersion() && _react2.default.createElement(_action.RewardCardAction, _extends({}, this.props, {
              manageContributionDescription: manageContributionDescription || myContribution,
              manageContributionLinkLabel: manageContributionLinkLabel || manageContribution,
              manageContributionLinkHref: manageContributionLinkHref || manageContributionLink,
              buttonLabel: buttonLabel || button,
              isTinyVersion: this.isTinyVersion(),
              isSOrLessVersion: this.isSOrLessVersion(),
              topMargin: withImageOnTinyVersion ? 2 : 0
            }))
          )
        )
      );
    }
  }]);

  return LegacyRewardCardContainerBase;
}(_react.Component);

LegacyRewardCardContainerBase.propTypes = {
  viewportIsMobile: _propTypes2.default.bool,
  viewportIsSOrLess: _propTypes2.default.bool,
  viewportIsTabletOrLess: _propTypes2.default.bool
};
var styles = exports.styles = {
  disabled: {
    filter: 'grayscale(1) opacity(.4)',
    cursor: 'not-allowed'
  },

  textColor: {
    color: _colorsConfig2.default.font1
  },

  card: {
    borderWidth: 2,
    borderStyle: 'solid',
    borderColor: _colorsConfig2.default.line1,

    paddings: (_paddings = {
      paddingLeft: 20,
      paddingRight: 20

    }, _defineProperty(_paddings, '@media (min-width: ' + _screenConfig.ScreenConfig['S'].min + 'px)', {
      paddingLeft: 30,
      paddingRight: 30
    }), _defineProperty(_paddings, '@media (min-width: ' + _screenConfig.ScreenConfig['M'].min + 'px)', {
      paddingLeft: 40,
      paddingRight: 0
    }), _defineProperty(_paddings, '@media (min-width: ' + _screenConfig.ScreenConfig['L'].min + 'px)', {
      paddingLeft: 115,
      paddingRight: 0
    }), _defineProperty(_paddings, 'tinyVersion', {
      paddingLeft: 20,
      paddingRight: 20
    }), _paddings),

    image: (_image = {}, _defineProperty(_image, '@media (min-width: ' + _screenConfig.ScreenConfig['M'].min + 'px)', {
      paddingRight: 50
    }), _defineProperty(_image, 'tinyVersion', {
      paddingRight: 10
    }), _image)
  },

  textMargin: {
    margin: 0
  },

  infos: {
    lists: (_lists = {
      fontSize: 14

    }, _defineProperty(_lists, '@media (min-width: ' + _screenConfig.ScreenConfig['M'].min + 'px)', {
      fontSize: 16,
      marginRight: 30
    }), _defineProperty(_lists, 'tinyVersion', {
      fontSize: 14,
      marginRight: 0
    }), _lists)
  },

  choiceButton: {
    paddingLeft: 20,
    paddingRight: 20,

    paddings: (_paddings2 = {}, _defineProperty(_paddings2, '@media (min-width: ' + _screenConfig.ScreenConfig['S'].min + 'px)', {
      paddingLeft: 30,
      paddingRight: 30
    }), _defineProperty(_paddings2, 'tinyVersion', {
      paddingLeft: 20,
      paddingRight: 20
    }), _paddings2)
  },

  myContribution: {
    display: 'flex',
    alignItems: 'center',

    text: {
      display: 'flex',
      lineHeight: 'normal'
    }
  },

  iconBadge: {
    marginRight: 10
  },

  image: {
    width: '100%',
    display: 'block'
  }
};

var LegacyRewardCardContainer = exports.LegacyRewardCardContainer = (0, _mediaQueries.mediaQueries)((0, _radium2.default)(LegacyRewardCardContainerBase), {
  viewportIsTabletOrLess: true,
  viewportIsSOrLess: true,
  viewportIsMobile: true
});