@wenn/onb/hoc/spainHOC/index.js

onb-core

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { reduxForm, change } from 'redux-form'
import { saveCamunda, sendToCamunda } from '../../redux/actions/camunda.actions'
import { saveFakeCamunda } from '../../redux/actions/fakeCamunda.actions'

const SpainHOC = Component => {
  class Spain extends React.Component {
    state = {
      paylands: {
        instance: null,
        fieldsAreValid: false,
        errorMessage: ''
      }
    };

    handleOnSend = e => {
      e.preventDefault();
      if ( process.env.REACT_APP_ENV === 'dev' || process.env.REACT_APP_ENV === 'stage' ) {
        this.state.paylands.instance.storeSourceCard(true, '4E144D76-3C8D-4BED-9C75-DEC592DAFE14');
      } else {
        this.state.paylands.instance.storeSourceCard(true, '2D8D13B2-D7C9-4408-8194-91B4C93D65FD');
      }
    };

    /**
     * @function [initialized]
     * @description Removes loading image
     */
    initialized = () => {
      const node = document.getElementById('paylandifr');
      setTimeout(() => node.removeChild(node.firstChild), 500);
    };

    /**
     * @function [sendAnalyticsError]
     * @description Sends error description to Google Analytics
     * @param error
     */
    sendAnalyticsError = error => {
      window.dataLayer &&
      window.dataLayer.push({
        event: 'paylands-error',
        value: JSON.stringify(error)
      });
      this.setState({
        paylands: { errorMessage: 'Los datos ingresados son inválidos. Por favor, ingreselos nuevamente.' }});
    };

    /**
     * @function [errorHandler]
     * @description Handles every type of error
     */
    errorHandler = (event) => {
      if(event && event.data && (event.data.error || event.data.errors)) {
        this.sendAnalyticsError(event.data.error || event.data.errors);
      }
      if (event.data.errors) {
        switch(event.data.errors[0]) {
          case "cardPan":
            this.setState({ paylands: { errorMessage: 'Número de tarjeta inválido.' }});
            break;
          case "cardCode":
            this.setState({ paylands: { errorMessage: 'Código CVV inválido.' }});
            break;
          case "cardExpiryDate":
            this.setState({ paylands: { errorMessage: 'Fecha de expiración inválida.' }});
            break;
          default:
            this.setState({ paylands: { errorMessage: `${event.data.errors[0]}` }});
        }
      }
    };

    /**
     * @function [loader]
     * @description Loads iframe and the socket number is saved as an userID
     */
    loader = () => {
      this.setState(({ paylands: { instance: global.paylands }}));
      if ( process.env.REACT_APP_ENV === 'dev' || process.env.REACT_APP_ENV === 'stage' ) {
        this.state.paylands.instance.setMode("sandbox");
      }
      this.state.paylands.instance.initializate(this.props.userName, 'paylandifr');
    };

    /**
     * @function [validation]
     * @description Instantor validates if the inputs are empty
     */
    validation = (fields) => {
      if(fields && fields.data) {
        this.setState({ fieldsAreValid: Object.values(fields.data).every(f => f.valid) });
      }
    };

    saveCard = (event) => {
      const {
        formData: { values },
        saveCamunda
      } = this.props;
      saveCamunda(values);
    };

    /**
     * @function [addPaylandsEventListeners]
     * @description Events are added
     */
    addPaylandsEventListeners = () => {
      window.addEventListener('paylandsLoaded', this.loader);
      window.addEventListener('initiated', this.initialized);
      window.addEventListener('validation', this.validation);
      window.addEventListener('error', this.errorHandler);
      window.addEventListener('errorServer', this.errorHandler);
      window.addEventListener('keyPressed',  () => this.state.paylands.instance.validate());
      window.addEventListener('savedCard', this.saveCard);
    };

    /*  INSTANTOR */

    /**
     * @function [instantorSuccess]
     * @description Adds events
     */
    instantorSuccess = () => {
      this.instantor.destroy();
      const {
        saveCamunda
      } = this.props;
      saveCamunda({});
    };

    /**
     * @function [instantorErrorHandler]
     * @description Adds events
     */
    instantorErrorHandler = (errorType) => {
      this.setState({
        errorType: errorType,
        hasError: true
      });
    };

    /**
     * @function [setInstantorCallbacks]
     * @description Adds events
     */
    setInstantorCallbacks = () => {
      this.instantor.listener((response) => {
        console.log(response);
        if (response === 'process-finished') {
          this.instantorSuccess();
        } else {
          this.instantorErrorHandler(response);
        }
      });

      this.instantor.attachEventListener('ready', (ready) => {
        this.setState(() => ({ isReady: ready.status }));
      });
    };

    /**
     * @function [loadInstantor]
     * @description Adds events
     */
    loadInstantor = () => {
      this.instantor = new global.Instantor(this.props.config.INSTANTOR.COMPANY_NAME);
      this.instantor.userParam("userId", this.props.userName);
      this.instantor.userParam('environment', process.env.REACT_APP_ENV);
      this.instantor.frameParam('disableFinalStep', 'true');
      let el = document.getElementById('instantor');
      this.instantor.load(el);
      this.setInstantorCallbacks();
    };

    /**
     * @function [initializeInstantor]
     * @description Instantor initializer
     */
    initializeInstantor = () => {
      if (!this.props.rejected) {
        if (typeof (global.Instantor) === 'undefined' || this.props.userName === '') {
          setTimeout(this.initializeInstantor, 1000);
        } else {
          this.loadInstantor();
        }
      }
    };

    componentDidMount() {
      //  paylands
      this.addPaylandsEventListeners();
      //  instantor
      this.initializeInstantor();
    }

    render() {
      return (
        <Component
          {...this.props}
          errorMessage={this.state.errorMessage}
          onHandleOnSend={this.handleOnSend}
          fieldsAreValid={this.state.fieldsAreValid}
        />
      )
    }
  }

  Spain.propTypes = {
    wording: PropTypes.object.isRequired,
    config: PropTypes.object.isRequired,
    pristine: PropTypes.bool.isRequired,
    formData: PropTypes.object.isRequired,
    saveCamunda: PropTypes.func.isRequired,
    saveFakeCamunda: PropTypes.func.isRequired
  };

  Spain = reduxForm({
    form: 'spain',
    destroyOnUnmount: false,
    forceUnregisterOnUnmount: true
  })(Spain);

  const mapState = (
    {
      settings: {
        wording,
        config,
        assets,
        palette,
        width
      },
      camunda: {
        userName
      },
      form,
      loading
    },
    { viewName }
  ) => ({
    wording: wording[viewName],
    config,
    width,
    palette,
    assets,
    loading,
    userName: userName && userName.value,
    formData: form.spain ? form.spain : {}
  });

  const mapDispatch = {
    saveCamunda,
    sendToCamunda,
    saveFakeCamunda
  };

  return connect(
    mapState,
    mapDispatch
  )(Spain)
};

export default SpainHOC