@wenn/onb/hoc/productHOC/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 { getOffer } from '../../redux/actions/offer.actions';
import debounce from '../../utils/debounce';

const ProductHOC = Component => {
  class Product extends React.Component {
    constructor() {
      super();
      this.state = {
        showOffer: true
      };
      this.onHandleAmount = debounce(this.onHandleAmount.bind(this), 700);
    }

    componentDidMount() {
      sendlog("view_page");
    }

    shouldComponentUpdate(newProps) {
      if (newProps.offer_retrieval !== this.props.offer_retrieval) {
        this.setState({
          showOffer: true
        });
      }

      return true;
    }

    onHandleAmount() {
      const {
        formData: { values },
        offer_retrieval,
        getOffer
      } = this.props;
      const amount = Number(values.amount);
      const max = offer_retrieval.max_amount;
      const min = offer_retrieval.min_amount;
      
      const verifyAmount = (amount > max || amount < min)
      this.setState({ showOffer: verifyAmount });
      if (!verifyAmount) {
        getOffer(values.amount);
      }      
    }

    handleOnSend = e => {
      e.preventDefault();
      const {
        formData: { values },
        offer_retrieval,
        viewName,
        saveCamunda,
        sendToCamunda,
        utm_medium,
        tracking_id,
        fullname
      } = this.props;

      const selectedProduct = Number(values.product.substr(1));
      const product = offer_retrieval.offer_installments.find(
        offer => offer.installment === selectedProduct
      );

      if (window.dataLayer) {
        window.dataLayer.push({
          event: 'amount-products',
          value: `${values.amount} | ${fullname} | ${
            offer_retrieval.max_amount
          } | ${product.installment}`
        });
        if (utm_medium) {
          window.dataLayer.push({
            event: 'utm_medium',
            value: `${utm_medium}`,
            tracking_id: `${tracking_id}`
          });
        }
      }

      const data = {
        amount: values.amount.toString(),
        loaninstallment: product.max_quota.toString(),
        numberinstallments: product.installment.toString(),
        productid: offer_retrieval.product_id,
        product
      };

      sendlog('event', { event_action: 'click', ...data });

      saveCamunda(data);
      sendToCamunda(viewName);
    };

    render() {
      return (
        <div>
          <Component
            {...this.props}
            {...this.state}
            onHandleOnSend={this.handleOnSend}
            handleAmount={e => {
              this.onHandleAmount(e);
              this.props.dispatch(change('Product', 'product', ''));
            }}
          />
        </div>
      );
    }
  }

  Product.proptTypes = {
    formData: PropTypes.object.isRequired,
    wording: PropTypes.object.isRequired,
    saveCamunda: PropTypes.func.isRequired,
    sendToCamunda: PropTypes.func.isRequired,
    viewName: PropTypes.string.isRequired,
    offer_retrival: PropTypes.object.isRequired,
    getOffer: PropTypes.func.isRequired
  };

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

  const mapState = (
    {
      settings: { wording, config, theme, assets },
      form,
      camundaData,
      camunda
    },
    { viewName }
  ) => ({
    formData: form.Product ? form.Product : {},
    wording: wording[viewName],
    config,
    viewName,
    theme: theme,
    assets,
    offer_retrieval: camundaData.offer_retrieval
      ? camundaData.offer_retrieval
      : {},
    utm_medium: camunda.utm_medium && camunda.utm_medium.value,
    tracking_id: camunda.tracking_id && camunda.tracking_id.value,
    fullname: camunda.fullname
  });

  const mapDispatch = {
    saveCamunda,
    sendToCamunda,
    getOffer
  };

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

export default ProductHOC;