digifi-www/src/components/GetStarted/DebitAccount.tsx

import React from "react";
import {useNavigate} from 'react-router-dom'
import { Button, InputCompOne } from "..";
import { RouteHandler } from "../../router/routes";

import {Formik, Form} from 'formik'
import * as Yup from "yup";

const initialValues = {
  disburse_account: "",
  bank_name: "",
  account_name: "",
  account_number: "",
  checked: false
};

// To get the validation schema
const validationSchema = Yup.object().shape({
  disburse_account: Yup.string()
    .required("Required"),
  bank_name: Yup.string()
    .required("Required"),
  account_name: Yup.string()
    .required("Required"),
  account_number: Yup.string()
    .required("Required"),
  checked: Yup.bool() // use bool instead of boolean
  .oneOf([true], "You must accept the terms and conditions")
});

const DebitAccount: React.FC = () => {
  const navigate = useNavigate()

  //FUNCTION TO HANDLE SUBMIT
  const handleSubmit = (values:any) => {
    console.log(values)
    navigate(RouteHandler.letsGetStarted, {replace:true})
  };

  return (
    <>
      <div className="w-full rounded py-3 mb-9 bg-[#5C2684] px-5">
        <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
          CREDIT ACCOUNT ( Your account to receive your loan )
        </p>
      </div>
      <Formik
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={handleSubmit}
          >
            {(props)=>(
              <Form>           
                <InputCompOne
                  parentClass="max-w-[29.4375rem] w-full my-5 ml-5"
                  label="Disbursement Account Number "
                  name="disburse_account"
                  labelSpan="( Your FCMB Account )"
                  labelSpanClass="text-[12px] text-[#5C2684] ml-1"
                  parentInputClass="w-full"
                  labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
                  input
                  inputClass="w-full h-[36px] bg-[#EFEFEF] rounded-[6px]"
                  value={props.values.disburse_account}
                  onChange={props.handleChange}
                  error={(props.errors.disburse_account && props.touched.disburse_account) ? props.errors.disburse_account : ''}
                />

                <div className="mt-9 flex flex-col gap-9">
                  <div className="w-full rounded py-3 bg-[#5C2684] px-5">
                    <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
                      DEBIT ACCOUNT ( Your salary account for monthly repayment )
                    </p>
                  </div>
                  <InputCompOne
                    parentClass="max-w-[471px] w-full ml-5"
                    label="Bank Name"
                    name="bank_name"
                    parentInputClass="w-full"
                    labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
                    input
                    inputClass="w-full h-[36px] bg-[#EFEFEF] rounded-[6px]"
                    value={props.values.bank_name}
                    onChange={props.handleChange}
                    error={(props.errors.bank_name && props.touched.bank_name) ? props.errors.bank_name : ''}
                  />

                  <div className="flex items-center gap-[59px]">
                    <InputCompOne
                      parentClass="max-w-[471px] w-full ml-5"
                      label="Account Number"
                      name="account_number"
                      parentInputClass="w-full"
                      labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
                      input
                      inputClass="w-full h-[36px] bg-[#EFEFEF] rounded-[6px]"
                      value={props.values.account_number}
                      onChange={props.handleChange}
                      error={(props.errors.account_number && props.touched.account_number) ? props.errors.account_number : ''}
                    />
                    <InputCompOne
                      parentClass="max-w-[471px] w-full ml-5"
                      label="Account Name"
                      name="account_name"
                      parentInputClass="w-full"
                      labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
                      input
                      inputClass="w-full h-[36px] bg-[#EFEFEF] rounded-[6px]"
                      value={props.values.account_name}
                      onChange={props.handleChange}
                      error={(props.errors.account_name && props.touched.account_name) ? props.errors.account_name : ''}
                    />
                  </div>

                  <div className="max-w-[578px] flex items-center">
                    <input
                      type="checkbox"
                    //   checked={true}
                   
                      name='checked'
                      onChange={props.handleChange}
                      className="form-checkbox h-[25px] w-[25px] rounded-sm text-[#5c2684] "
                      style={{ backgroundColor: "#5C2684" }}
                    />
                    <label className="ml-2 text-gray-700">
                      I have read, understood and accept the{" "}
                      <span className="text-[#4545CB]">applicant's attestation</span> and
                      all the <span className="text-[#4545CB]">terms and conditions</span>{" "}
                      for FCMB premium salary loan.
                    </label>
                    {props.errors.checked && props.touched.checked && <span className='text-[10px] text-red-500'>{props.errors.checked}</span>}
                  </div>
                  <Button
                    className="my-8 max-w-[33.875rem] btn-R bg-[#5A2C82] w-full h-11"
                    text="Apply"
                    type="submit"
                  />
                </div>
              </Form>
            )}
      </Formik>
    </>
  );
};

export default DebitAccount;