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} total={this.state.total} />
        <PurchaseOuterBlock
          purchaseComplete={purchaseComplete}
          seatsAvailable={seatsAvailable}
          promoAvailable={promoAvailable}
          earlyBirdAvailable={earlyBirdAvailable} />
        {!purchaseError && !purchaseComplete && !seatsAvailable &&
          <SoldOut />}
      </div>
    )
  }
})

const PurchaseError = ({purchaseError, resetState}) => (
  !purchaseError
    ? null
    : (
      <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={resetState}>
            Try again
          </button>
        </p>
      </div>
    )
)

const PurchaseComplete = ({purchaseComplete, resetState, total}) => (
  !purchaseComplete
    ? null
    : (
      <div className="purchase-complete">
        <h2>Thanks!</h2>
        <p>
          Thank you for your purchase of {formatPrice(total)}.
          We’ll send you a receipt shortly.
        </p>
        <p>
          <button
            className="cta-button outlined-button"
            onClick={resetState}>
            Buy more tickets
          </button>
        </p>
      </div>
    )
)

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