@wenn/onb/hoc/personalInfoHOC/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 { getProvinces, getRegions } from '../../redux/actions/locations.actions'

const PersonalInfoHOC = Component => {
  class PersonalInfo extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        toggleModal: false
      }
    }

    componentDidMount() {
      sendlog("view_page");
      const { getProvinces, config } = this.props
      getProvinces(config.COUNTRY_ID)
      this.props.dispatch(
        change(
          'PersonalInfo',
          'alternativePhoneCategory',
          this.props.wording.phoneTypes.answers[1]
        )
      )
    }

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

    parseSelect(v) {
      return v && v.replace(/( |[0-9])/g, '')
    }

    getRegionsOnProvince = item => {
      if (item) {
        this.props.getRegions(item);
      } else {
        this.props.dispatch(change('PersonalInfo', 'city', ''))
      }
    }

    handleModal = () => {
      const { toggleModal } = this.state
      this.setState({ toggleModal: !toggleModal })
    }

    handleOnSend = e => {
      e.preventDefault()
      const {
        formData: { values },
        viewName,
        saveCamunda,
        sendToCamunda,
        bpmStep,
        provinces
      } = this.props

      const provinceName = (
        Array.isArray(provinces) ?
          (provinces
            .find(({ province_id }) =>
              province_id == values.province
            ) || {}).province || ''
          : ''
      );

      const data = {
        ...values,
        floor: values.floor || '',
        department: values.department || '',
        province: provinceName
      }

      let args

      if (bpmStep.includes('PAUSE6')) {
        args = {
          goto: {
            type: 'String',
            value: 'step6'
          }
        }
      }
      sendlog('event', { event_action: 'click', ...data });
      saveCamunda(data)
      sendToCamunda(viewName, args)
    }

    render() {
      return (
        <div>
          <Component
            {...this.props}
            {...this.state}
            onHandleOnSend={this.handleOnSend}
            onHandleModal={this.handleModal}
            limitLength={this.limitLength}
            parseSelect={this.parseSelect}
            getRegionsOnProvince={this.getRegionsOnProvince}
          />
        </div>
      )
    }
  }

  PersonalInfo.proptTypes = {
    formData: PropTypes.object.isRequired,
    wording: PropTypes.object.isRequired,
    saveCamunda: PropTypes.func.isRequired,
    sendToCamunda: PropTypes.func.isRequired,
    viewName: PropTypes.string.isRequired
  }

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

  const mapState = (
    { settings: { wording, config, assets }, form, locations, bpmStep, camunda },
    { viewName }
  ) => ({
    formData: form.PersonalInfo ? form.PersonalInfo : {},
    initialInfo: form.InitialInfo ? form.InitialInfo.values : {},
    camunda,
    wording: wording[viewName],
    config,
    viewName,
    provinces: locations.provinces,
    regions: locations.regions,
    bpmStep,
    assetsPaths: assets
  })

  const mapDispatch = {
    saveCamunda,
    sendToCamunda,
    getProvinces,
    getRegions
  }

  return connect(
    mapState,
    mapDispatch
  )(PersonalInfo)
}

export default PersonalInfoHOC