import React from 'react';
import reactMixin from 'react-mixin';
import StripeCheckout from 'react-stripe-checkout';

class Store extends React.Component {
  constructor() {
    super();
    this.state = {
    };
  }

  onToken(token) {
    // console.log('stripe token', token);
  }

  render() {
    return (
      <section className="preferences-page">
        <div className="store-package">
          <div className="store-package-info">
            <h3 className="store-package-info__title">
              Social Signals Package
            </h3>
            <div className="store-package-info__description">
              Our social signals package brings you the fastest and most up to date information from the following providers:
              <ul>
                <li>Social Stockr</li>
                <li>Tweetdex</li>
                <li>Dataminr</li>
                <li>PsychSignal</li>
              </ul>
            </div>
          </div>
          <div className="store-package-payment">
            <StripeCheckout token={this.onToken} amount={9900} name={"Benzinga Pro"} currency="USD" stripeKey="pk_test_ZAhdYdmQB388eYC1tQRd5J7I">
              <button className="store-package-payment__button">Buy Package</button>
            </StripeCheckout>
            <div className="store-package-payment__pricing">$99/mo</div>
          </div>
        </div>
        <div className="store-package">
          <div className="store-package-info">
            <h3 className="store-package-info__title">
              Web News Package
            </h3>
            <div className="store-package-info__description">
              Get the latest news from over 100 popular media websites. Perfect for users who need to keep an eye on events outside of just the financial and business spectrum.
            </div>
          </div>
          <div className="store-package-payment">
          <StripeCheckout token={this.onToken} amount={4900} name={"Benzinga Pro"} currency="USD" stripeKey="pk_test_ZAhdYdmQB388eYC1tQRd5J7I">
              <button className="store-package-payment__button">Buy Package</button>
            </StripeCheckout>
            <div className="store-package-payment__pricing">$49/mo</div>
          </div>
        </div>
        <div className="store-package">
          <div className="store-package-info">
            <h3 className="store-package-info__title">
              Technical Trader Package
            </h3>
            <div className="store-package-info__description">
              Technical alerts and signals for your favorite stocks. This package includes not only additional feed sources based on technical alerts but also comes with 3 new widgets
              to help you find the perfect entry points and levels. More widgets are coming soon!
              <ul>
                <li>Technical Screener Widget - Over 50 filters to apply on the entire US Market</li>
                <li>Movers Widget - Realtime alerts on stocks that are hitting important levels</li>
                <li>BZ In-Play - Live commentary from professional market technicians</li>
              </ul>
            </div>
          </div>
          <div className="store-package-payment">
            <StripeCheckout token={this.onToken} amount={29900} name={"Benzinga Pro"} currency="USD" stripeKey="pk_test_ZAhdYdmQB388eYC1tQRd5J7I">
              <button className="store-package-payment__button">Buy Package</button>
            </StripeCheckout>
            <div className="store-package-payment__pricing">$299/month</div>
          </div>
        </div>
      </section>
    );
  }
}

export default Store;