digifi-www/src/components/Dashboard/home/DashboardHomeDetail.tsx

import { Button, InputCompOne, Stepper } from '../../shared/index';

import { state } from '../../../utils/states';

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

type Props = {
  handleNextStep:(value:{})=>any
}

const initialValues = {
  gender: "",
  address: "",
  marital_status: "",
  state: "",
  email:"",
  country:"NG"
};

// To get the validation schema
const validationSchema = Yup.object().shape({
  gender: Yup.string()
    .required("Required"),
  address: Yup.string()
    .required("Required"),
  marital_status: Yup.string()
    .required("Required"),
  state: Yup.string()
    .required("Required"),
  email: Yup.string()
    .email("Invalid")
    .required("Required"),
  country: Yup.string()
    .required("Required"),
});

export default function DashboardHomeDetail({handleNextStep}:Props) {

  //FUNCTION TO HANDLE SUBMIT
  const handleSubmit = (values:any) => {
    handleNextStep(values)
  };

  return (
    <div className="w-full">
      <div className="w-full flex justify-center">
        <Stepper step={1} />
      </div>
      <Formik
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={handleSubmit}
          >
            {(props)=>(
              <Form>          
                <div className="mt-[3.25rem] flex flex-col gap-9">
                  <div className="flex items-center gap-[4.125rem]">
                    <InputCompOne
                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
                      name="gender"
                      label="Select your gender"
                      labelClass="font-bold text-[1.125rem]"
                      select={true}
                      selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                      selectOptions={gender}
                      selectValue={props.values.gender}
                      onChange={props.handleChange}
                      error={(props.errors.gender && props.touched.gender) ? props.errors.gender : ''}
                    />
                    <InputCompOne
                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
                      name="address"
                      label="Residential address"
                      labelClass="font-bold text-[1.125rem]"
                      input
                      inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                      placeholder="Somewhere in lagos"
                      value={props.values.address}
                      onChange={props.handleChange}
                      error={(props.errors.address && props.touched.address) ? props.errors.address : ''}
                    />
                  </div>
                  <div className="flex items-center gap-[4.125rem]">
                    <InputCompOne
                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
                      name="marital_status"
                      label="Marital status"
                      labelClass="font-bold text-[1.125rem]"
                      select={true}
                      selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                      selectOptions={maritalStatus}
                      selectValue={props.values.marital_status}
                      onChange={props.handleChange}
                      error={(props.errors.marital_status && props.touched.marital_status) ? props.errors.marital_status : ''}
                    />
                    <InputCompOne
                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
                      name="state"
                      label="Select your state"
                      labelClass="font-bold text-[1.125rem]"
                      select={true}
                      selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                      selectOptions={state}
                      selectValue={props.values.state}
                      onChange={props.handleChange}
                      error={(props.errors.state && props.touched.state) ? props.errors.state : ''}
                    />
                  </div>
                  <div className="flex items-center gap-[4.125rem]">
                    <InputCompOne
                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
                      name="email"
                      label="Email address"
                      labelClass="font-bold text-[1.125rem]"
                      input
                      inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                      placeholder="johndoe@gmail.com"
                      value={props.values.email}
                      onChange={props.handleChange}
                      error={(props.errors.email && props.touched.email) ? props.errors.email : ''}
                    />
                    <InputCompOne
                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
                      name="country"
                      label="Select your country"
                      labelClass="font-bold text-[1.125rem]"
                      select={true}
                      selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                      selectOptions={country}
                      selectValue={props.values.country}
                      onChange={props.handleChange}
                      error={(props.errors.country && props.touched.country) ? props.errors.country : ''}
                    />
                  </div>
                  <Button
                    className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
                    text="Next"
                    type="submit"
                  />
                </div>
              </Form>
            )}
      </Formik>
    </div>
  );
}

interface SelectOption {
  loading: boolean;
  data: {value: string;
  label: string}[]
}


const gender: SelectOption = {
  loading: false,
  data: [
    { value: "", label: "Please Select" },
    { value: "male", label: "Male" },
    { value: "female", label: "Female" },
    { value: "others", label: "Prefer not to say" },
  ]
}

const maritalStatus: SelectOption = {
  loading: false,
  data: [
    { value: "", label: "Please Select" },
    { value: "single", label: "Single" },
    { value: "married", label: "Married" },
    { value: "divorced", label: "Divorced" },
  ]
}

const country: SelectOption = {
  loading: false,
  data: [
    { value: "", label: "Please Select" },
    { value: "NG", label: "Nigeria" },
  ]
}