ternary.js

<div className="pricing" style={{ opacity: purchasing ? 0.25 : '' }}>
  {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>
  ) : promoAvailable ? (
    <PurchaseBlock
      price={promo}
      regularPrice={regular}
      title={`Promo: ${query.c}`}
      getAvailableSeats={() => getAvailableSeatsWithPromo(training, promo)}
      onPurchase={this.purchaseWithPromo}
    />
  ) : earlyBirdAvailable ? (
    <PurchaseBlock
      price={earlyBird}
      regularPrice={regular}
      title="Early Bird Price"
      getAvailableSeats={() => getAvailableSeats(training)}
      onPurchase={this.purchaseEarlyBird}
    />
  ) : (
    <PurchaseBlock
      price={regular}
      title="Ticket Price"
      getAvailableSeats={() => getAvailableSeats(training)}
      onPurchase={this.purchaseRegular}
    />
  )}
</div>