Comparison

1.js

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

2.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>
  }
})

3.js

const Pricing = React.createClass({
  // ...
  render() {
    // ...
    //
    return <div className="pricing" style={{ opacity: purchasing ? 0.25 : '' }}>
      <PurchaseError purchaseError={purchaseError} />
      <PurchaseComplete purchaseComplete={purchaseComplete} />
      <PurchaseOuterBlock
        purchaseComplete={purchaseComplete}
        seatsAvailable={seatsAvailable}
        promoAvailable={promoAvailable}
        earlyBirdAvailable={earlyBirdAvailable} />
      { !purchaseError && !purchaseComplete && !seatsAvailable ? <SoldOut /> : null }
    </div>
  }
})

const PurchaseError = function ({purchaseError}) {
  return purchaseError ? <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> : null;
}

const PurchaseComplete = function({purchaseComplete}) {
  return 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> : null;
}

const PurchaseOuterBlock = function({purchaseComplete, seatsAvailable, promoAvailable, earlyBirdAvailable}) {

  if (purchaseComplete || !seatsAvailable) return;

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