import React from 'react';
import PropTypes from 'prop-types';
import Provider from '../../atom/provider';
import style from './style.css';
class PaymentForm extends React.Component {
  static contextTypes = {
    translate: Provider.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.createElement("div", {
      className: style.paymentForm
    }, /*#__PURE__*/React.createElement("div", {
      className: style.acceptedCards
    }, /*#__PURE__*/React.createElement("img", {
      className: style.acceptedCardsCheck,
      src: checkImage
    }), /*#__PURE__*/React.createElement("div", {
      className: style.acceptedCardsText
    }, translate('accepted_cards')), /*#__PURE__*/React.createElement("img", {
      className: style.acceptedCardsImage,
      src: cardsImage
    })), /*#__PURE__*/React.createElement("div", {
      className: style.creditCardOwnerEmail
    }, /*#__PURE__*/React.createElement("hr", {
      className: style.creditCardOwnerEmailSeparator
    }), /*#__PURE__*/React.createElement("div", {
      className: style.creditCardOwnerEmailText
    }, cardOwnerEmail), /*#__PURE__*/React.createElement("hr", {
      className: style.creditCardOwnerEmailSeparator
    })), errors ? /*#__PURE__*/React.createElement("div", {
      className: style.paymentErrors
    }, "-", errors) : null, warning ? /*#__PURE__*/React.createElement("div", {
      className: style.paymentWarning
    }, "-", warning) : null, /*#__PURE__*/React.createElement("div", {
      className: style.securedPayment
    }, /*#__PURE__*/React.createElement("img", {
      className: style.securedPaymentImage,
      src: securedPaymentImage
    }), /*#__PURE__*/React.createElement("div", {
      className: style.securedPaymentText
    }, translate('secured_payment'))), /*#__PURE__*/React.createElement("div", {
      className: style.cardBlock
    }, /*#__PURE__*/React.createElement("div", {
      className: `${style.cardNumber} ${cardNumberHasError && style.invalidElement}`,
      id: "card-number"
    })), /*#__PURE__*/React.createElement("div", {
      className: style.cardBlock
    }, /*#__PURE__*/React.createElement("div", {
      className: `${style.cardExpiry} ${cardExpiryHasError && style.invalidElement}`,
      id: "card-expiry"
    }), /*#__PURE__*/React.createElement("div", {
      className: `${style.cardCvc} ${cardCvcHasError && style.invalidElement}`,
      id: "card-cvc"
    })), /*#__PURE__*/React.createElement("div", {
      className: style.subscriptionDisclaimer
    }, translate('subscription_disclaimer')), /*#__PURE__*/React.createElement("div", {
      className: style.subscribeButtonContainer
    }, /*#__PURE__*/React.createElement("button", {
      className: style.subscribeButton,
      type: "button",
      onClick: this.handleSubmit,
      disabled: !submitButtonEnabled
    }, translate('payment_form_submit'))));
  }
}
PaymentForm.propTypes = process.env.NODE_ENV !== "production" ? {
  stripeKeyPublic: PropTypes.string.isRequired,
  stripeInstance: PropTypes.func.isRequired,
  onSubscription: PropTypes.func.isRequired,
  checkImage: PropTypes.string.isRequired,
  cardsImage: PropTypes.string.isRequired,
  cardOwnerEmail: PropTypes.string,
  securedPaymentImage: PropTypes.string,
  errors: PropTypes.string,
  warning: PropTypes.string,
  onCardNumberChange: PropTypes.func,
  cardNumberHasError: PropTypes.bool,
  onCardExpiryChange: PropTypes.func,
  cardExpiryHasError: PropTypes.bool,
  onCardCvcChange: PropTypes.func,
  cardCvcHasError: PropTypes.bool,
  submitButtonEnabled: PropTypes.bool
} : {};
export default PaymentForm;
//# sourceMappingURL=index.js.map