@wenn/onb/FallbackForm.js

onb-core

import React from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm, change } from 'redux-form';
import Input from '@bit/wenance.common-ui.web.input';
import { validate, validateForm, masks } from '@bit/wenance.common-core.onb';
import Checkbox from '@bit/wenance.common-ui.web.checkbox';
import { ContainerDesktop, Onboarding, LogoMobile } from './ui/Global';
import Loading from '@bit/wenance.common-ui.web.loading';
import { loadingPage } from './redux/actions/loading.actions';
import { Headline, Description } from '@bit/wenance.common-ui.web.global';
import { ButtonContainer, Button } from '@bit/wenance.common-ui.web.button';
import Select from '@bit/wenance.common-ui.web.select';
import FormBlock from '@bit/wenance.common-ui.web.formblock';
import { Grid } from '@bit/wenance.common-ui.web.grids';
import styled from 'styled-components';
import {
  RadioGroup,
  RadioButton
} from '@bit/wenance.common-ui.web.radiobutton';
import axios from 'axios';
import { globalNotification } from './redux/actions/notifications.actions';
import { saveHasError } from './redux/actions/hasError.actions';
import { saveFlowError } from './redux/actions/run.actions';
import { dateMask, currencyMask } from './utils/inputMasks';

const FloatLabel = styled.label`
  ${props => props.theme.typography.label.medium};
  line-height: 1.7;
`;
const Title = styled.h2`
  font-size: 2rem;
  text-align: center;
  color: #000000;
  font-weight: 400;
  font-family: inherit;
  line-height: 1.46429em;
`;

class FallbackForm extends React.Component {
  constructor() {
    super();
    this.state = {};
  }
  limitLength = (v, max) => v && v.substring(0, max);
  parseEmail = v => v && v.replace(/ /g, '');

  componentDidMount() {
    this.props.FORM.fields.map((input, index) => {
      if (
        input.onb_name &&
        this.props.gathered &&
        this.props.gathered[input.onb_name]
      )
        this.props.dispatch(
          change(
            'FallbackForm',
            input.name,
            this.props.gathered[input.onb_name]
          )
        );
    });
  }

  handleSubmit = event => {
    event.preventDefault();

    this.props.loadingPage(true);

    const { REACT_APP_BRAND, REACT_APP_ENV } = process.env;

    let data =
      this.props && this.props.formData && this.props.formData.values
        ? this.props.formData.values
        : { brand: 'NO_BRAND' };

    let brand = '';
    if (process && process.env && REACT_APP_BRAND) {
      brand = REACT_APP_BRAND.toUpperCase();
    }
    data.Brand__c = brand;
    data.LeadSource = 'Organico';

    let url = `https://apix.${REACT_APP_ENV}.fintechpeople.io/onb-fallback-form/apps/onboarding/brands/${REACT_APP_BRAND}`.replace(
      '.prod',
      ''
    );

    data.User_Agent__c = window.navigator.userAgent;
    data.Campania__c = '';
    data.Adgroup__c = '';
    data.Monto_solicitado__c = parseInt(data.Monto_solicitado__c);

    let date = data.Fecha_de_nacimiento__c;
    date =
      date.substr(0, 2) + '/' + date.substr(2, 2) + '/' + date.substr(4, 6);
    data.Fecha_de_nacimiento__c = date;
    data.Cantidad_de_cuotas__c = parseInt(data.Cantidad_de_cuotas__c);

    let prefix = '';
    if (brand.includes('_AR')) {
      prefix = '0' + data.validationcellcode;
      data.CodigoArea__c = data.validationcellcode;
    }

    data.MobilePhone = prefix + data.validationcellphone;
    data.Phone__c = data.validationcellphone;

    let bank = document.getElementsByName('Banco_de_deposito_de_sueldo2__c');
    if (bank.length) {
      data.Banco_de_deposito_de_sueldo2__c = bank[0].value;
    }

    delete data.termsyconditions;
    delete data.validationcellcode;
    delete data.validationcellphone;
    delete data.brand;

    const headers = {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    };

    axios
      .post(url, data, headers)
      .then(response => {
        let scoring_dictamen =
          JSON.parse(response.data).scoring_dictamen || 'no_dictamen';
        const feedbackCode = this.getRedirection(scoring_dictamen);
        const notification = {
          bpmStep: {
            code: feedbackCode,
            step: 'end'
          }
        };
        this.props.globalNotification(notification);
        this.props.saveHasError(false);
        this.props.saveFlowError(true);
      })
      .catch(e => {
        const notification = {
          bpmStep: {
            code: 'generic_error' /*this matches with bs.feedback*/,
            step: 'end'
          }
        };
        this.props.globalNotification(notification);
        this.props.saveHasError(false);
        this.props.saveFlowError(true);
      });
  };
  getRedirection = scoring_dictamen => {
    let code;
    switch (scoring_dictamen) {
      case 'Aprobar':
        code = 'fallback_form_approved';
        break;
      default:
        code = 'no_product';
    }
    return code;
  };
  getInput = (obj, index) => {
    const {
      syncErrors,
      asyncErrors,
      registeredFields,
      values
    } = this.props.formData;
    const { pristine, wording, BANKS } = this.props;
    let input = null;
    const isAr = process.env.REACT_APP_BRAND.toUpperCase().includes('_AR')
      ? true
      : false;

    switch (obj.type) {
      case 'text':
        let handleChange =
          obj.name === 'Email'
            ? this.parseEmail
            : v => this.limitLength(v, obj.maxLength);
        let inputMask = {};
        if (obj.name === 'Fecha_de_nacimiento__c') {
          inputMask = { ...dateMask };
        } else if (obj.name === 'Monto_solicitado__c') {
          inputMask = { ...currencyMask };
        }
        input = (
          <FormBlock>
            <Grid lg={35} md={18} sm={100} xs={100}>
              <FloatLabel>{obj.label}</FloatLabel>
            </Grid>
            <Grid lg={65} md={82} sm={100} xs={100}>
              <Field
                component={Input}
                name={obj.name}
                data={obj.name}
                type={obj.type}
                validate={validate}
                placeholder={obj.placeholder ? obj.placeholder : ''}
                handleValueChange={handleChange}
                {...inputMask}
              />
            </Grid>
          </FormBlock>
        );
        break;
      case 'select':
        let options = obj.options;
        input = (
          <FormBlock>
            <Grid lg={35} md={18} sm={100} xs={100}>
              <FloatLabel>{obj.label}</FloatLabel>
            </Grid>
            <Grid lg={65} md={82} sm={100} xs={100}>
              <Field
                name={obj.name}
                data={obj.name}
                type={obj.type}
                component={Select}
                validate={validate}
                options={options}
              />
            </Grid>
          </FormBlock>
        );

        if (obj.name === 'Banco_de_deposito_de_sueldo2__c') {
          options = BANKS.map(bank => ({
            value: bank.label,
            label: bank.label
          }));
          input = (
            <FormBlock>
              <FloatLabel>{obj.label}</FloatLabel>
              <Field
                name={obj.name}
                data={obj.name}
                type={obj.type}
                component={Select}
                validate={validate}
                options={options}
              />
            </FormBlock>
          );
        }
        break;
      case 'radioButton':
        input = (
          <FormBlock>
            <FloatLabel>{obj.label}</FloatLabel>
            <RadioGroup name={obj.name} style={{ display: 'flex' }}>
              {obj.options.map(opt => (
                <Field
                  component={RadioButton}
                  id={opt}
                  name={obj.name}
                  type='radio'
                  validate={validate}
                  value={opt}
                  key={opt}
                  label={opt}
                />
              ))}
            </RadioGroup>
          </FormBlock>
        );
        break;
      case 'checkbox':
        input = (
          <FormBlock>
            <Field
              name={obj.name}
              component={Checkbox}
              defaultChecked={values && values.termsyconditions}
              validate={validate}
              type={obj.type}
              children={
                <div>
                  {obj.label}{' '}
                  <a target='_blank' href={obj.cta.target}>
                    {obj.cta.label}
                  </a>
                </div>
              }
              data={obj.name}
            />
          </FormBlock>
        );
        break;
      case 'submit':
        input = (
          <FormBlock>
            <ButtonContainer>
              <Button
                isBlocked
                data={obj.name}
                type='submit'
                disabled={
                  pristine ||
                  validateForm(
                    syncErrors || asyncErrors,
                    registeredFields,
                    values,
                    this.props.config.COUNTRY,
                    this.props
                  )
                }
                onClick={this.handleSubmit}
              >
                {obj.cta.label}
              </Button>
            </ButtonContainer>
          </FormBlock>
        );
        break;
      default:
        input = '';
    }

    return input;
  };
  render() {
    const {
      FORM: form,
      width,
      config,
      assets,
      Desktop,
      theme,
      formData,
      wording,
      loading
    } = this.props;

    if (width > 1000) {
      return (
        <ContainerDesktop>
          <Desktop />
          <Onboarding id='container'>
            <FormBlock style={{ padding: '2rem' }}>
              <Headline>
                <Title>{form.title}</Title>
                <Description>{form.description}</Description>
              </Headline>
              <form onSubmit={this.handleSubmit}>
                {form.fields.map((input, index) => this.getInput(input, index))}
              </form>
            </FormBlock>
          </Onboarding>
          <Loading loading={loading} />;
        </ContainerDesktop>
      );
    }

    return (
      <div>
        <Loading loading={loading} />;
        <LogoMobile
          style={theme.logoMobile}
          src={assets.logo}
          alt='logo'
          height='32'
        />
        <FormBlock style={{ padding: '2rem' }}>
          <Headline>
            <Title>{form.title}</Title>
          </Headline>
          <form onSubmit={this.handleSubmit}>
            {form.fields.map((input, index) => this.getInput(input, index))}
          </form>
        </FormBlock>
      </div>
    );
  }
}

FallbackForm = reduxForm({
  form: 'FallbackForm',
  enableReinitialize: true
})(FallbackForm);

const mapStateToProps = ({
  loading,
  settings: { config, utils, width, assets, wording, theme, pristine },
  form
}) => ({
  loading,
  formData: form.FallbackForm ? form.FallbackForm : {},
  assets,
  wording,
  width,
  theme,
  pristine,
  config,
  BANKS: utils.BANKS[config.COUNTRY.toUpperCase()],
  initialValues: {}
});

const mapDispatchToProps = {
  saveHasError,
  saveFlowError,
  globalNotification,
  loadingPage
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(FallbackForm);