ternary.js

<div className="pricing" style={{ opacity: purchasing ? 0.25 : '' }}>
  <Conditional if={purchaseComplete}>
    <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>
  </Conditional>

  <Conditional if={!purchaseComplete && promoAvailable}>
    <PurchaseBlock
      price={promo}
      regularPrice={regular}
      title={`Promo: ${query.c}`}
      getAvailableSeats={() => getAvailableSeatsWithPromo(training, promo)}
      onPurchase={this.purchaseWithPromo}
    />
  </Conditional>

  <Conditional if={!purchaseComplete && earlyBirdAvailable}>
    <PurchaseBlock
      price={earlyBird}
      regularPrice={regular}
      title="Early Bird Price"
      getAvailableSeats={() => getAvailableSeats(training)}
      onPurchase={this.purchaseEarlyBird}
    />
  </Conditional>

  <Conditional if={!purchaseComplete && (!earlyBirdAvailable && !promoAvailable)}>
    <PurchaseBlock
      price={regular}
      title="Ticket Price"
      getAvailableSeats={() => getAvailableSeats(training)}
      onPurchase={this.purchaseRegular}
    />
  </Conditional>
</div>