gistfile1.txt

import * as React from 'react';
import {connect} from 'react-redux';
import {RouteComponentProps} from 'react-router';
import {emptyDeal} from '../../models/emptyDeal';
import * as fetchDealItemActions from '../../actions/deals';
import * as swalActions from '../../actions/general';
import * as Sticky from 'react-sticky-el';

import {DealForm} from '../../components/Deals/dealForm';
import {IChangeEvent} from 'react-jsonschema-form';
import EditorTile from '../../components/Deals/stateless/editorTile';
import OwnerTile from '../../components/Deals/stateless/ownerTile';
import {CurrencySelect} from '../../components/Deals/views/currency';
import {DatePickerTile} from "../../components/Deals/views/datepicker";
import * as moment from "moment";
import LoadingSpinner from "../../components/Generals/loadingSpinner";
import {createAnErrorCountryMap} from '../../helpers/errorHelper';
import {IndexHelper} from "../../helpers/tabIndexHelper";
import {isNullOrUndefined} from "util";
import {bindActionCreators} from "redux";

export namespace DealCreate {
  export interface Props extends RouteComponentProps<any> {
    dealResultStore?: DealResultStore;
    fetchDealAction?: typeof fetchDealItemActions;
    user?: UserStoreState;
    config?: ConfigStore;
    swalAction?: typeof swalActions
  }

  export interface State {
    deal?: Deal;
    recipient?: Recipient;
    token?: string;
    currency?: string
    startDate?: any
  }
}

let helperObject: Deal = {
  status: '',
  owner: {
    name: '',
    firstName: '',
    eMail: '',
  },
  recipient: {
    eMail: '',
    address: {
      country: ''
    }
  },
  cart: {
    currency: '',
    cartType: ''
  }
};

let helperCurrency: string = '';
let helperExpireDate: any = ''; // there is no type moment!
@connect(null, mapDispatchToProps)
export class DealCreateContainer extends React.Component<DealCreate.Props,
  DealCreate.State> {

  tabIndexCounterRecipient: IndexHelper;

  constructor(props) {
    super(props);

    this.tabIndexCounterRecipient = new IndexHelper(100, 0);

    this.state = {
      startDate: '',
      deal: {
        status: '',
        cart: {
          currency: '',
          cartType: 'CartTypeNet' // default B2B //wenn PPP-213, hier bitte anpassen
        },
        owner: {
          name: '',
          firstName: '',
          eMail: '',
        },
        recipient: {
          eMail: '',
          address: {
            country: ''
          }
        }
      },
      recipient: {
        eMail: '',
        address: {
          country: ''
        }
      }
    };
  }

  //showError in Form
  checkForError() {
    if (document.querySelectorAll('.error-detail').length > 0) {
      return true
    }
  }

  componentDidMount() {
    let inputsToAdd = document.querySelectorAll('.rjsf .form-group input');
    let countrySelect = document.querySelector('#root_recipient_address_country');

    if (!isNullOrUndefined(inputsToAdd)) {
      _.map(inputsToAdd, (elem: HTMLInputElement) => {
        elem.setAttribute('tabindex', this.tabIndexCounterRecipient.indexCounter().toString());
        if (this.tabIndexCounterRecipient.getCounter() === 1) {
          elem.focus()
        }
      });
    }
    if (!isNullOrUndefined(countrySelect)) {
      countrySelect.setAttribute('tabindex', this.tabIndexCounterRecipient.indexCounter().toString());
    }
  }

  handleFormData(e: IChangeEvent) {
    let formData = e.formData;
    helperObject = {...formData};
  }

  getExpireDate(e) {
    helperExpireDate = helperExpireDate = moment(e._d).format("YYYY-MM-DDTHH:mm:ss.SSSZ");
  }

  getCurrency(e) {
    e.preventDefault();
    helperCurrency = e.target.value;
  }

  enrichDealAndSubmit() {
    if (this.checkForError()) {
      this.props.swalAction.openSwalMessage({
        title: "Add Value",
        message: "Please provide email and country",
        swalType: "warning"
      })
    }
    else {
      const {user} = this.props.user;

      let owner = {
        firstName: user.givenName,
        name: user.name,
        eMail: user.preferred_username,
      };

      let editor = {
        name: user.name,
        firstName: user.givenName,
        eMail: user.preferred_username,
      };

      let newDeal: Deal = {...emptyDeal(), ...helperObject};

      if (helperCurrency.length <= 0) {
        newDeal.cart.currency = 'EUR';

      }
      else {
        newDeal.cart.currency = helperCurrency;
      }

      if (helperExpireDate.length <= 0) {
        newDeal.expiresAt = moment().add(30, "days").format("YYYY-MM-DDTHH:mm:ss.SSSZ").toString();
      }
      else {
        newDeal.expiresAt = helperExpireDate;
      }

      newDeal.owner = owner;
      newDeal.editor = editor;
      this.props.fetchDealAction.createDeal(newDeal);
    }
  }

  //--render----------------------------------------------
  render() {
    const {load, success, deal} = this.props.dealResultStore;

    if (load) {
      return (
        <div><LoadingSpinner/></div>
      )
    }

    if (success) {
      let token = deal.paymentToken;
      this.props.history.push('/ppp/deals/' + token);
    }

    let isCountryThere = (this.props.config.success) ? this.props.config.config.countries : createAnErrorCountryMap();

    return (
      <div>
        <Sticky
          stickyStyle={{
            position: 'relative',
            zIndex: '1',
            marginTop: '40px',
          }}
        >
          <div className="card card-accent-primary controls col-12 create-options">
            <div className="row">
              <div className="col-12 card-block">
                <h5>creates a deal</h5>
                <div className="pull-right">
                  <button
                    onClick={this.enrichDealAndSubmit.bind(this)}
                    className="btn btn-success"
                    tabIndex={910}
                  ><i className="fa fa-save"/>&nbsp;create deal
                  </button>
                </div>
              </div>
            </div>
          </div>
        </Sticky>
        <div className="row">
          <div className="col-4">
            <div className="card card-accent-primary">
              <div className="card-block">
                <DealForm
                  fetchDealAction={this.props.fetchDealAction}
                  transportFormData={this.handleFormData}
                  countries={isCountryThere as Map<string, Country>}
                />
              </div>
            </div>
          </div>
          <div className="col-8">
            <div className="row">
              <div className="col-4">
                <div className="card card-accent-primary row currency-row">
                  <div className="card-block">
                    <CurrencySelect
                      onCurrencyChange={this.getCurrency}
                      countries={isCountryThere as Map<string, Country>}
                    />
                  </div>
                </div>
                <div className="card card-accent-primary row currency-row">
                  <div className="card-block">
                    <DatePickerTile
                      deal={this.props.dealResultStore.deal}
                      onExpireDateChange={this.getExpireDate.bind(this)}
                    />
                  </div>
                </div>
              </div>
              <div className="col-4">
                <div className="card card-accent-primary">
                  <div className="card-block">
                    <EditorTile user={this.props.user}/>
                  </div>
                </div>
              </div>
              <div className="col-4">
                <div className="card card-accent-primary">
                  <div className="card-block">
                    <OwnerTile user={this.props.user}/>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

function mapDispatchToProps(dispatch) {
  return {
    swalAction: bindActionCreators(swalActions as any, dispatch)
  };
}