Convert existing Formik form into multistep - reactjs

Question

I have a basic form opening in a modal, but need to convert this form to a multi-step inside the modal. I just cannot get my head around how this would work. Any help would be greatly appreciated!
Form:
import {FC, useState} from 'react'
import * as Yup from 'yup'
import {useFormik} from 'formik'
import {isNotEmpty, /*toAbsoluteUrl*/} from '../../../../../../_metronic/helpers'
import {initialUser, User} from '../core/_models'
import clsx from 'clsx'
import {useListView} from '../core/ListViewProvider'
import {UsersListLoading} from '../components/loading/UsersListLoading'
import {createUser, updateUser} from '../core/_requests'
import {useQueryResponse} from '../core/QueryResponseProvider'
type Props = {
isUserLoading: boolean
user: User
}
const editUserSchema = Yup.object().shape({
email: Yup.string()
.email('Wrong email format')
.min(3, 'Minimum 3 symbols')
.max(50, 'Maximum 50 symbols')
.required('Email is required'),
name: Yup.string()
.min(3, 'Minimum 3 symbols')
.max(50, 'Maximum 50 symbols')
.required('Name is required'),
})
const AddPropForm: FC<Props> = ({user, isUserLoading}) => {
const {setItemIdForUpdate} = useListView()
const {refetch} = useQueryResponse()
const [userForEdit] = useState<User>({
...user,
avatar: user.avatar || initialUser.avatar,
role: user.role || initialUser.role,
position: user.position || initialUser.position,
name: user.name || initialUser.name,
email: user.email || initialUser.email,
})
const cancel = (withRefresh?: boolean) => {
if (withRefresh) {
refetch()
}
setItemIdForUpdate(undefined)
}
// const blankImg = toAbsoluteUrl('/media/svg/avatars/blank.svg')
// const userAvatarImg = toAbsoluteUrl(`/media/${userForEdit.avatar}`)
const formik = useFormik({
initialValues: userForEdit,
validationSchema: editUserSchema,
onSubmit: async (values, {setSubmitting}) => {
setSubmitting(true)
try {
if (isNotEmpty(values.id)) {
await updateUser(values)
} else {
await createUser(values)
}
} catch (ex) {
console.error(ex)
} finally {
setSubmitting(true)
cancel(true)
}
},
})
return (
<>
<form id='kt_modal_add_user_form' className='form' onSubmit={formik.handleSubmit} noValidate>
{/* begin::Scroll */}
<div
className='d-flex flex-column scroll-y me-n7 pe-7'
id='kt_modal_add_user_scroll'
data-kt-scroll='true'
data-kt-scroll-activate='{default: false, lg: true}'
data-kt-scroll-max-height='auto'
data-kt-scroll-dependencies='#kt_modal_add_user_header'
data-kt-scroll-wrappers='#kt_modal_add_user_scroll'
data-kt-scroll-offset='300px'
>
{/* begin::Input group */}
{/* <div className='fv-row mb-7'> */}
{/* begin::Label */}
{/* <label className='d-block fw-bold fs-6 mb-5'>Avatar</label> */}
{/* end::Label */}
{/* begin::Image input */}
{/* <div
className='image-input image-input-outline'
data-kt-image-input='true'
style={{backgroundImage: `url('${blankImg}')`}}
> */}
{/* begin::Preview existing avatar */}
{/* <div
className='image-input-wrapper w-125px h-125px'
style={{backgroundImage: `url('${userAvatarImg}')`}}
></div> */}
{/* end::Preview existing avatar */}
{/* begin::Label */}
{/* <label
className='btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow'
data-kt-image-input-action='change'
data-bs-toggle='tooltip'
title='Change avatar'
>
<i className='bi bi-pencil-fill fs-7'></i>
<input type='file' name='avatar' accept='.png, .jpg, .jpeg' />
<input type='hidden' name='avatar_remove' />
</label> */}
{/* end::Label */}
{/* begin::Cancel */}
{/* <span
className='btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow'
data-kt-image-input-action='cancel'
data-bs-toggle='tooltip'
title='Cancel avatar'
>
<i className='bi bi-x fs-2'></i>
</span> */}
{/* end::Cancel */}
{/* begin::Remove */}
{/* <span
className='btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow'
data-kt-image-input-action='remove'
data-bs-toggle='tooltip'
title='Remove avatar'
>
<i className='bi bi-x fs-2'></i>
</span> */}
{/* end::Remove */}
{/* </div> */}
{/* end::Image input */}
{/* begin::Hint */}
{/* <div className='form-text'>Allowed file types: png, jpg, jpeg.</div> */}
{/* end::Hint */}
{/* </div> */}
{/* end::Input group */}
{/* begin::Input group */}
<div className='fv-row mb-7'>
{/* begin::Label */}
<label className='required fw-bold fs-6 mb-2'>Full Name</label>
{/* end::Label */}
{/* begin::Input */}
<input
placeholder='Full name'
{...formik.getFieldProps('name')}
type='text'
name='name'
className={clsx(
'form-control form-control-solid mb-3 mb-lg-0',
{'is-invalid': formik.touched.name && formik.errors.name},
{
'is-valid': formik.touched.name && !formik.errors.name,
}
)}
autoComplete='off'
disabled={formik.isSubmitting || isUserLoading}
/>
{formik.touched.name && formik.errors.name && (
<div className='fv-plugins-message-container'>
<div className='fv-help-block'>
<span role='alert'>{formik.errors.name}</span>
</div>
</div>
)}
{/* end::Input */}
</div>
{/* end::Input group */}
{/* begin::Input group */}
<div className='fv-row mb-7'>
{/* begin::Label */}
<label className='required fw-bold fs-6 mb-2'>Email</label>
{/* end::Label */}
{/* begin::Input */}
<input
placeholder='Email'
{...formik.getFieldProps('email')}
className={clsx(
'form-control form-control-solid mb-3 mb-lg-0',
{'is-invalid': formik.touched.email && formik.errors.email},
{
'is-valid': formik.touched.email && !formik.errors.email,
}
)}
type='email'
name='email'
autoComplete='off'
disabled={formik.isSubmitting || isUserLoading}
/>
{/* end::Input */}
{formik.touched.email && formik.errors.email && (
<div className='fv-plugins-message-container'>
<span role='alert'>{formik.errors.email}</span>
</div>
)}
</div>
{/* end::Input group */}
{/* begin::Input group */}
<div className='mb-7'>
{/* begin::Label */}
<label className='required fw-bold fs-6 mb-5'>Role</label>
{/* end::Label */}
{/* begin::Roles */}
{/* begin::Input row */}
<div className='d-flex fv-row'>
{/* begin::Radio */}
<div className='form-check form-check-custom form-check-solid'>
{/* begin::Input */}
<input
className='form-check-input me-3'
{...formik.getFieldProps('role')}
name='role'
type='radio'
value='Tenant'
id='kt_modal_update_role_option_0'
checked={true}
disabled={true}
/>
{/* end::Input */}
{/* begin::Label */}
<label className='form-check-label' htmlFor='kt_modal_update_role_option_0'>
<div className='fw-bolder text-gray-800'>Tenant</div>
<div className='text-gray-600'>
Create an invite for a tenant to register with Landlord Direct
</div>
</label>
{/* end::Label */}
</div>
{/* end::Radio */}
</div>
{/* end::Input row */}
{/* <div className='separator separator-dashed my-5'></div> */}
{/* begin::Input row */}
{/* <div className='d-flex fv-row'> */}
{/* begin::Radio */}
{/* <div className='form-check form-check-custom form-check-solid'> */}
{/* begin::Input */}
{/* <input
className='form-check-input me-3'
{...formik.getFieldProps('role')}
name='role'
type='radio'
value='Developer'
id='kt_modal_update_role_option_1'
checked={formik.values.role === 'Developer'}
disabled={formik.isSubmitting || isUserLoading}
/> */}
{/* end::Input */}
{/* begin::Label */}
{/* <label className='form-check-label' htmlFor='kt_modal_update_role_option_1'>
<div className='fw-bolder text-gray-800'>Developer</div>
<div className='text-gray-600'>
Best for developers or people primarily using the API
</div>
</label> */}
{/* end::Label */}
{/* </div> */}
{/* end::Radio */}
{/* </div> */}
{/* end::Input row */}
{/* <div className='separator separator-dashed my-5'></div> */}
{/* begin::Input row */}
{/* <div className='d-flex fv-row'> */}
{/* begin::Radio */}
{/* <div className='form-check form-check-custom form-check-solid'> */}
{/* begin::Input */}
{/* <input
className='form-check-input me-3'
{...formik.getFieldProps('role')}
name='role'
type='radio'
value='Analyst'
id='kt_modal_update_role_option_2'
checked={formik.values.role === 'Analyst'}
disabled={formik.isSubmitting || isUserLoading}
/> */}
{/* end::Input */}
{/* begin::Label */}
{/* <label className='form-check-label' htmlFor='kt_modal_update_role_option_2'>
<div className='fw-bolder text-gray-800'>Analyst</div>
<div className='text-gray-600'>
Best for people who need full access to analytics data, but don't need to update
business settings
</div>
</label> */}
{/* end::Label */}
{/* </div> */}
{/* end::Radio */}
{/* </div> */}
{/* end::Input row */}
{/* <div className='separator separator-dashed my-5'></div> */}
{/* begin::Input row */}
{/* <div className='d-flex fv-row'> */}
{/* begin::Radio */}
{/* <div className='form-check form-check-custom form-check-solid'> */}
{/* begin::Input */}
{/* <input
className='form-check-input me-3'
{...formik.getFieldProps('role')}
name='role'
type='radio'
value='Support'
id='kt_modal_update_role_option_3'
checked={formik.values.role === 'Support'}
disabled={formik.isSubmitting || isUserLoading}
/> */}
{/* end::Input */}
{/* begin::Label */}
{/* <label className='form-check-label' htmlFor='kt_modal_update_role_option_3'>
<div className='fw-bolder text-gray-800'>Support</div>
<div className='text-gray-600'>
Best for employees who regularly refund payments and respond to disputes
</div>
</label> */}
{/* end::Label */}
{/* </div> */}
{/* end::Radio */}
{/* </div> */}
{/* end::Input row */}
{/* <div className='separator separator-dashed my-5'></div> */}
{/* begin::Input row */}
{/* <div className='d-flex fv-row'> */}
{/* begin::Radio */}
{/* <div className='form-check form-check-custom form-check-solid'> */}
{/* begin::Input */}
{/* <input
className='form-check-input me-3'
{...formik.getFieldProps('role')}
name='role'
type='radio'
id='kt_modal_update_role_option_4'
value='Trial'
checked={formik.values.role === 'Trial'}
disabled={formik.isSubmitting || isUserLoading}
/> */}
{/* end::Input */}
{/* begin::Label */}
{/* <label className='form-check-label' htmlFor='kt_modal_update_role_option_4'>
<div className='fw-bolder text-gray-800'>Trial</div>
<div className='text-gray-600'>
Best for people who need to preview content data, but don't need to make any
updates
</div>
</label> */}
{/* end::Label */}
{/* </div> */}
{/* end::Radio */}
{/* </div> */}
{/* end::Input row */}
{/* end::Roles */}
</div>
{/* end::Input group */}
</div>
{/* end::Scroll */}
{/* begin::Actions */}
<div className='text-center pt-15'>
<button
type='reset'
onClick={() => cancel()}
className='btn btn-light me-3'
data-kt-users-modal-action='cancel'
disabled={formik.isSubmitting || isUserLoading}
>
Discard
</button>
<button
type='submit'
className='btn btn-primary'
data-kt-users-modal-action='submit'
disabled={isUserLoading || formik.isSubmitting || !formik.isValid || !formik.touched}
>
<span className='indicator-label'>Submit</span>
{(formik.isSubmitting || isUserLoading) && (
<span className='indicator-progress'>
Please wait...{' '}
<span className='spinner-border spinner-border-sm align-middle ms-2'></span>
</span>
)}
</button>
</div>
{/* end::Actions */}
</form>
{(formik.isSubmitting || isUserLoading) && <UsersListLoading />}
</>
)
}
export {AddPropForm}
The form wrapper:
import {useQuery} from 'react-query'
import {AddPropForm} from './AddPropForm'
import {isNotEmpty, QUERIES} from '../../../../../../_metronic/helpers'
import {useListView} from '../core/ListViewProvider'
import {getUserById} from '../core/_requests'
const AddPropModalFormWrapper = () => {
const {itemIdForUpdate, setItemIdForUpdate} = useListView()
const enabledQuery: boolean = isNotEmpty(itemIdForUpdate)
const {
isLoading,
data: user,
error,
} = useQuery(
`${QUERIES.USERS_LIST}-user-${itemIdForUpdate}`,
() => {
return getUserById(itemIdForUpdate)
},
{
cacheTime: 0,
enabled: enabledQuery,
onError: (err) => {
setItemIdForUpdate(undefined)
console.error(err)
},
}
)
if (!itemIdForUpdate) {
return <AddPropForm isUserLoading={isLoading} user={{id: undefined}} />
}
if (!isLoading && !error && user) {
return <AddPropForm isUserLoading={isLoading} user={user} />
}
return null
}
export {AddPropModalFormWrapper}
The form I am trying replace the current form with:
mport React, {FC, useEffect, useRef, useState} from 'react'
import {Step1} from './steps/Step1'
import {Step2} from './steps/Step2'
import {Step3} from './steps/Step3'
import {Step4} from './steps/Step4'
import {Step5} from './steps/Step5'
import {KTSVG} from '../../../../_metronic/helpers'
import {StepperComponent} from '../../../../_metronic/assets/ts/components'
import {Formik, Form, FormikValues} from 'formik'
import {createAccountSchemas, ICreateAccount, inits} from './CreateAccountWizardHelper'
const Horizontal: FC = () => {
const stepperRef = useRef<HTMLDivElement | null>(null)
const stepper = useRef<StepperComponent | null>(null)
const [currentSchema, setCurrentSchema] = useState(createAccountSchemas[0])
const [initValues] = useState<ICreateAccount>(inits)
const [isSubmitButton, setSubmitButton] = useState(false)
const loadStepper = () => {
stepper.current = StepperComponent.createInsance(stepperRef.current as HTMLDivElement)
}
const prevStep = () => {
if (!stepper.current) {
return
}
setSubmitButton(stepper.current.currentStepIndex === stepper.current.totatStepsNumber! - 1)
stepper.current.goPrev()
setCurrentSchema(createAccountSchemas[stepper.current.currentStepIndex - 1])
}
const submitStep = (values: ICreateAccount, actions: FormikValues) => {
if (!stepper.current) {
return
}
setSubmitButton(stepper.current.currentStepIndex === stepper.current.totatStepsNumber! - 1)
setCurrentSchema(createAccountSchemas[stepper.current.currentStepIndex])
if (stepper.current.currentStepIndex !== stepper.current.totatStepsNumber) {
stepper.current.goNext()
} else {
stepper.current.goto(1)
actions.resetForm()
}
}
useEffect(() => {
if (!stepperRef.current) {
return
}
loadStepper()
}, [stepperRef])
return (
<div className='card'>
<div className='card-body'>
<div
ref={stepperRef}
className='stepper stepper-links d-flex flex-column pt-15'
id='kt_create_account_stepper'
>
<div className='stepper-nav mb-5'>
<div className='stepper-item current' data-kt-stepper-element='nav'>
<h3 className='stepper-title'>Account Type</h3>
</div>
<div className='stepper-item' data-kt-stepper-element='nav'>
<h3 className='stepper-title'>Account Info</h3>
</div>
<div className='stepper-item' data-kt-stepper-element='nav'>
<h3 className='stepper-title'>Business Info</h3>
</div>
<div className='stepper-item' data-kt-stepper-element='nav'>
<h3 className='stepper-title'>Billing Details</h3>
</div>
<div className='stepper-item' data-kt-stepper-element='nav'>
<h3 className='stepper-title'>Completed</h3>
</div>
</div>
<Formik validationSchema={currentSchema} initialValues={initValues} onSubmit={submitStep}>
{() => (
<Form className='mx-auto mw-600px w-100 pt-15 pb-10' id='kt_create_account_form'>
<div className='current' data-kt-stepper-element='content'>
<Step1 />
</div>
<div data-kt-stepper-element='content'>
<Step2 />
</div>
<div data-kt-stepper-element='content'>
<Step3 />
</div>
<div data-kt-stepper-element='content'>
<Step4 />
</div>
<div data-kt-stepper-element='content'>
<Step5 />
</div>
<div className='d-flex flex-stack pt-15'>
<div className='mr-2'>
<button
onClick={prevStep}
type='button'
className='btn btn-lg btn-light-primary me-3'
data-kt-stepper-action='previous'
>
<KTSVG
path='/media/icons/duotune/arrows/arr063.svg'
className='svg-icon-4 me-1'
/>
Back
</button>
</div>
<div>
<button type='submit' className='btn btn-lg btn-primary me-3'>
<span className='indicator-label'>
{!isSubmitButton && 'Continue'}
{isSubmitButton && 'Submit'}
<KTSVG
path='/media/icons/duotune/arrows/arr064.svg'
className='svg-icon-3 ms-2 me-0'
/>
</span>
</button>
</div>
</div>
</Form>
)}
</Formik>
</div>
</div>
</div>
)
}
export {Horizontal}
What would be the correct way of bringing in the multi step functionality of the new form whilst still having it open inside the modal?