Pricing.js

const PricingWrap = function ({props}) {
  return <div className="pricing" style={{ opacity: purchasing ? 0.25 : '' }}>
    {props.children}
  </div>
}

const Pricing = React.createClass({
  // ...
  render() {
    // ...

    if (purchaseError) {
      return <PricingWrap>
        <div className="purchase-complete">
          <h2 style={{ color: 'hsl(10, 50%, 50%)' }}>Oops!</h2>
          <p>
            Sorry, there was an unkown error with the server, please try
            again or email us at hello@reactjs-training.com to work out
            payment a different way.
          </p>
          <p>
            <button
              className="cta-button outlined-button"
              onClick={() => this.replaceState(this.getInitialState())}
            >
              Try again
            </button>
          </p>
        </div>
      </PricingWrap>
    }

    if (purchaseComplete) {
      return <PricingWrap>
        <div className="purchase-complete">
          <h2>Thanks!</h2>
          <p>
            Thank you for your purchase of {formatPrice(this.state.total)}.
            We’ll send you a receipt shortly.
          </p>
          <p>
            <button
              className="cta-button outlined-button"
              onClick={() => this.replaceState(this.getInitialState())}
            >
              Buy more tickets
            </button>
          </p>
        </div>
      </PricingWrap>
    }

    if (seatsAvailable) {
      if (promoAvailable) {
        return <PricingWrap>
          <PurchaseBlock
            training={training}
            price={promo}
            regularPrice={regular}
            title={`Promo: ${query.c}`}
            getAvailableSeats={() => getAvailableSeatsWithPromo(training, promo)}
            onPurchase={this.purchaseWithPromo}
          />
        </PricingWrap>
      } else if (earlyBirdAvailable) {
        return <PricingWrap>
          <PurchaseBlock
            training={training}
            price={earlyBird}
            regularPrice={regular}
            title="Early Bird Price"
            getAvailableSeats={() => getAvailableSeats(training)}
            onPurchase={this.purchaseEarlyBird}
          />
        </PricingWrap>
      } else {
        return <PricingWrap>
          <PurchaseBlock
            training={training}
            price={regular}
            title="Ticket Price"
            getAvailableSeats={() => getAvailableSeats(training)}
            onPurchase={this.purchaseRegular}
          />
        </PricingWrap>
      }
    }

    return <PricingWrap>
      <SoldOut training={training}/>
    </PricingWrap>
  }
})