Toggle for form sections example

/* eslint-disable camelcase */
import React from "react";
import PropTypes from "prop-types";
import { translate } from "react-i18next";
import { Input, Checkbox } from "@ematix/tesseract-component-library";

import cls from "./bank.scss";
// eslint-disable-next-line
import TwoColumnWrapper from "../../_modules/people/pages/EmployeeDetails/pages/Payroll/TwoColumnWrapper";
@translate("InputSetBank")
export default class InputSetBank extends React.PureComponent {
  static propTypes = {
    name: PropTypes.string,
    defaultValues: PropTypes.instanceOf(Object),
    t: PropTypes.func.isRequired,
  };
  static defaultProps = {
    name: "bank_account",
    defaultValues: {},
  };

  constructor(props, ...args) {
    super(props, ...args);

    const {
      defaultValues: {
        account_name, IBAN, bank_name, swift_code,
      },
    } = props;

    let isIban = false;
    if (account_name || IBAN || bank_name || swift_code) {
      isIban = true;
    }

    this.state = {
      isIban,
    };
  }

  handleToggleIban = () => {
    const { isIban } = this.state;

    this.setState({
      isIban: !isIban,
    });
  };

  render() {
    const { name, defaultValues, t } = this.props;
    const { isIban } = this.state;

    const getName = inputName => `${name || "bank_account"}[${inputName}]`;
    return (
      <TwoColumnWrapper>
        <div className={cls.leftCol}>
          <Input
            name={getName("number_prefix")}
            defaultValue={defaultValues.no_prefix}
            label={t("Prefix")}
          />
          <Input
            className={cls.accountNumber}
            name={getName("number")}
            defaultValue={defaultValues.account_number}
            label={t("Account No.")}
          />
          <Input
            name={getName("bank_code")}
            defaultValue={defaultValues.bank_code}
            label={t("Bank Code")}
          />
        </div>
        <div className={cls.rightCol}>
          <Checkbox
            id="iban"
            label={t("IBAN")}
            onChange={this.handleToggleIban}
            defaultChecked={isIban}
          />
          {isIban && (
            <React.Fragment>
              <div className={cls.ibanPart}>
                <div className={cls.ibanSwiftPart}>
                  <Input
                    name={getName("IBAN")}
                    defaultValue={defaultValues.IBAN}
                    label={t("IBAN")}
                    className={cls.iban}
                  />
                  <Input
                    name={getName("swift")}
                    defaultValue={defaultValues.swift_code}
                    label={t("Swift Code")}
                    className={cls.swift}
                  />
                </div>
                <Input
                  name={getName("holder_name")}
                  defaultValue={defaultValues.account_name}
                  label={t("Holder Name")}
                  className={cls.name}
                />
                <Input
                  name={getName("bank_name")}
                  defaultValue={defaultValues.bank_name}
                  label={t("Bank Name")}
                  className={cls.bankName}
                />
              </div>
            </React.Fragment>
          )}
        </div>
      </TwoColumnWrapper>
    );
  }
}