"use strict";

exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _provider = _interopRequireDefault(require("../../atom/provider"));
var _style = _interopRequireDefault(require("./style.css"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
class PaymentForm extends _react.default.Component {
  static contextTypes = {
    translate: _provider.default.childContextTypes.translate
  };
  constructor(props) {
    super(props);
    this.stripe = props.stripeInstance ? props.stripeInstance(props.stripeKeyPublic) : null;
    this.handleCardNumberChange = this.handleCardNumberChange.bind(this);
    this.handleCardExpiryChange = this.handleCardExpiryChange.bind(this);
    this.handleCardCvcChange = this.handleCardCvcChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  componentDidMount() {
    if (this.stripe) {
      const elements = this.stripe.elements();
      const elementOptions = {
        style: {
          base: {
            iconStyle: 'solid',
            color: '#546E7A',
            fontSize: '16px',
            fontFamily: 'Gilroy',
            '::placeholder': {
              color: '#546E7A',
              fontSize: '16px',
              fontFamily: 'Gilroy'
            }
          }
        }
      };
      this.cardNumber = elements.create('cardNumber', elementOptions);
      this.cardExpiry = elements.create('cardExpiry', elementOptions);
      this.cardCvc = elements.create('cardCvc', elementOptions);
      this.cardNumber.mount('#card-number');
      this.cardExpiry.mount('#card-expiry');
      this.cardCvc.mount('#card-cvc');
      this.cardNumber.on('change', this.handleCardNumberChange);
      this.cardExpiry.on('change', this.handleCardExpiryChange);
      this.cardCvc.on('change', this.handleCardCvcChange);
    }
  }
  componentWillUnmount() {
    if (this.cardNumer) {
      this.cardNumber.unmount();
      this.cardNumber.off('change', this.handleCardNumberChange);
    }
    if (this.cardExpiry) {
      this.cardExpiry.unmount();
      this.cardExpiry.off('change', this.handleCardExpiryChange);
    }
    if (this.cardCvc) {
      this.cardCvc.unmount();
      this.cardCvc.off('change', this.handleCardCvcChange);
    }
  }
  handleSubmit() {
    const {
      onSubscription
    } = this.props;
    if (this.stripe) {
      return this.stripe.createToken(this.cardNumber).then(response => {
        return onSubscription(response);
      });
    }
  }
  handleCardNumberChange({
    error
  }) {
    const {
      onCardNumberChange = () => {}
    } = this.props;
    onCardNumberChange(error);
  }
  handleCardExpiryChange({
    error
  }) {
    const {
      onCardExpiryChange = () => {}
    } = this.props;
    onCardExpiryChange(error);
  }
  handleCardCvcChange({
    error
  }) {
    const {
      onCardCvcChange = () => {}
    } = this.props;
    onCardCvcChange(error);
  }
  render() {
    const {
      checkImage,
      cardsImage,
      cardOwnerEmail,
      securedPaymentImage,
      errors,
      warning,
      submitButtonEnabled,
      cardNumberHasError,
      cardExpiryHasError,
      cardCvcHasError
    } = this.props;
    const {
      translate
    } = this.context;
    return /*#__PURE__*/_react.default.createElement("div", {
      className: _style.default.paymentForm
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: _style.default.acceptedCards
    }, /*#__PURE__*/_react.default.createElement("img", {
      className: _style.default.acceptedCardsCheck,
      src: checkImage
    }), /*#__PURE__*/_react.default.createElement("div", {
      className: _style.default.acceptedCardsText
    }, translate('accepted_cards')), /*#__PURE__*/_react.default.createElement("img", {
      className: _style.default.acceptedCardsImage,
      src: cardsImage
    })), /*#__PURE__*/_react.default.createElement("div", {
      className: _style.default.creditCardOwnerEmail
    }, /*#__PURE__*/_react.default.createElement("hr", {
      className: _style.default.creditCardOwnerEmailSeparator
    }), /*#__PURE__*/_react.default.createElement("div", {
      className: _style.default.creditCardOwnerEmailText
    }, cardOwnerEmail), /*#__PURE__*/_react.default.createElement("hr", {
      className: _style.default.creditCardOwnerEmailSeparator
    })), errors ? /*#__PURE__*/_react.default.createElement("div", {
      className: _style.default.paymentErrors
    }, "-", errors) : null, warning ? /*#__PURE__*/_react.default.createElement("div", {
      className: _style.default.paymentWarning
    }, "-", warning) : null, /*#__PURE__*/_react.default.createElement("div", {
      className: _style.default.securedPayment
    }, /*#__PURE__*/_react.default.createElement("img", {
      className: _style.default.securedPaymentImage,
      src: securedPaymentImage
    }), /*#__PURE__*/_react.default.createElement("div", {
      className: _style.default.securedPaymentText
    }, translate('secured_payment'))), /*#__PURE__*/_react.default.createElement("div", {
      className: _style.default.cardBlock
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: `${_style.default.cardNumber} ${cardNumberHasError && _style.default.invalidElement}`,
      id: "card-number"
    })), /*#__PURE__*/_react.default.createElement("div", {
      className: _style.default.cardBlock
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: `${_style.default.cardExpiry} ${cardExpiryHasError && _style.default.invalidElement}`,
      id: "card-expiry"
    }), /*#__PURE__*/_react.default.createElement("div", {
      className: `${_style.default.cardCvc} ${cardCvcHasError && _style.default.invalidElement}`,
      id: "card-cvc"
    })), /*#__PURE__*/_react.default.createElement("div", {
      className: _style.default.subscriptionDisclaimer
    }, translate('subscription_disclaimer')), /*#__PURE__*/_react.default.createElement("div", {
      className: _style.default.subscribeButtonContainer
    }, /*#__PURE__*/_react.default.createElement("button", {
      className: _style.default.subscribeButton,
      type: "button",
      onClick: this.handleSubmit,
      disabled: !submitButtonEnabled
    }, translate('payment_form_submit'))));
  }
}
PaymentForm.propTypes = process.env.NODE_ENV !== "production" ? {
  stripeKeyPublic: _propTypes.default.string.isRequired,
  stripeInstance: _propTypes.default.func.isRequired,
  onSubscription: _propTypes.default.func.isRequired,
  checkImage: _propTypes.default.string.isRequired,
  cardsImage: _propTypes.default.string.isRequired,
  cardOwnerEmail: _propTypes.default.string,
  securedPaymentImage: _propTypes.default.string,
  errors: _propTypes.default.string,
  warning: _propTypes.default.string,
  onCardNumberChange: _propTypes.default.func,
  cardNumberHasError: _propTypes.default.bool,
  onCardExpiryChange: _propTypes.default.func,
  cardExpiryHasError: _propTypes.default.bool,
  onCardCvcChange: _propTypes.default.func,
  cardCvcHasError: _propTypes.default.bool,
  submitButtonEnabled: _propTypes.default.bool
} : {};
var _default = exports.default = PaymentForm;
//# sourceMappingURL=index.js.map