@codementor/ui-kit
Version:
270 lines (215 loc) • 16.5 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.paypalImage = exports.defaultCardImage = exports.CARD_IMAGE = exports.SUPPORTED_PAYMENT_METHODS = undefined;
var _keys = require('babel-runtime/core-js/object/keys');
var _keys2 = _interopRequireDefault(_keys);
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require('babel-runtime/helpers/createClass');
var _createClass3 = _interopRequireDefault(_createClass2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _style = require('styled-jsx/style');
var _style2 = _interopRequireDefault(_style);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _reactFontawesome = require('@fortawesome/react-fontawesome');
var _reactFontawesome2 = _interopRequireDefault(_reactFontawesome);
var _faPlus = require('@fortawesome/fontawesome-free-solid/faPlus');
var _faPlus2 = _interopRequireDefault(_faPlus);
var _CircularProgress = require('./CircularProgress');
var _CircularProgress2 = _interopRequireDefault(_CircularProgress);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/* babel-plugin-inline-import '../static/payment/card_visa.png' */var visaImageSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAwCAMAAACxOw3FAAAAe1BMVEUAAAApNXwmM3omM3smM3omM3omM3omM3smM3soNIEoM3wmM3r///7q6/I7R4fc3upKVZA0QIJxeqi8wNbHyt2wtc9/h7FVX5frly3z9PiepMSSmbxcZpuIkLbj5e7S1ePXjTVibJ+OaFLiz7vFmGldT2TIhjvi08XSt6CbIB0uAAAAC3RSTlMAK56Rve3ZdFQVOtYUxg4AAAHMSURBVEjH7ZfdboMwDIXTH7q2ToAAI7SlsP6s2/s/4ewD6SrtJlMzaRecC5OA8sX2AQRKNFusEnpOyfJF3bWgKErWI29JsbSOmR+0lf5RRC2RYEzNlFpFBbLVSVTgQimKqvkEnIA/laa/Bp7fRLd3TEpjTEscKpkV/U5rnZ1ALjtjjgFAIJumucko5/UGsSSyvR5UEOtVRmVoyVcmyvHAiw5UIFKlR+WSIEYmFFhdmkZq7nhRCmxBLcfOcdYHv5VcDAQe9KU5EzNQVYmsjhxfycto3cs+gUCn9ed56BM7kPGBULjeWxJh0so8EEjs5hWx44nGwRp0rR56wmbLRlUYEFV+II0jeZPJgYhhLlekgF0gEA1zYqvl8nxpKRMGw/fwo5beBgJzgYgLI7weT2daarU7js4JsAgCwkWoHW9h97CRkdS89mFAUJAMq0flx9rSUGslbnj1ocBCi+rRcQNsN4DaVtLMWFJGKBCP1s6Oo0qwo2rc6Ce/qwsEUuYfjBM65Z/k0mEHc+9oHQq0LP8KTIfl7Sn3J74v2f/2xp6AE5Bo8QdfsPOowK1S25i8VdT/Hv/ns1nFtATEZTRHvNYRkMl8ph61mT2njQd9AR6aporOC4uLAAAAAElFTkSuQmCC';
/* babel-plugin-inline-import '../static/payment/card_master_card.png' */var masterImageSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAwCAMAAACxOw3FAAABX1BMVEUAAAAAAGoAAGYAAGcAAGYAAGYAAGsAAGYAAGYAAGYAAGcAAGYAAGgAAGYAAGYAAGb/mQDMAAD////jRwDwbgD6iwDp6PDPzuEpGVX49/h4BCyWABvTFQTz8fXebnAQBF5nADKMBSH16+nDwdiPjbmuaiXFdhfPfBPwjwXCAAXq4uOrq8x6X5EaEFspAFE5Ik/+rTSlABPligzd2+jn1dn25Mzpxstubqjwxo23SVv+t044AElKLEhaN0V1FkFVBUDYPDt3STqHUTCZXCjBHR/agg+yBQ67AAj4lQLIAALWJQHAuM3Hr62Lg6zioqaziKEdAFfbSkqNWkFlDzzVLS2CACS7aRmBd6OhgZqbcpbXk4i7b4KVVnr9xHBtOG2PRmveYGGHMllEAEOiYif+oxzgxM2cnMPl0LzWuJtVUJSZfn98XX2KYFSaJECHIjCrPBm0oJ9bU4dDLHTrnTHTJCQjHi5TAAAAD3RSTlMAKx2A9l0R5NK9rHI3k0hKDB+SAAADHklEQVRIx62XB1PiQBiGc5z1TmXznhdK6L13FQEFAcGuINj7Wc9y9f/P7QE6iEuCQ54ZhmQz88yX2Z3v/cI1GBwdVvfHwMj4GPfMGLUpwaehpm9iQK0QIw2jSjEfrZGjfFIryATHDdE/RUscVFQ4wHGf1YoyxH3s+swcSl+ktzoWteG5TDjYXajqJgxZSnyDZTFrfl6cc3pIg1gh8z5hSOTb8Foaiwsx0oY78w6hnu+gnFZr3aQDp7lHoVnk37D85CFvWNT2Jozyb1khLDzBXoRWniVcWdlhGN09CC0sn4Gy4mEYv8kKzV6G7wvpSlhOqOdZwiaLDKFLTrjMd+cHYaCVFl6wRJNfW7CEC9LCOj87PW2gv9yLLpebfMYTW/PZjttP4lTSLS2M8utA0Q/UKqYzA18zmR6FRI2vmP7ytUqxqoFGk4wcH1+SVCRCIqkHJJekheWyX8CjUdCdApieBUAvTGuArrhqFGaw5io4Qe+cOtvUT8CHFDFLCnkxvor9eDwxP5/1w4HTpxPsHWH/Nw41cPjx/+g9LOziO4x7sP8SECFaaaEem9BsYmPWB9juYKsEkHPAJuBQlxA1Nir8kwCo8HYdqR07iIywfIIjI46wqbOfGK/qd4LNgeI1AoHAOQ5EOy5JTCPc27GLlAMRp9FHZF45GsC58SqAfWzsYcM0q9H5YZrBxtnBPc5KM5hKrglTBzqfA5f0ZhU3RGZT9OvQC6Z1nNthxyagO5xBIusHfLvI8XPXwK0D8fjNqpHM0S1HkrikhWmLGNUvW6xey7yot27Pi7x1u2SgFyW91VAkzoXqUqHqyrvzbuLJV515mYNNYfcGCbR9NIclhm9Hth96++gNTGG2a3tgFVjoIQLqrI5NOwNh4OoxpFiwIiUmEVIyMeXd9jAiKthr0Fs6+3YppA66JAJKdhTZelVkOducbF5liiv8vmFpyxJtvWz94mUxU4i1OnWe6thCqflwK5QOdc4vQW0mrJWaD5WfYFWKCkc5jhtVUjhIhWMK+kaoT8mxfVjV+nQcUKg+6muiGh9WYD8GuXaGPvTHS3H/ACn8JT2BDgJsAAAAAElFTkSuQmCC';
/* babel-plugin-inline-import '../static/payment/card_american_express.png' */var aeImageSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAwCAMAAACxOw3FAAAAWlBMVEUAAAAAdtAAcs4Acs8Acs8Acs4Ac88Ac88AdNYAcs5Ond3///+CuuddpeCQweq82vLo8vv3+v4SfNHU5/ev0vDf7fnw9/wyjdcghNRnq+LG3/Q+lNpyseSeyeyowF4tAAAACXRSTlMAK57fkb1xSBGPujlFAAACYUlEQVRIx+2X2W7bMBREkzjb8JIixX39/9/spWUn6YutIiqKAjmwZySQOKBFCJYezjw+n/BNTi+v7w9XnnEIp7eL7wVH8Xrg+jYe5/XDgbxsCzx2iafZR15FHMrz0cKnH+HxQsGkGRbid1qeQ7ZtZ/ka7bZQ0bpSmCET58rfa1LkivP4Y47jcLeFbgCDNCCNd0DRYFKYaZeAZS0WyQGdzBbytrBRYlho7UrFTqHUugZ07a1l4YLudbHCRgMLd1foK8aCyhqMyMFC0fsSUPywjYUtExn0ioVdtt0VBgUpITR0yxJmClNrPWDipzARSfTFZoNlQN4TVticLQa0BxRNoSaigEExZRYW1JixzVmo4Z5QwRE5JNZkPvzclKGNsiwMGYAnikgsdHeFQ5MQpL030elI3hnP6NUHH5znorV6v/Y0K4RVe3dbKBc5g1Hz8wUlz1XEbKCcTxRH/2f3srqQkc7N99lnMS19ZN4jtBTNJDqxbge0xmvNXolzPafYJ9ymZUMedtvrMisHNUtqy7n4mdgpzLVWb5OHWODrQC+2VgmpuKpp1mttUtZat51Cq5QyFWjrgHaehRhDQSvwQFUQZYkCqixir1AIYZyForH91gJrkaICD+jYRUIxM7FTmGKMzmaJPlCDISqWSGOozANzaxzEzN3CrQNJJARfWmThMFi2TTmnn2nzPqHTk+A6ca0dMK6SXHWYA+eshmZGtUcIeSFDzWpAnyW/0FuZpez//Tf6I/xjnv/CE+wTjoRfVd5wIKdj33vmApn305Fbcja+HLYjV94OUJ6eHh++8vhN3i+eXwncmQmt90jYAAAAAElFTkSuQmCC';
/* babel-plugin-inline-import '../static/payment/card_discover.png' */var discoverImageSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFIAAAAwCAMAAAC1zt34AAAAh1BMVEUAAADngzrqkVXvfz7nezXxfTvoh0XzejnqjVHsj1Psj1PrikzpgkD////mdy8aGRnzupbph0e3trbrjlJaWVlKSko+PT2lpaXOzc2IiIj75NXl5eVvb28mJSXy8vL98OjBwcGZmJj7+Pba2tr1xKXunGf30bg0MzOrq6t/fn7wp3nogDxjY2MvDsTaAAAADXRSTlMAV5Uk/j81EeXQh2OyMvAhkgAAAk9JREFUSMftl9uS2jAMQGkxy62SkuAkzv2eAOH/v68SgS3TTthl1n3b84A9jH0kWVzixcRuM+LXUO52tfjDykUrbNd3417hoS/ga9SxM6J7cy4VOmCD4oCbSbnFM9ihGHEvxjWqAizRTmnusQNbFKhEuUMHrDGiNOinTaWLy2/lt9KuMgzDMuExCQ1AGYUyhyY8VTIpekd+rUp59zp4IdMkYXgs55UkpAl4FEHK08xALiNpAEchonIgpBQA8iyrfWIqj5ghmVUGTXkhv2ZlQ0GSV8BmbfLyBC1OOHWW5QAVB/XJNE3u0SlJKZ1X8stFIkeGhgYADPkgFAonVBERRwooYSW7gZWy6qnS0EUK10S6hIr3Cz3e6RNeVUpaPgVBUHqUepqip8qGfFGCx9JjRMe/lC2XUWoyotRaG0/OPIKnyopOorzWpDkHEGK8E0uZUuh74WmQNU+Vx2xIpD1pzasvdUCh7IMOJ7qri7wH5clQkM8qsyCTTw4rK8quO81Ag59p+acSDgVwVBoAbmcZSnsiuswptdZpxQGNPsJRD77kkkc8kQNtO7ebFtZDBcxJM57RXEaqy//5hXyzrRxxZVfZu2hXGXeIVpUitKoUoVWlCK0q+wOiTWXduog2lfFZIVpU1q1UbE85JWhRGTsuzrB6/flSfAecZ3l9Cj7b8gnXCwWO9Sf70Z9d/AC1EDafqjxuO4UKP+LXdDdT2MJTinYmvZkkped4jmezm9HN9ntipxDHw7+4o8JXUGK8sdxauJgqOcdH1m8P/Hid1fst9zdVmtMFiHNyOwAAAABJRU5ErkJggg==';
/* babel-plugin-inline-import '../static/payment/card_unknown.png' */var unknowmImageSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFIAAAAwBAMAAABwPjD5AAAAHlBMVEUAAAAAtuMAt+IAteIAteIAteIANkgAteIANkj5+fl1kX/aAAAAB3RSTlMAkyzz1r/W25157QAAAH9JREFUOMtjYGBQdC4nAIodFRiAgLGcCFAIUhleTgwIQBhJ2FD1cuKAAoM4kSoFGDI6iAMJDB1EgoYRrbKcSFAwXFXORAVQgZGhcqjEES1UIjIBiAnhEq+Szu5EcgNpKuniTnMiVRowuBOp0oH4GoH4Wobomov42pCEGpb4WhsA9FiqGDOMvtUAAAAASUVORK5CYII=';
/* babel-plugin-inline-import '../static/payment/ic_paypal.png' */var ppImageSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAflBMVEUAAAAqS5cJNIlPaamPrdINN4ofp+NBr+FnoNAHNIgsq+MHnuALn981V51BYaMSO40OoeAXpOEaQZErrOIPOYwbQ5Eip+EmSpUUo+AiRpUkqOJNvOgALoYAnN8BH2kBMIoBouUBJG8AJ3gFgsYGYagFSpYEkdQFcbgEis0DL3cQ7iNSAAAAHHRSTlMAV/IgDeaaNRX5YfrsRS3H2rKqTNmXh3bChHsimUh/wwAAAT5JREFUSMftktlugzAQRQ2YsKcQlrYpjgfClv//wYYSq8kEj5HaxxyJN46sObrsxR/ZWw8ke24yEls+ErgHi7Y+ZY2Rskgo5bAoSAosQnlbFIzraA3frVeRpb5XUK9TaBNYUqPYzpZg7d0nlUIEa053NE3rcmOwEyLYcUOwFis9ZJwM9qyMACEdrEHGZRDwsaq865QOhIh9MtjzI0JEX3QwfMlViZFCBuvETMo3B2vGWdCcn6xc3/QTLMqRDKZ2cum7SdyIvDWlVEp3npmunUAZkJEL6wVC+whXwToQGDjSCxsBC1AxRgY7YyHFk8TB5PD7M0AUZyFnGkp8fRrmee6hNZLBIGQGeKGCoa56HBsFi32TYuFgKTORuPbCgCZC4Ds/ePFNqdhWvAgFMxOquXiblQoWUDAKb7eQsxf/xDcTTV6tA+GtewAAAABJRU5ErkJggg==';
var SUPPORTED_PAYMENT_METHODS = exports.SUPPORTED_PAYMENT_METHODS = {
CREDIT_CARD: 'credit_card',
PAYPAL: 'paypal'
};
var CARD_IMAGE = exports.CARD_IMAGE = {
Visa: visaImageSrc,
MasterCard: masterImageSrc,
'American Express': aeImageSrc,
Discover: discoverImageSrc
};
var defaultCardImage = exports.defaultCardImage = unknowmImageSrc;
var paypalImage = exports.paypalImage = ppImageSrc;
var PaymentMethodRadioGroup = function (_PureComponent) {
(0, _inherits3.default)(PaymentMethodRadioGroup, _PureComponent);
function PaymentMethodRadioGroup(props) {
(0, _classCallCheck3.default)(this, PaymentMethodRadioGroup);
var _this = (0, _possibleConstructorReturn3.default)(this, (PaymentMethodRadioGroup.__proto__ || (0, _getPrototypeOf2.default)(PaymentMethodRadioGroup)).call(this, props));
_initialiseProps.call(_this);
_this._onSelect = _this._onSelect.bind(_this);
// multiple groups in one page could happen
_this.radioGroupKey = Math.random();
return _this;
}
(0, _createClass3.default)(PaymentMethodRadioGroup, [{
key: 'render',
value: function render() {
var _props = this.props,
currentCard = _props.currentCard,
defaultMethod = _props.defaultMethod,
allowPaypal = _props.allowPaypal;
var hasCard = this._hasCard();
var cardInputProps = this._getCardInputProps();
return _react2.default.createElement(
'div',
{
className: 'jsx-1204593774' + ' ' + 'method-selector__options'
},
_react2.default.createElement(
'label',
{
className: 'jsx-1204593774' + ' ' + ((0, _classnames2.default)('selector__method', {
'selector__method--disabled': !hasCard
}) || '')
},
_react2.default.createElement('input', (0, _extends3.default)({}, cardInputProps, {
className: 'jsx-1204593774' + ' ' + (cardInputProps.className != null && cardInputProps.className || '')
})),
hasCard ? _react2.default.createElement('img', {
src: CARD_IMAGE[currentCard.brand] || defaultCardImage, className: 'jsx-1204593774' + ' ' + 'selector__card-icon'
}) : _react2.default.createElement(
'div',
{
className: 'jsx-1204593774' + ' ' + 'selector__add-card-icon'
},
_react2.default.createElement(_reactFontawesome2.default, { icon: _faPlus2.default, color: '#fff' })
),
hasCard ? _react2.default.createElement(
'div',
{
className: 'jsx-1204593774' + ' ' + 'selector__method__title'
},
currentCard.brand + ' \u2022\u2022\u2022\u2022 ' + currentCard.last4
) : _react2.default.createElement(
'div',
{
className: 'jsx-1204593774' + ' ' + 'selector__method__title'
},
_react2.default.createElement(
'div',
{
className: 'jsx-1204593774'
},
'Credit Card'
),
_react2.default.createElement(
'div',
{
className: 'jsx-1204593774' + ' ' + 'selector__method__subtitle'
},
'Powered by Stripe'
)
),
this._renderCreditCardAction()
),
allowPaypal && _react2.default.createElement(
'label',
{
className: 'jsx-1204593774' + ' ' + 'selector__method'
},
_react2.default.createElement('input', {
type: 'radio',
name: this.radioGroupKey,
value: SUPPORTED_PAYMENT_METHODS.PAYPAL,
onChange: this._onSelect,
defaultChecked: defaultMethod === SUPPORTED_PAYMENT_METHODS.PAYPAL, className: 'jsx-1204593774'
}),
_react2.default.createElement('img', { src: paypalImage, className: 'jsx-1204593774' + ' ' + 'selector__method-image'
}),
'Paypal'
),
_react2.default.createElement(_style2.default, {
styleId: '1204593774',
css: '.method-selector__options.jsx-1204593774>label.jsx-1204593774+label.jsx-1204593774{margin-top:5px;}.selector__method.jsx-1204593774{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:3px;border:solid 1px #e1e6e6;padding:0px 15px;min-height:50px;font-size:14px;color:#4c4c4c;}.selector__method.jsx-1204593774:hover{background-color:rgba(216,216,216,0.2);border:solid 1px #ccc;}.selector__method.jsx-1204593774:active{background-color:#f0f0f0;border:solid 1px #ccc;}.selector__method--loading.jsx-1204593774:after{content:\'\';vertical-align:middle;margin-right:8px;}.selector__method__title.jsx-1204593774{-webkit-flex:1;-ms-flex:1;flex:1;}.selector__method__subtitle.jsx-1204593774{font-size:12px;line-height:1.17;color:#666;}.selector__method.jsx-1204593774 a{color:#00b5e2;font-weight:bold;cursor:pointer;}.selector__method.jsx-1204593774 input.jsx-1204593774{-webkit-flex:none;-ms-flex:none;flex:none;margin:0;}.selector__method.jsx-1204593774 img.jsx-1204593774{margin:0 15px;}.selector__method-image.jsx-1204593774{height:25px;}.selector__card-icon.jsx-1204593774{width:40px;height:24px;}.selector__add-card-icon.jsx-1204593774{margin:0 15px;width:40px;height:24px;border-radius:4px;background-color:#666;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.selector__method--disabled.jsx-1204593774{cursor:default;border:solid 1px rgba(225,230,230,0.4);}.selector__method--disabled.jsx-1204593774>div{opacity:0.6;}'
})
);
}
}, {
key: '_renderCreditCardAction',
value: function _renderCreditCardAction() {
var _props2 = this.props,
openStripeModal = _props2.openStripeModal,
isUpdatingCard = _props2.isUpdatingCard;
var hasCard = this._hasCard();
if (isUpdatingCard) {
return _react2.default.createElement(_CircularProgress2.default, null);
}
return _react2.default.createElement(
'a',
{ onClick: openStripeModal },
hasCard ? 'CHANGE CARD' : 'ADD CARD'
);
}
}, {
key: '_hasCard',
value: function _hasCard() {
var currentCard = this.props.currentCard;
return currentCard && (0, _keys2.default)(currentCard).length > 0;
}
}, {
key: '_onSelect',
value: function _onSelect(e) {
var onSelect = this.props.onSelect;
onSelect({
method: e.target.value
});
}
}]);
return PaymentMethodRadioGroup;
}(_react.PureComponent);
var _initialiseProps = function _initialiseProps() {
var _this2 = this;
this._getCardInputProps = function () {
var hasCard = _this2._hasCard();
var _props3 = _this2.props,
method = _props3.method,
defaultMethod = _props3.defaultMethod;
var methodKey = SUPPORTED_PAYMENT_METHODS.CREDIT_CARD;
var props = {
type: 'radio',
name: _this2.radioGroupKey,
value: methodKey,
onChange: _this2._onSelect,
disabled: !hasCard
};
if (defaultMethod) {
props.defaultChecked = defaultMethod === methodKey;
} else if (method) {
props.checked = method === methodKey;
}
return props;
};
};
PaymentMethodRadioGroup.propTypes = {
openStripeModal: _propTypes2.default.func.isRequired,
onSelect: _propTypes2.default.func.isRequired,
defaultMethod: _propTypes2.default.string,
method: _propTypes2.default.string,
isUpdatingCard: _propTypes2.default.bool,
allowPaypal: _propTypes2.default.bool,
currentCard: _propTypes2.default.object
};
PaymentMethodRadioGroup.defaultProps = {
allowPaypal: true
};
exports.default = PaymentMethodRadioGroup;