<commit_before>import PropTypes from 'prop-types'
import React, { Component } from 'react'
import Scroll from 'react-scroll'
import YouTube from 'react-youtube'
import { connect } from 'react-redux'

import { register } from '../actions/auth'
import { RegistrationForm } from './'

const videoOptions = {
  playerVars: {
    autoplay: 0,
    cc_load_policy: 0,
    controls: 0,
    disablekb: 1,
    fs: 0,
    iv_load_policy: 3,
    modestbranding: 1,
    playsinline: 1,
    showinfo: 0,
    rel: 0,
  },
}

const videoId = 'KRYVH7fGa68'

class RegistrationWizard extends Component {
  static propTypes = {
    errorMessage: PropTypes.string.isRequired,
    form: PropTypes.object,
    isLoading: PropTypes.bool.isRequired,
    register: PropTypes.func.isRequired,
  }

  static defaultProps = {
    form: {},
  }

  onPayPalCheckout() {
    this.setState({
      isCheckoutClicked: true,
    })

    this.props.register('paypal', this.props.form.values)
  }

  onTransferCheckout() {
    this.setState({
      isCheckoutClicked: true,
    })

    this.props.register('transfer', this.props.form.values)
  }

  onTermsAcceptedChanged() {
    this.setState({
      isTermsAccepted: this.refs.termsCheckbox.checked,
    })
  }

  onVideoEnd() {
    this.setState({
      isVideoFinished: true,
    })
  }

  renderSuccess() {
    return (
      <div className="form left">
        <h1>Hurra!</h1>
      </div>
    )
  }

  renderErrorMessage() {
    if (this.props.errorMessage) {
      Scroll.animateScroll.scrollToTop()

      return (
        <div className="form__error">
          { this.props.errorMessage }
        </div>
      )
    }
    return null
  }

  renderPaymentButtons() {
    if (this.state.isCheckoutClicked && this.props.isLoading) {
      return (
        <p>Loading ...</p>
      )
    }

    return (
      <div className="button-group">
        <button
          className="button button--rainbow"
          disabled={!this.state.isTermsAccepted || this.props.isLoading}
          onClick={this.onPayPalCheckout}
        >
          Pay via PayPal
        </button>
        <button
          className="button button--rainbow"
          disabled={!this.state.isTermsAccepted || this.props.isLoading}
          onClick={this.onTransferCheckout}
        >
          Pay via Transfer
        </button>
      </div>
    )
  }

  renderPaymentGateway() {
    return (
      <div className="form left">
        <h1>Registration (Step 3/3)</h1>
        { this.renderErrorMessage() }
        <h2>Payment</h2>
        <p>Last step!</p>
        <p>
          The participation fee is <strong>25,00 Euro</strong>. We will provide you with daily breakfast and the tools to organize yourself during HOFFNUNG 3000.
        </p>
        <p>
          You can pay via PayPal to get direct access or choose to transfer the money via wire-transfer if you prefer this. We will enable your account after your money arrived on our bank-account.
        </p>
        <hr />

        <h2>Agreements</h2>
        <p>
          We want to make sure you read our terms before you sign up.
        </p>
        <ul>
          <li>
            As a participant you are liable for your own gear and instruments. As the host we dont take any responsibily for possible damage through accidents or usage of other participants.
          </li>
          <li>
            With a cancellation until the 01.08. we will pay you the full participation fee. After this date this is not anymore possible anymore.
          </li>
        </ul>
        <div className="form__field form__field--inline">
          <input
            checked={this.state.isTermsAccepted}
            className="form__field-input"
            disabled={this.props.isLoading}
            ref="termsCheckbox"
            type="checkbox"
            onChange={this.onTermsAcceptedChanged}
          />
          <label className="form__field-label">
            I agree with the terms
          </label>
        </div>
        <hr />

        { this.renderPaymentButtons() }
        <hr />

        <button<commit_msg>Update RegistrationWizard.js<commit_after>import PropTypes from 'prop-types'
import React, { Component } from 'react'
import Scroll from 'react-scroll'
import YouTube from 'react-youtube'
import { connect } from 'react-redux'

import { register } from '../actions/auth'
import { RegistrationForm } from './'

const videoOptions = {
  playerVars: {
    autoplay: 0,
    cc_load_policy: 0,
    controls: 0,
    disablekb: 1,
    fs: 0,
    iv_load_policy: 3,
    modestbranding: 1,
    playsinline: 1,
    showinfo: 0,
    rel: 0,
  },
}

const videoId = 'KRYVH7fGa68'

class RegistrationWizard extends Component {
  static propTypes = {
    errorMessage: PropTypes.string.isRequired,
    form: PropTypes.object,
    isLoading: PropTypes.bool.isRequired,
    register: PropTypes.func.isRequired,
  }

  static defaultProps = {
    form: {},
  }

  onPayPalCheckout() {
    this.setState({
      isCheckoutClicked: true,
    })

    this.props.register('paypal', this.props.form.values)
  }

  onTransferCheckout() {
    this.setState({
      isCheckoutClicked: true,
    })

    this.props.register('transfer', this.props.form.values)
  }

  onTermsAcceptedChanged() {
    this.setState({
      isTermsAccepted: this.refs.termsCheckbox.checked,
    })
  }

  onVideoEnd() {
    this.setState({
      isVideoFinished: true,
    })
  }

  renderSuccess() {
    return (
      <div className="form left">
        <h1>Hurra!</h1>
      </div>
    )
  }

  renderErrorMessage() {
    if (this.props.errorMessage) {
      Scroll.animateScroll.scrollToTop()

      return (
        <div className="form__error">
          { this.props.errorMessage }
        </div>
      )
    }
    return null
  }

  renderPaymentButtons() {
    if (this.state.isCheckoutClicked && this.props.isLoading) {
      return (
        <p>Loading ...</p>
      )
    }

    return (
      <div className="button-group">
        <button
          className="button button--rainbow"
          disabled={!this.state.isTermsAccepted || this.props.isLoading}
          onClick={this.onPayPalCheckout}
        >
          Pay via PayPal
        </button>
        <button
          className="button button--rainbow"
          disabled={!this.state.isTermsAccepted || this.props.isLoading}
          onClick={this.onTransferCheckout}
        >
          Pay via Transfer
        </button>
      </div>
    )
  }

  renderPaymentGateway() {
    return (
      <div className="form left">
        <h1>Registration (Step 3/3)</h1>
        { this.renderErrorMessage() }
        <h2>Payment</h2>
        <p>Last step!</p>
        <p>
          The participation fee is <strong>25,00 Euro</strong>. As a participant at the festival we will provide you with a daily breakfast and the tools to organise yourself during HOFFNUNG 3000 (these features will be available on the 23rd of July).
        </p>
        <p>
          You can pay via PayPal to get direct access or choose to transfer the money via wire-transfer if you prefer this. We will enable your account after your money arrived in our bank-account. You will get an email when this happens.
        </p>
        <hr />

        <h2>Agreements</h2>
        <p>
          We want to make sure you read our terms before you sign up:
        </p>
        <ul>
          <li>
            As a participant you are liable for your own gear and instruments. As hosts we don't take any responsibility for possible damage through accidents or usage by other participants.
          </li>
          <li>
            If you cancel before the 1st of August we will refund your full participation fee. After this date we can no longer give refunds.
          </li>
        </ul>
        <div className="form__field form__field--inline">
          <input
            checked={this.state.isTermsAccepted}
            className="form__field-input"
            disabled={this.props.isLoading}
            ref="termsCheckbox"
            type="checkbox"
            onChange={this.onTermsAcceptedChanged}
          />
          <label className="form__field-label">
            I agree with the terms
          </label>
        </div>
        <hr />

        { this.renderPaymentButtons() }
        <hr />

        <button
{'fraction_non_alphanumeric': 0.10594190671326986, 'fraction_numerical': 0.008316258888754972, 'mean_word_length': 2.1032161555721767, 'pattern_counts': {'":': 0, '<': 95, '<?xml version=': 0, '>': 93, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4219486', 'n_tokens_mistral': 2506, 'n_tokens_neox': 2432, 'n_words': 645}