components/MenuItems/Bonus/AddFreeBet.js

import React, { Component } from 'react';
import SVGComponent from '../../SVG/SVGComponent';
import { SVG_ICONS } from '../../../constants';
import { parsePoints } from '../../../utils/common';
import validateFields from '../../../utils/validation';
import Calendar from '../../Calendar';
/**
 * @module MI-Bonus/AddFreeBet
 */
/**
 * @typedef {object} props
 * @property {string} currency
 * @property {Function} setOpenModal
 * @property {Function} addFreeBet
 */
export default class AddFreeBet extends Component {
  constructor() {
    super();

    /**
     * @member {object}
     * @property {string} userId
     * @property {string} stake
     * @property {string} expirationDate
     * @property {string} numFreeBets
     * @property {object} errorMgs
     */
    this.state = {
      userId: '',
      stake: '',
      expirationDate: '',
      numFreeBets: '',
      errorMgs: {},
    };
  }

  /**
   * Save new free bet
   *
   * @function
   * @returns {void}
   */
  handleAddNewFreeBet = () => {
    const validationParams = [
      {
        label: 'Client ID',
        fieldName: 'userId',
        value: `${this.state.userId}`,
        rules: ['mandatory'],
      },
      {
        label: 'Stake',
        fieldName: 'stake',
        value: this.state.stake,
        rules: ['greaterThan'],
        comparatorValue: 0,
      },
      {
        label: 'Date',
        fieldName: 'expirationDate',
        value: this.state.expirationDate,
        rules: ['mandatory'],
      },
      {
        label: 'Number of Free Bets',
        fieldName: 'numFreeBets',
        value: parseInt(this.state.numFreeBets || 0),
        rules: ['betweenXAndY'],
        minValue: 1,
        comparatorMaxValue: 10,
        getValue: (val) => val,
      },
    ];
    validateFields(validationParams)
      .then(() => {
        this.props.addFreeBet({
          userId: this.state.userId,
          numFreeBets: parseInt(this.state.numFreeBets),
          stake: parseInt(this.state.stake) * 100,
          expirationDate: `${this.state.expirationDate}T22:59:59`,
        });
      })
      .catch((errorMgs) => {
        this.setState({ errorMgs });
      });
  };

  /**
   * Clear form data and close modal
   *
   * @returns {void}
   */
  closeModal = () => {
    this.setState({
      userId: '',
      expirationDate: '',
      numFreeBets: '',
      stake: '',
    });
    this.props.setOpenModal({ modal: '' });
  };

  /**
   * Update exparation date field
   *
   * @param {string} value
   * @param {string} field
   * @returns {void}
   */
  changeExparationDate = (value, field) => {
    this.updateField(field, value);
  };

  /**
   * Update stake field
   *
   * @param {Event} e
   * @returns {void}
   */
  updateStake = (e) => {
    const value = e.target.value.replace(/[,.]/g, '');
    this.updateField('stake', parseInt(value) || 0);
  };

  /**
   * Updating state fields
   *
   * @param {string} field
   * @param {Event|number} e
   * @returns {void}
   */
  updateField(field, e) {
    const value = e.target ? e.target.value : e;
    const change = { errorMgs: {} };
    change[field] = value;
    this.setState(change);
  }

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    return (
      <div className="dialog trm open" id="add-freebet">
        <div className="p-20">
          <div className="dialog__heading">
            <span className="dialog-title">Add free bet</span>
            <SVGComponent
              onClick={this.closeModal}
              className="icon-xxs dialog__close"
              src={`${SVG_ICONS.utility}#close`}
            />
          </div>
        </div>
        <div className="dialog__wrapper">
          <div className="dialog__row mt-20">
            <div className="dialog__fields">
              <label className="style-2">Client ID</label>
              <input
                id="userId_AddFreeBet"
                className="form-control"
                value={parseInt(this.state.userId) || ''}
                onChange={this.updateField.bind(this, 'userId')}
              />
              {this.state.errorMgs.userId}
            </div>
          </div>
          <div className="dialog__row">
            <div className="dialog__fields">
              <label className="style-2">Stake</label>
              <div className="dialog__fields-holder">
                <input
                  id="stake_addFreeBet"
                  type="text"
                  className="form-control"
                  value={parsePoints(this.state.stake, ',')}
                  onChange={this.updateStake}
                />
                <div className="dialog__fields-currency">{this.props.currency}</div>
              </div>
              {this.state.errorMgs.stake}
            </div>
          </div>
          <div className="dialog__row">
            <div className="dialog__fields has-calendar">
              <label className="style-2">Expiration Date</label>
              <Calendar
                field="expirationDate"
                filter={{}}
                changeFilter={this.changeExparationDate}
                className="dialog__fields-holder"
                inactivePreviousDates={new Date()}
                selectedTimezone={this.props.selectedTimezone}
                sub
              />
              {this.state.errorMgs.expirationDate}
            </div>
          </div>
          <div className="dialog__row">
            <div className="dialog__fields">
              <label className="style-2">Number of Free Bets to assign</label>
              <input
                id="numFreeBets_addFreeBet"
                className="form-control"
                value={parseInt(this.state.numFreeBets) || 0}
                onChange={this.updateField.bind(this, 'numFreeBets')}
              />
              {this.state.errorMgs.numFreeBets}
            </div>
          </div>
        </div>
        <div className="p-20">
          <div className="dialog__button-wrapper">
            <button id="cancelBtn_addFreeBet" type="button" className="btn btn-secondary" onClick={this.closeModal}>
              Cancel
            </button>
            <button
              id="addBtn_addFreeBet"
              type="button"
              className="btn btn-primary ml-10"
              onClick={this.handleAddNewFreeBet}
            >
              Add Free Bet
            </button>
          </div>
        </div>
      </div>
    );
  }
}