React final form wizard better example

Example.js

import React from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import { connect } from 'react-redux';

import * as actions from 'actions/cards';
import { activateCardStep1Validate, activateCardStep2Validate } from 'utils/validate';
import { API_BIRTHDATE_FORMAT } from 'utils/constants';
import Modal, { ModalContent } from 'components/Modal';
import Wizard from 'components/Wizard';

import activateIcon from 'shared/icons/activate.svg';
import styles from './ActivateCardModal.scss';

import Step1 from './Step1';
import Step2 from './Step2';

class ActivateCardModal extends React.Component {
  handleFormSubmit = ({ birthDate, ...values }) => {
    const { activateCard, onClose } = this.props;
    const birthDateFormatted = moment(birthDate).format(API_BIRTHDATE_FORMAT);

    return activateCard({
      ...values,
      birthDate: birthDateFormatted,
    })
      .then(onClose)
      .catch(({ formError }) => formError);
  }

  render() {
    const { onClose, isOpen } = this.props;
    return (
      <Modal
        label="Activate card"
        onClose={onClose}
        className={styles.modal}
        isOpen={isOpen}
        {...this.props}
      >
        <ModalContent title="Activate card" icon={activateIcon}>
          <Wizard
            onSubmit={this.handleFormSubmit}
            className={styles.form}
            submitText="Activate"
            onClose={onClose}
          >
            <Wizard.Page validate={activateCardStep1Validate}>
              <Step1 onClose={onClose} />
            </Wizard.Page>
            <Wizard.Page validate={activateCardStep2Validate}>
              <Step2 />
            </Wizard.Page>
          </Wizard>
        </ModalContent>
      </Modal>
    );
  }
}

ActivateCardModal.propTypes = {
  activateCard: PropTypes.func.isRequired,
  isOpen: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired,
};

const mapDispatchToProps = { activateCard: actions.activateCard };

export default connect(null, mapDispatchToProps)(ActivateCardModal);
export { ActivateCardModal as ActivateCardModalUnwrapped };

Step1.js

import React from 'react';
import cx from 'classnames';
import { Field } from 'react-final-form';

import Input from 'components/Input';
import Dropdown from 'components/Dropdown';
import { GENDERS } from 'utils/constants';

import activateStyles from './ActivateCardModal.scss';
import styles from './Step1.scss';

function Step1() {
  return (
    <div className={styles.wrapper}>
      <div className={activateStyles.formRow}>
        <Field
          name="company_name"
          component={Input}
          label="company-name"
          title="Company name"
          className={activateStyles.inputFullWidth}
        />
      </div>
      <div className={activateStyles.formRow}>
        <Field
          title="gender"
          name="gender"
          component={Dropdown}
          options={GENDERS}
          className={styles.genderDropdown}
          placeholder="Select"
          clearable={false}
        />
        <Field
          type="email"
          label="email"
          title="E-mail"
          name="email"
          component={Input}
          className={cx(activateStyles.inputFullWidth, activateStyles.inputRight)}
        />
      </div>
      <div className={activateStyles.formRow}>
        <div className={styles.phoneWrapper}>
          <div className={styles.phoneInputTitle}>Phone number</div>
          <div className={styles.phoneWrapperInputs}>
            <Field
              label="countryCode"
              name="countryCode"
              component={Input}
              className={styles.countryCode}
              inputClass={styles.countryCodeInput}
            />
            <Field
              label="phone"
              name="phone"
              component={Input}
              className={styles.phone}
              inputClass={styles.phoneInput}
            />
          </div>
        </div>
        <Field
          type="date"
          label="birth-date"
          title="Date of birth"
          name="birthDate"
          component={Input}
          className={cx(activateStyles.inputRight, styles.dateInput)}
          inputClass={styles.dateInputInner}
        />
      </div>
      <div className={activateStyles.formRow}>
        <Field
          label="country"
          title="Country/state"
          name="country"
          component={Input}
        />
        <Field
          label="city"
          title="City"
          name="city"
          component={Input}
          className={activateStyles.inputRight}
        />
      </div>
      <div className={activateStyles.formRow}>
        <Field
          label="street"
          title="Street name"
          name="streetName"
          component={Input}
        />
        <Field
          label="zip-code"
          name="zip"
          title="ZIP/Postal code"
          component={Input}
          className={activateStyles.inputRight}
        />
      </div>
      <div className={activateStyles.formRow}>
        <Field
          label="id-number"
          title="id number"
          name="idNumber"
          type="text"
          component={Input}
        />
        <Field
          label="occupation"
          title="Occupation"
          name="occupation"
          component={Input}
          className={activateStyles.inputRight}
        />
      </div>
    </div>
  );
}

export default Step1;

Step2.js

import React from 'react';
import cx from 'classnames';
import { Field } from 'react-final-form';

import Input from 'components/Input';
import PINInput from 'components/PINInput';
import MonthInput from 'components/MonthInput';

import activateStyles from './ActivateCardModal.scss';
import styles from './Step2.scss';

function Step2() {
  return (
    <div>
      <div className={activateStyles.formRow}>
        <Field
          name="cardNumber"
          component={Input}
          label="card-number"
          title="Card number"
          type="text"
          className={activateStyles.inputFullWidth}
        />
      </div>
      <div className={activateStyles.formRow}>
        <Field
          name="expiryDate"
          component={MonthInput}
          label="expiry-date"
          title="Expiry date"
          className={cx(activateStyles.inputFullWidth, styles.dateInput)}
          inputClass={styles.dateInputInner}
        />
        <Field
          name="cvv"
          component={Input}
          label="cvv"
          title="CVV"
          type="text"
          className={cx(styles.cvv, activateStyles.inputRight)}
          inputClass={styles.cvvInner}
        />
      </div>
      <div className={activateStyles.formRow}>
        <Field
          justified
          name="pin"
          component={PINInput}
          title="PIN Code"
        />
      </div>
      <div className={activateStyles.formRow}>
        <Field
          justified
          title="Confirm PIN Code"
          name="cpin"
          component={PINInput}
        />
      </div>
      <div className={activateStyles.formRow}>
        <Field
          component={Input}
          name="password"
          type="password"
          label="password"
          title="Password"
          className={activateStyles.inputFullWidth}
        />
      </div>
    </div>
  );
}

export default Step2;

Wizard.js

import React from 'react';
import PropTypes from 'prop-types';
import { Form } from 'react-final-form';

import Button from 'components/Button';

import spinnerIcon from 'shared/icons/spinner.svg';
import checkMarkIcon from 'shared/icons/checkmark.svg';
import angleArrowRight from 'shared/icons/angle-arrow-right.svg';
import angleArrowLeft from 'shared/icons/angle-arrow-left.svg';
import crossIcon from 'shared/icons/cross.svg';
import styles from './Wizard.scss';

class Wizard extends React.Component {
  static Page = ({ children }) => children

  state = {
    currentPage: 0,
  }

  get isLastPage() {
    const children = this.props.children;
    const currentPage = this.state.currentPage;
    return currentPage === React.Children.count(children) - 1;
  }

  get activePage() {
    const currentPage = this.state.currentPage;
    const children = this.props.children;
    const activePage = React.Children.toArray(children)[currentPage];
    return activePage;
  }

  handleNext = (values) => {
    const children = this.props.children;
    this.setState(prevState => ({
      currentPage: Math.min(prevState.currentPage + 1, children.length - 1),
      values,
    }));
  }

  handlePrevious = () => {
    this.setState(prevState => ({
      currentPage: Math.max(prevState.currentPage - 1, 0),
    }));
  }

  // Both validate and handleSubmit switching are implemented
  // here because Redux Final Form does not accept changes to those
  // functions once the form has been defined.
  validate = (values) => {
    const { props } = this.activePage;
    return props.validate ? props.validate(values) : {};
  }

  handleSubmit = (values) => {
    if (this.isLastPage) {
      return this.props.onSubmit(values);
    }
    return this.handleNext(values);
  }

  render() {
    const { currentPage, values: prevValues } = this.state;
    return (
      <Form
        initialValues={prevValues}
        validate={this.validate}
        onSubmit={this.handleSubmit}
      >
        {({ handleSubmit, submitting }) => (
          <form onSubmit={handleSubmit}>
            {this.activePage}
            <div>
              <div className={styles.buttons}>
                {currentPage > 0 && (
                  <Button
                    primary
                    iconOnLeft
                    type="button"
                    onClick={this.handlePrevious}
                    icon={angleArrowLeft}
                  >
                    Previous
                  </Button>
                )}
                {this.isLastPage ? (
                  <Button
                    primary
                    type="submit"
                    disabled={submitting}
                    icon={submitting ? spinnerIcon : checkMarkIcon}
                  >
                    {this.props.submitText}
                  </Button>
                ) : (
                  <React.Fragment>
                    <Button danger icon={crossIcon} onClick={this.props.onClose}>
                      Cancel
                    </Button>
                    <Button primary type="submit" icon={angleArrowRight}>
                      Continue
                    </Button>
                  </React.Fragment>
                )}
              </div>
            </div>
          </form>
        )}
      </Form>
    );
  }
}

Wizard.propTypes = {
  children: PropTypes.node.isRequired,
  onClose: PropTypes.func.isRequired,
  onSubmit: PropTypes.func.isRequired,
  submitText: PropTypes.string,
};

Wizard.defaultProps = {
  submitText: 'Submit',
};

export default Wizard;

Any pro tip on how to pass state between the pages so we can have conditional logic in pages based on previous values (in previous pages)? @mrowa44