SessionForm.js

import React from 'react';
import Button from '@components/Button';
import PropTypes from 'prop-types';
import { translate } from 'react-i18next';
import { SessionFormFields, SessionFormSubmitButton } from './FormFields';

import { createSessionApi } from '@src/apis/api';
import { Routes as RouteConstants } from '@src/constants/routes';
import { api } from '@helpers/ApiLibrary';
import { storage } from '@helpers/Storage';
import { browserHistory } from 'react-router';
import { withFormik, Field } from 'formik';
import * as Yup from 'yup';

export const validationSchema = Yup.object().shape({
  nationalId: Yup.string(),
  mobileNumber: Yup.string().required('Mobile number is required'),
  channel: Yup.string().required('Telco Provider is required!'),
  productType: Yup.string().required('Product Type is required!')
});

export const mapPropsToValues = ({ fields, updateStep }) => ({
  ...fields,
  updateStep: updateStep
});

export const handleSubmit = payload => {
  const { nationalId, mobileNumber, channel, productType, updateStep } = payload;
  const data = {
    nationalID: nationalId,
    phoneNumber: mobileNumber,
    channel: channel,
    productType: productType
  };
  createSessionApi(data)
    .then(response => {
      const { data } = response;
      if (data) {
        const responseData = data.data;
        if (responseData) {
          const { token } = responseData;
          api.setAuthorizationToken(token);
          storage.set('token', token);
        }
      }
      updateStep(1);
      browserHistory.push(RouteConstants.OtpPage);
    })
    .catch(error => {
      console.log(error);
    });
};

export const SessionForm = props => {
  const { values, handleSubmit, t } = props;
  const translate = t;
  const requiredKeys = ['mobileNumber', 'productType'];
  const disabled = requiredKeys.some(key => !values[key]);
  return (
    <form onSubmit={handleSubmit}>
      <fieldset>
        {SessionFormFields.map(field => {
          const { label, placeholder, ...rest } = field;
          return (
            <Field key={field.name} label={translate(label.key)} placeholder={translate(placeholder.key)} {...rest} />
          );
        })}
      </fieldset>
      <div className='regsiter-form-action clearfix'>
        <Button type='submit' outline={false} disabled={disabled}>
          {translate(SessionFormSubmitButton.label.key)}
        </Button>
      </div>
    </form>
  );
};

SessionForm.propTypes = {
  handleSubmit: PropTypes.func.isRequired,
  values: PropTypes.object.isRequired,
  updateStep: PropTypes.func,
  t: PropTypes.func
};

export const FormikEnhancedSessionForm = translate('dj-webhandler')(
  withFormik({
    mapPropsToValues,
    validationSchema,
    handleSubmit,
    displayName: 'SessionForm'
  })(SessionForm)
);