@wenn/onb/hoc/landingHOC/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 LandingHOC = Component => {
  class Landing extends React.Component {
    state = {
      show: false,
      longitude: '',
      latitude: '',
      toggle: {
        modal: false,
        snackbar: false,
        cookies: false
      }
    };

    componentDidMount() {
      sendlog("view_page");
      if (this.props.width <= 1000) {
        window.addEventListener('scroll', e => {
          this.setState({ show: window.scrollY > 100 })
        })
      } else {
        document.getElementById('container') &&
        document
            .getElementById('container')
            .addEventListener('scroll', e =>
                this.setState({ show: e.target.scrollTop > 100 })
            )
      }
      this.props.dispatch(
          change(
              'landing',
              'requestedamount',
              this.props.config.START_AMOUNT.toString()
          )
      )
    }

    componentWillUnmount() {
      if (this.props.width <= 1000) {
        window.removeEventListener('scroll', () => null, false)
      } else {
        document.getElementById('container') &&
        document
            .getElementById('container')
            .removeEventListener('scroll', e => null, false)
      }
    }

    handleOnSend = e => {
      e.preventDefault()
      const {
        formData: { values },
        saveCamunda,
        saveFakeCamunda
      } = this.props
      sendlog('event', { event_action: 'click', ...values });
      if (values && values.requestedamount) {
        window.dataLayer &&
        window.dataLayer.push({
          event: 'amount-inicial',
          label: 'amount-selected',
          value: values.requestedamount
        })
        saveCamunda(values)
      }
      saveFakeCamunda()
    }

    getLeadInfo = e => {
      e.preventDefault()
      const { viewName, saveCamunda, sendToCamunda, leadId } = this.props
      saveCamunda({ leadId })
      sendToCamunda(`${viewName}:leads`)
    }

    updatePropsFromResponse = response => {
      const { loading, viewName, saveCamunda, sendToCamunda } = this.props
      if (response.email) {
        if (!loading) {
          saveCamunda({ email: response.email })
          sendToCamunda(`${viewName}:facebook`)
        } else {
          this.reintent(response)
        }
      }
    }

    reintent(response) {
      setTimeout(_ => this.updatePropsFromResponse(response), 500)
    }

    /**
     * @function [canceled]
     * @description If the user doesn't give permission, he/she will be redirected to an error page .
     **/
    canceled = () => {
      const { globalNotification } = this.props;
      const notification = {
        bpmStep: {
          code: 'geolocation',
          step: 'end'
        },
        status: {
          statusCode: '404',
          message: 'El usuario no aceptó el pedido de geolocalización'
        }
      };
      globalNotification(notification);
    };

    /**
     * @function [getGeolocalization]
     * @param position
     * @description Saves the longitude and longitude of the user.
     **/
    getGeolocalization = position => {
      this.setState({ toggleSnackbar: !this.state.toggleSnackbar });

      const { saveCamunda } = this.props;

      const geolocation = {
        latitude: position.coords.latitude,
        longitude: position.coords.longitude
      };
      saveCamunda(geolocation);
    };

    /**
     * @function [getPosition]
     * @description The user needs to provide his/her geolocalization. This functions calls a callback. If the user
     * does not accept to give his/her information, canceled() will be called.
     **/
    getPosition = () => {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            this.getGeolocalization,
            this.canceled
        );
      }
    };

    /**
     * @function [modalToggle]
     * @description Toggle for every modal/snackbar.
     **/
	modalToggle = (name) => {
      const toggle = { ...this.state.toggle };
      toggle[name] = !toggle[name];
      this.setState({ toggle });
    };

    render() {
      return (
          <Component
      {...this.props}
      show={this.state.show}
      handleSendLead={this.getLeadInfo}
      handleSendFacebook={this.updatePropsFromResponse}
      onHandleOnSend={this.handleOnSend}
      getPosition={this.getPosition}
      modalToggle={this.modalToggle}
      toggle={this.state.toggle}
      />
    )
    }
  }

  Landing.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
  }

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

  const mapState = (
      {
        settings: {
          wording,
          config,
          assets,
          palette,
          leadId,
          isFromFacebook,
          width,
          product
        },
        form,
        loading
      },
      { viewName }
  ) => ({
    wording: wording[viewName],
    config,
    product,
    width,
    palette,
    assets,
    leadId,
    isFromFacebook,
    loading,
    formData: form.landing ? form.landing : {}
  })

  const mapDispatch = {
    saveCamunda,
    sendToCamunda,
    saveFakeCamunda
  }

  return connect(
      mapState,
      mapDispatch
  )(Landing)
}

export default LandingHOC