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

onb-core

import React from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { reduxForm, change } from "redux-form";

// actions
import { nextPage } from "../../redux/actions/loading.actions";
import { saveCamunda } from "../../redux/actions/camunda.actions";
import { saveFlowError } from "../../redux/actions/run.actions";
import { currentStepper } from "../../redux/actions/stepper.actions";

import { validateForm } from "../../utils/fieldValidations";

const FullLandingHOC = Component => {
  class Landing extends React.Component {
    constructor(props) {
      super(props);
      this.onKeyPressed = this.onKeyPressed.bind(this);
    }

    componentDidMount() {
      sendlog("view_page");
      window.addEventListener("keydown", this.onKeyPressed, false);
      this.props.dispatch(
        change("landing", "amount", this.props.config.START_AMOUNT)
      );
    }

    componentWillUnmount() {
      window.removeEventListener("keydown", this.onKeyPressed, false);
    }

    limitLength(v, max) {
      return v && v.substring(0, max);
    }

    getBrand() {
      return this.props.config.BRAND.split("_")[0];
    }

    onKeyPressed(e) {
      const {
        asyncErrors,
        syncErrors,
        registeredFields,
        values
      } = this.props.formData;
      if (
        !this.props.loading &&
        e.key === "Enter" &&
        !validateForm(
          syncErrors || asyncErrors,
          registeredFields,
          values,
          this.props.config.COUNTRY
        )
      ) {
        this.handleOnSend(e);
      }
    }

    handleOnSend = e => {
      e.preventDefault();

      const {
        formData: { values },
        saveCamunda,
        saveFlowError,
        dispatch,
        nextPage
      } = this.props;
      window.dataLayer &&
        window.dataLayer.push({
          event: "amount-inicial",
          label: "amount-selected",
          value: values.amount
        });
      sendlog('event', { event_action: 'click', ...values });
      saveCamunda(values);
      setTimeout(() => {
        saveFlowError(false);
        dispatch(currentStepper(1));
      }, 1000);
      nextPage();
    };

    render() {
      return (
        <div>
          <Component
            {...this.props}
            {...this.state}
            onHandleOnSend={this.handleOnSend}
            limitLength={this.limitLength}
          />
        </div>
      );
    }
  }

  Landing.propTypes = {
    wording: PropTypes.object.isRequired
  };

  Landing = reduxForm({
    form: "landing",
    destroyOnUnmount: false,
    forceUnregisterOnUnmount: true
  })(Landing);

  const mapState = (
    { settings: { wording, config }, form, loading },
    { viewName }
  ) => ({
    formData: form.landing ? form.landing : {},
    wording: wording[viewName],
    config,
    loading
  });

  const mapDispatch = {
    saveCamunda,
    currentStepper,
    nextPage,
    saveFlowError
  };

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

export default FullLandingHOC;