first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,61 @@
|
||||
import * as Yup from 'yup'
|
||||
|
||||
export interface ICreateAccount {
|
||||
accountType: string
|
||||
accountTeamSize: string
|
||||
accountName: string
|
||||
accountPlan: string
|
||||
businessName: string
|
||||
businessDescriptor: string
|
||||
businessType: string
|
||||
businessDescription: string
|
||||
businessEmail: string
|
||||
nameOnCard: string
|
||||
cardNumber: string
|
||||
cardExpiryMonth: string
|
||||
cardExpiryYear: string
|
||||
cardCvv: string
|
||||
saveCard: string
|
||||
}
|
||||
|
||||
const createAccountSchemas = [
|
||||
Yup.object({
|
||||
accountType: Yup.string().required().label('Account Type'),
|
||||
}),
|
||||
Yup.object({
|
||||
accountName: Yup.string().required().label('Account Name'),
|
||||
}),
|
||||
Yup.object({
|
||||
businessName: Yup.string().required().label('Business Name'),
|
||||
businessDescriptor: Yup.string().required().label('Shortened Descriptor'),
|
||||
businessType: Yup.string().required().label('Corporation Type'),
|
||||
businessEmail: Yup.string().required().label('Contact Email'),
|
||||
}),
|
||||
Yup.object({
|
||||
nameOnCard: Yup.string().required().label('Name On Card'),
|
||||
cardNumber: Yup.string().required().label('Card Number'),
|
||||
cardExpiryMonth: Yup.string().required().label('Expiration Month'),
|
||||
cardExpiryYear: Yup.string().required().label('Expiration Year'),
|
||||
cardCvv: Yup.string().required().label('CVV'),
|
||||
}),
|
||||
]
|
||||
|
||||
const inits: ICreateAccount = {
|
||||
accountType: 'personal',
|
||||
accountTeamSize: '50+',
|
||||
accountName: '',
|
||||
accountPlan: '1',
|
||||
businessName: 'Keenthemes Inc.',
|
||||
businessDescriptor: 'KEENTHEMES',
|
||||
businessType: '1',
|
||||
businessDescription: '',
|
||||
businessEmail: 'corp@support.com',
|
||||
nameOnCard: 'Max Doe',
|
||||
cardNumber: '4111 1111 1111 1111',
|
||||
cardExpiryMonth: '1',
|
||||
cardExpiryYear: '2025',
|
||||
cardCvv: '123',
|
||||
saveCard: '1',
|
||||
}
|
||||
|
||||
export {createAccountSchemas, inits}
|
||||
@@ -0,0 +1,154 @@
|
||||
import {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 {KTIcon} from '../../../../_metronic/helpers'
|
||||
import {StepperComponent} from '../../../../_metronic/assets/ts/components'
|
||||
import {Form, Formik, FormikValues} from 'formik'
|
||||
import {createAccountSchemas, ICreateAccount, inits} from './CreateAccountWizardHelper'
|
||||
import { ToolbarWrapper } from '../../../../_metronic/layout/components/toolbar'
|
||||
import { Content } from '../../../../_metronic/layout/components/content'
|
||||
|
||||
const Horizontal: FC = () => {
|
||||
const stepperRef = useRef<HTMLDivElement | null>(null)
|
||||
const [ stepper, setStepper ] = useState<StepperComponent | null>(null)
|
||||
const [currentSchema, setCurrentSchema] = useState(createAccountSchemas[0])
|
||||
const [initValues] = useState<ICreateAccount>(inits)
|
||||
const [isSubmitButton, setSubmitButton] = useState(false)
|
||||
|
||||
const loadStepper = () => {
|
||||
setStepper(StepperComponent.createInsance(stepperRef.current as HTMLDivElement))
|
||||
}
|
||||
|
||||
const prevStep = () => {
|
||||
if (!stepper) {
|
||||
return
|
||||
}
|
||||
|
||||
stepper.goPrev()
|
||||
|
||||
setCurrentSchema(createAccountSchemas[stepper.currentStepIndex - 1])
|
||||
|
||||
setSubmitButton(stepper.currentStepIndex === stepper.totalStepsNumber)
|
||||
}
|
||||
|
||||
const submitStep = (values: ICreateAccount, actions: FormikValues) => {
|
||||
if (!stepper) {
|
||||
return
|
||||
}
|
||||
|
||||
if (stepper.currentStepIndex !== stepper.totalStepsNumber) {
|
||||
stepper.goNext()
|
||||
} else {
|
||||
stepper.goto(1)
|
||||
actions.resetForm()
|
||||
}
|
||||
|
||||
setSubmitButton(stepper.currentStepIndex === stepper.totalStepsNumber)
|
||||
|
||||
console.log(values);
|
||||
|
||||
setCurrentSchema(createAccountSchemas[stepper.currentStepIndex - 1])
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!stepperRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
loadStepper()
|
||||
}, [stepperRef])
|
||||
|
||||
return (
|
||||
<>
|
||||
<ToolbarWrapper />
|
||||
<Content>
|
||||
<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' placeholder={undefined}>
|
||||
<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'
|
||||
>
|
||||
<KTIcon iconName='arrow-left' className='fs-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'}
|
||||
<KTIcon iconName='arrow-right' className='fs-3 ms-2 me-0' />
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Content>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export {Horizontal}
|
||||
@@ -0,0 +1,264 @@
|
||||
import {useEffect, useRef, useState} from 'react'
|
||||
import {KTIcon} from '../../../../_metronic/helpers'
|
||||
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 {StepperComponent} from '../../../../_metronic/assets/ts/components'
|
||||
import {Form, Formik, FormikValues} from 'formik'
|
||||
import {createAccountSchemas, ICreateAccount, inits} from './CreateAccountWizardHelper'
|
||||
import { ToolbarWrapper } from '../../../../_metronic/layout/components/toolbar'
|
||||
import { Content } from '../../../../_metronic/layout/components/content'
|
||||
|
||||
const Vertical = () => {
|
||||
const stepperRef = useRef<HTMLDivElement | null>(null)
|
||||
const [ stepper, setStepper ] = useState<StepperComponent | null>(null)
|
||||
const [currentSchema, setCurrentSchema] = useState(createAccountSchemas[0])
|
||||
const [initValues] = useState<ICreateAccount>(inits)
|
||||
|
||||
const loadStepper = () => {
|
||||
setStepper(StepperComponent.createInsance(stepperRef.current as HTMLDivElement))
|
||||
}
|
||||
|
||||
const prevStep = () => {
|
||||
if (!stepper) {
|
||||
return
|
||||
}
|
||||
|
||||
stepper.goPrev()
|
||||
|
||||
setCurrentSchema(createAccountSchemas[stepper.currentStepIndex - 1])
|
||||
}
|
||||
|
||||
const submitStep = (values: ICreateAccount, actions: FormikValues) => {
|
||||
if (!stepper) {
|
||||
return
|
||||
}
|
||||
|
||||
if (stepper.currentStepIndex !== stepper.totalStepsNumber) {
|
||||
stepper.goNext()
|
||||
} else {
|
||||
stepper.goto(1)
|
||||
actions.resetForm()
|
||||
}
|
||||
|
||||
console.log(values);
|
||||
|
||||
setCurrentSchema(createAccountSchemas[stepper.currentStepIndex - 1])
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!stepperRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
loadStepper()
|
||||
}, [stepperRef])
|
||||
|
||||
return (
|
||||
<>
|
||||
<ToolbarWrapper />
|
||||
<Content>
|
||||
<div
|
||||
ref={stepperRef}
|
||||
className='stepper stepper-pills stepper-column d-flex flex-column flex-xl-row flex-row-fluid'
|
||||
id='kt_create_account_stepper'
|
||||
>
|
||||
{/* begin::Aside*/}
|
||||
<div className='card d-flex justify-content-center justify-content-xl-start flex-row-auto w-100 w-xl-300px w-xxl-400px me-9'>
|
||||
{/* begin::Wrapper*/}
|
||||
<div className='card-body px-6 px-lg-10 px-xxl-15 py-20'>
|
||||
{/* begin::Nav*/}
|
||||
<div className='stepper-nav'>
|
||||
{/* begin::Step 1*/}
|
||||
<div className='stepper-item current' data-kt-stepper-element='nav'>
|
||||
{/* begin::Wrapper*/}
|
||||
<div className='stepper-wrapper'>
|
||||
{/* begin::Icon*/}
|
||||
<div className='stepper-icon w-40px h-40px'>
|
||||
<i className='stepper-check fas fa-check'></i>
|
||||
<span className='stepper-number'>1</span>
|
||||
</div>
|
||||
{/* end::Icon*/}
|
||||
|
||||
{/* begin::Label*/}
|
||||
<div className='stepper-label'>
|
||||
<h3 className='stepper-title'>Account Type</h3>
|
||||
|
||||
<div className='stepper-desc fw-semibold'>Setup Your Account Details</div>
|
||||
</div>
|
||||
{/* end::Label*/}
|
||||
</div>
|
||||
{/* end::Wrapper*/}
|
||||
|
||||
{/* begin::Line*/}
|
||||
<div className='stepper-line h-40px'></div>
|
||||
{/* end::Line*/}
|
||||
</div>
|
||||
{/* end::Step 1*/}
|
||||
|
||||
{/* begin::Step 2*/}
|
||||
<div className='stepper-item' data-kt-stepper-element='nav'>
|
||||
{/* begin::Wrapper*/}
|
||||
<div className='stepper-wrapper'>
|
||||
{/* begin::Icon*/}
|
||||
<div className='stepper-icon w-40px h-40px'>
|
||||
<i className='stepper-check fas fa-check'></i>
|
||||
<span className='stepper-number'>2</span>
|
||||
</div>
|
||||
{/* end::Icon*/}
|
||||
|
||||
{/* begin::Label*/}
|
||||
<div className='stepper-label'>
|
||||
<h3 className='stepper-title'>Account Settings</h3>
|
||||
<div className='stepper-desc fw-semibold'>Setup Your Account Settings</div>
|
||||
</div>
|
||||
{/* end::Label*/}
|
||||
</div>
|
||||
{/* end::Wrapper*/}
|
||||
|
||||
{/* begin::Line*/}
|
||||
<div className='stepper-line h-40px'></div>
|
||||
{/* end::Line*/}
|
||||
</div>
|
||||
{/* end::Step 2*/}
|
||||
|
||||
{/* begin::Step 3*/}
|
||||
<div className='stepper-item' data-kt-stepper-element='nav'>
|
||||
{/* begin::Wrapper*/}
|
||||
<div className='stepper-wrapper'>
|
||||
{/* begin::Icon*/}
|
||||
<div className='stepper-icon w-40px h-40px'>
|
||||
<i className='stepper-check fas fa-check'></i>
|
||||
<span className='stepper-number'>3</span>
|
||||
</div>
|
||||
{/* end::Icon*/}
|
||||
|
||||
{/* begin::Label*/}
|
||||
<div className='stepper-label'>
|
||||
<h3 className='stepper-title'>Business Info</h3>
|
||||
<div className='stepper-desc fw-semibold'>Your Business Related Info</div>
|
||||
</div>
|
||||
{/* end::Label*/}
|
||||
</div>
|
||||
{/* end::Wrapper*/}
|
||||
|
||||
{/* begin::Line*/}
|
||||
<div className='stepper-line h-40px'></div>
|
||||
{/* end::Line*/}
|
||||
</div>
|
||||
{/* end::Step 3*/}
|
||||
|
||||
{/* begin::Step 4*/}
|
||||
<div className='stepper-item' data-kt-stepper-element='nav'>
|
||||
{/* begin::Wrapper*/}
|
||||
<div className='stepper-wrapper'>
|
||||
{/* begin::Icon*/}
|
||||
<div className='stepper-icon w-40px h-40px'>
|
||||
<i className='stepper-check fas fa-check'></i>
|
||||
<span className='stepper-number'>4</span>
|
||||
</div>
|
||||
{/* end::Icon*/}
|
||||
|
||||
{/* begin::Label*/}
|
||||
<div className='stepper-label'>
|
||||
<h3 className='stepper-title'>Billing Details</h3>
|
||||
<div className='stepper-desc fw-semibold'>Set Your Payment Methods</div>
|
||||
</div>
|
||||
{/* end::Label*/}
|
||||
</div>
|
||||
{/* end::Wrapper*/}
|
||||
|
||||
{/* begin::Line*/}
|
||||
<div className='stepper-line h-40px'></div>
|
||||
{/* end::Line*/}
|
||||
</div>
|
||||
{/* end::Step 4*/}
|
||||
|
||||
{/* begin::Step 5*/}
|
||||
<div className='stepper-item' data-kt-stepper-element='nav'>
|
||||
{/* begin::Wrapper*/}
|
||||
<div className='stepper-wrapper'>
|
||||
{/* begin::Icon*/}
|
||||
<div className='stepper-icon w-40px h-40px'>
|
||||
<i className='stepper-check fas fa-check'></i>
|
||||
<span className='stepper-number'>5</span>
|
||||
</div>
|
||||
{/* end::Icon*/}
|
||||
|
||||
{/* begin::Label*/}
|
||||
<div className='stepper-label'>
|
||||
<h3 className='stepper-title'>Completed</h3>
|
||||
<div className='stepper-desc fw-semibold'>Woah, we are here</div>
|
||||
</div>
|
||||
{/* end::Label*/}
|
||||
</div>
|
||||
{/* end::Wrapper*/}
|
||||
</div>
|
||||
{/* end::Step 5*/}
|
||||
</div>
|
||||
{/* end::Nav*/}
|
||||
</div>
|
||||
{/* end::Wrapper*/}
|
||||
</div>
|
||||
{/* begin::Aside*/}
|
||||
|
||||
<div className='d-flex flex-row-fluid flex-center bg-body rounded'>
|
||||
<Formik validationSchema={currentSchema} initialValues={initValues} onSubmit={submitStep}>
|
||||
{() => (
|
||||
<Form className='py-20 w-100 w-xl-700px px-9' noValidate id='kt_create_account_form' placeholder={undefined}>
|
||||
<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-10'>
|
||||
<div className='mr-2'>
|
||||
<button
|
||||
onClick={prevStep}
|
||||
type='button'
|
||||
className='btn btn-lg btn-light-primary me-3'
|
||||
data-kt-stepper-action='previous'
|
||||
>
|
||||
<KTIcon iconName='arrow-left' className='fs-4 me-1' />
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button type='submit' className='btn btn-lg btn-primary me-3'>
|
||||
<span className='indicator-label'>
|
||||
{stepper?.currentStepIndex !== ((stepper?.totalStepsNumber || 2) - 1) && 'Continue'}
|
||||
{stepper?.currentStepIndex === ((stepper?.totalStepsNumber || 2) - 1) && 'Submit'}
|
||||
<KTIcon iconName='arrow-right' className='fs-3 ms-2 me-0' />
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</div>
|
||||
</div>
|
||||
</Content>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export {Vertical}
|
||||
@@ -0,0 +1,85 @@
|
||||
import {FC} from 'react'
|
||||
import {KTIcon} from '../../../../../_metronic/helpers'
|
||||
import {ErrorMessage, Field} from 'formik'
|
||||
|
||||
const Step1: FC = () => {
|
||||
return (
|
||||
<div className='w-100'>
|
||||
<div className='pb-10 pb-lg-15'>
|
||||
<h2 className='fw-bolder d-flex align-items-center text-gray-900'>
|
||||
Choose Account Type
|
||||
<i
|
||||
className='fas fa-exclamation-circle ms-2 fs-7'
|
||||
data-bs-toggle='tooltip'
|
||||
title='Billing is issued based on your selected account type'
|
||||
></i>
|
||||
</h2>
|
||||
|
||||
<div className='text-gray-500 fw-bold fs-6'>
|
||||
If you need more info, please check out
|
||||
<a href='/dashboard' className='link-primary fw-bolder'>
|
||||
{' '}
|
||||
Help Page
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='fv-row'>
|
||||
<div className='row'>
|
||||
<div className='col-lg-6'>
|
||||
<Field
|
||||
type='radio'
|
||||
className='btn-check'
|
||||
name='accountType'
|
||||
value='personal'
|
||||
id='kt_create_account_form_account_type_personal'
|
||||
/>
|
||||
<label
|
||||
className='btn btn-outline btn-outline-dashed btn-outline-default p-7 d-flex align-items-center mb-10'
|
||||
htmlFor='kt_create_account_form_account_type_personal'
|
||||
>
|
||||
<KTIcon iconName='address-book' className='fs-3x me-5' />
|
||||
|
||||
<span className='d-block fw-bold text-start'>
|
||||
<span className='text-gray-900 fw-bolder d-block fs-4 mb-2'>Personal Account</span>
|
||||
<span className='text-gray-500 fw-bold fs-6'>
|
||||
If you need more info, please check it out
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className='col-lg-6'>
|
||||
<Field
|
||||
type='radio'
|
||||
className='btn-check'
|
||||
name='accountType'
|
||||
value='corporate'
|
||||
id='kt_create_account_form_account_type_corporate'
|
||||
/>
|
||||
<label
|
||||
className='btn btn-outline btn-outline-dashed btn-outline-default p-7 d-flex align-items-center'
|
||||
htmlFor='kt_create_account_form_account_type_corporate'
|
||||
>
|
||||
<KTIcon iconName='briefcase' className='fs-3x me-5' />
|
||||
|
||||
<span className='d-block fw-bold text-start'>
|
||||
<span className='text-gray-900 fw-bolder d-block fs-4 mb-2'>Corporate Account</span>
|
||||
<span className='text-gray-500 fw-bold fs-6'>
|
||||
Create corporate account to mane users
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className='text-danger mt-2'>
|
||||
<ErrorMessage name='accountType' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {Step1}
|
||||
@@ -0,0 +1,198 @@
|
||||
import {FC} from 'react'
|
||||
import {KTIcon} from '../../../../../_metronic/helpers'
|
||||
import {ErrorMessage, Field} from 'formik'
|
||||
|
||||
const Step2: FC = () => {
|
||||
return (
|
||||
<div className='w-100'>
|
||||
<div className='pb-10 pb-lg-15'>
|
||||
<h2 className='fw-bolder text-gray-900'>Account Info</h2>
|
||||
|
||||
<div className='text-gray-500 fw-bold fs-6'>
|
||||
If you need more info, please check out
|
||||
<a href='/dashboard' className='link-primary fw-bolder'>
|
||||
{' '}
|
||||
Help Page
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mb-10 fv-row'>
|
||||
<label className='d-flex align-items-center form-label mb-3'>
|
||||
Specify Team Size
|
||||
<i
|
||||
className='fas fa-exclamation-circle ms-2 fs-7'
|
||||
data-bs-toggle='tooltip'
|
||||
title='Provide your team size to help us setup your billing'
|
||||
></i>
|
||||
</label>
|
||||
|
||||
<div className='row mb-2' data-kt-buttons='true'>
|
||||
<div className='col'>
|
||||
<Field
|
||||
type='radio'
|
||||
className='btn-check'
|
||||
name='accountTeamSize'
|
||||
value='1-1'
|
||||
id='kt_account_team_size_select_1'
|
||||
/>
|
||||
<label
|
||||
className='btn btn-outline btn-outline-dashed btn-outline-default w-100 p-4'
|
||||
htmlFor='kt_account_team_size_select_1'
|
||||
>
|
||||
<span className='fw-bolder fs-3'>1-1</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className='col'>
|
||||
<Field
|
||||
type='radio'
|
||||
className='btn-check'
|
||||
name='accountTeamSize'
|
||||
value='2-10'
|
||||
id='kt_account_team_size_select_2'
|
||||
/>
|
||||
<label
|
||||
className='btn btn-outline btn-outline-dashed btn-outline-default w-100 p-4'
|
||||
htmlFor='kt_account_team_size_select_2'
|
||||
>
|
||||
<span className='fw-bolder fs-3'>2-10</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className='col'>
|
||||
<Field
|
||||
type='radio'
|
||||
className='btn-check'
|
||||
name='accountTeamSize'
|
||||
value='10-50'
|
||||
id='kt_account_team_size_select_3'
|
||||
/>
|
||||
<label
|
||||
className='btn btn-outline btn-outline-dashed btn-outline-default w-100 p-4'
|
||||
htmlFor='kt_account_team_size_select_3'
|
||||
>
|
||||
<span className='fw-bolder fs-3'>10-50</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className='col'>
|
||||
<Field
|
||||
type='radio'
|
||||
className='btn-check'
|
||||
name='accountTeamSize'
|
||||
value='50+'
|
||||
id='kt_account_team_size_select_4'
|
||||
/>
|
||||
<label
|
||||
className='btn btn-outline btn-outline-dashed btn-outline-default w-100 p-4'
|
||||
htmlFor='kt_account_team_size_select_4'
|
||||
>
|
||||
<span className='fw-bolder fs-3'>50+</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='form-text'>
|
||||
Customers will see this shortened version of your statement descriptor
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mb-10 fv-row'>
|
||||
<label className='form-label mb-3'>Team Account Name</label>
|
||||
|
||||
<Field
|
||||
type='text'
|
||||
className='form-control form-control-lg form-control-solid'
|
||||
name='accountName'
|
||||
/>
|
||||
<div className='text-danger mt-2'>
|
||||
<ErrorMessage name='accountName' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mb-0 fv-row'>
|
||||
<label className='d-flex align-items-center form-label mb-5'>
|
||||
Select Account Plan
|
||||
<i
|
||||
className='fas fa-exclamation-circle ms-2 fs-7'
|
||||
data-bs-toggle='tooltip'
|
||||
title='Monthly billing will be based on your account plan'
|
||||
></i>
|
||||
</label>
|
||||
|
||||
<div className='mb-0'>
|
||||
<label className='d-flex flex-stack mb-5 cursor-pointer'>
|
||||
<span className='d-flex align-items-center me-2'>
|
||||
<span className='symbol symbol-50px me-6'>
|
||||
<span className='symbol-label'>
|
||||
<KTIcon iconName='bank' className='fs-1 text-gray-600' />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='d-flex flex-column'>
|
||||
<span className='fw-bolder text-gray-800 text-hover-primary fs-5'>
|
||||
Company Account
|
||||
</span>
|
||||
<span className='fs-6 fw-bold text-gray-500'>
|
||||
Use images to enhance your post flow
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='form-check form-check-custom form-check-solid'>
|
||||
<Field className='form-check-input' type='radio' name='accountPlan' value='1' />
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<label className='d-flex flex-stack mb-5 cursor-pointer'>
|
||||
<span className='d-flex align-items-center me-2'>
|
||||
<span className='symbol symbol-50px me-6'>
|
||||
<span className='symbol-label'>
|
||||
<KTIcon iconName='chart' className='fs-1 text-gray-600' />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='d-flex flex-column'>
|
||||
<span className='fw-bolder text-gray-800 text-hover-primary fs-5'>
|
||||
Developer Account
|
||||
</span>
|
||||
<span className='fs-6 fw-bold text-gray-500'>Use images to your post time</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='form-check form-check-custom form-check-solid'>
|
||||
<Field className='form-check-input' type='radio' name='accountPlan' value='2' />
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<label className='d-flex flex-stack mb-0 cursor-pointer'>
|
||||
<span className='d-flex align-items-center me-2'>
|
||||
<span className='symbol symbol-50px me-6'>
|
||||
<span className='symbol-label'>
|
||||
<KTIcon iconName='chart-pie-4' className='fs-1 text-gray-600' />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='d-flex flex-column'>
|
||||
<span className='fw-bolder text-gray-800 text-hover-primary fs-5'>
|
||||
Testing Account
|
||||
</span>
|
||||
<span className='fs-6 fw-bold text-gray-500'>
|
||||
Use images to enhance time travel rivers
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='form-check form-check-custom form-check-solid'>
|
||||
<Field className='form-check-input' type='radio' name='accountPlan' value='3' />
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {Step2}
|
||||
@@ -0,0 +1,91 @@
|
||||
import {FC} from 'react'
|
||||
import {Field, ErrorMessage} from 'formik'
|
||||
|
||||
const Step3: FC = () => {
|
||||
return (
|
||||
<div className='w-100'>
|
||||
<div className='pb-10 pb-lg-12'>
|
||||
<h2 className='fw-bolder text-gray-900'>Business Details</h2>
|
||||
|
||||
<div className='text-gray-500 fw-bold fs-6'>
|
||||
If you need more info, please check out
|
||||
<a href='/dashboard' className='link-primary fw-bolder'>
|
||||
{' '}
|
||||
Help Page
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='fv-row mb-10'>
|
||||
<label className='form-label required'>Business Name</label>
|
||||
|
||||
<Field name='businessName' className='form-control form-control-lg form-control-solid' />
|
||||
<div className='text-danger mt-2'>
|
||||
<ErrorMessage name='businessName' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='fv-row mb-10'>
|
||||
<label className='d-flex align-items-center form-label'>
|
||||
<span className='required'>Shortened Descriptor</span>
|
||||
</label>
|
||||
|
||||
<Field
|
||||
name='businessDescriptor'
|
||||
className='form-control form-control-lg form-control-solid'
|
||||
/>
|
||||
<div className='text-danger mt-2'>
|
||||
<ErrorMessage name='businessDescriptor' />
|
||||
</div>
|
||||
|
||||
<div className='form-text'>
|
||||
Customers will see this shortened version of your statement descriptor
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='fv-row mb-10'>
|
||||
<label className='form-label required'>Corporation Type</label>
|
||||
|
||||
<Field
|
||||
as='select'
|
||||
name='businessType'
|
||||
className='form-select form-select-lg form-select-solid'
|
||||
>
|
||||
<option></option>
|
||||
<option value='1'>S Corporation</option>
|
||||
<option value='1'>C Corporation</option>
|
||||
<option value='2'>Sole Proprietorship</option>
|
||||
<option value='3'>Non-profit</option>
|
||||
<option value='4'>Limited Liability</option>
|
||||
<option value='5'>General Partnership</option>
|
||||
</Field>
|
||||
<div className='text-danger mt-2'>
|
||||
<ErrorMessage name='businessType' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='fv-row mb-10'>
|
||||
<label className='form-label'>Business Description</label>
|
||||
|
||||
<Field
|
||||
as='textarea'
|
||||
name='businessDescription'
|
||||
className='form-control form-control-lg form-control-solid'
|
||||
rows={3}
|
||||
></Field>
|
||||
</div>
|
||||
|
||||
<div className='fv-row mb-0'>
|
||||
<label className='fs-6 fw-bold form-label required'>Contact Email</label>
|
||||
|
||||
<Field name='businessEmail' className='form-control form-control-lg form-control-solid' />
|
||||
<div className='text-danger mt-2'>
|
||||
<ErrorMessage name='businessEmail' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {Step3}
|
||||
@@ -0,0 +1,167 @@
|
||||
import {FC} from 'react'
|
||||
import {KTIcon, toAbsoluteUrl} from '../../../../../_metronic/helpers'
|
||||
import {ErrorMessage, Field} from 'formik'
|
||||
|
||||
const Step4: FC = () => {
|
||||
return (
|
||||
<div className='w-100'>
|
||||
<div className='pb-10 pb-lg-15'>
|
||||
<h2 className='fw-bolder text-gray-900'>Billing Details</h2>
|
||||
|
||||
<div className='text-gray-500 fw-bold fs-6'>
|
||||
If you need more info, please check out
|
||||
<a href='/dashboard' className='text-primary fw-bolder'>
|
||||
{' '}
|
||||
Help Page
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-column mb-7 fv-row'>
|
||||
<label className='d-flex align-items-center fs-6 fw-bold form-label mb-2'>
|
||||
<span className='required'>Name On Card</span>
|
||||
<i
|
||||
className='fas fa-exclamation-circle ms-2 fs-7'
|
||||
data-bs-toggle='tooltip'
|
||||
title="Specify a card holder's name"
|
||||
></i>
|
||||
</label>
|
||||
|
||||
<Field
|
||||
type='text'
|
||||
className='form-control form-control-solid'
|
||||
placeholder=''
|
||||
name='nameOnCard'
|
||||
/>
|
||||
<div className='text-danger mt-2'>
|
||||
<ErrorMessage name='nameOnCard' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-column mb-7 fv-row'>
|
||||
<label className='required fs-6 fw-bold form-label mb-2'>Card Number</label>
|
||||
|
||||
<div className='position-relative'>
|
||||
<Field
|
||||
type='text'
|
||||
className='form-control form-control-solid'
|
||||
placeholder='Enter card number'
|
||||
name='cardNumber'
|
||||
/>
|
||||
<div className='text-danger mt-2'>
|
||||
<ErrorMessage name='cardNumber' />
|
||||
</div>
|
||||
|
||||
<div className='position-absolute translate-middle-y top-50 end-0 me-5'>
|
||||
<img src={toAbsoluteUrl('media/svg/card-logos/visa.svg')} alt='' className='h-25px' />
|
||||
<img
|
||||
src={toAbsoluteUrl('media/svg/card-logos/mastercard.svg')}
|
||||
alt=''
|
||||
className='h-25px'
|
||||
/>
|
||||
<img
|
||||
src={toAbsoluteUrl('media/svg/card-logos/american-express.svg')}
|
||||
alt=''
|
||||
className='h-25px'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='row mb-10'>
|
||||
<div className='col-md-8 fv-row'>
|
||||
<label className='required fs-6 fw-bold form-label mb-2'>Expiration Date</label>
|
||||
|
||||
<div className='row fv-row'>
|
||||
<div className='col-6'>
|
||||
<Field as='select' name='cardExpiryMonth' className='form-select form-select-solid'>
|
||||
<option></option>
|
||||
<option value='1'>1</option>
|
||||
<option value='2'>2</option>
|
||||
<option value='3'>3</option>
|
||||
<option value='4'>4</option>
|
||||
<option value='5'>5</option>
|
||||
<option value='6'>6</option>
|
||||
<option value='7'>7</option>
|
||||
<option value='8'>8</option>
|
||||
<option value='9'>9</option>
|
||||
<option value='10'>10</option>
|
||||
<option value='11'>11</option>
|
||||
<option value='12'>12</option>
|
||||
</Field>
|
||||
<div className='text-danger mt-2'>
|
||||
<ErrorMessage name='cardExpiryMonth' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='col-6'>
|
||||
<Field as='select' name='cardExpiryYear' className='form-select form-select-solid'>
|
||||
<option></option>
|
||||
<option value='2021'>2021</option>
|
||||
<option value='2022'>2022</option>
|
||||
<option value='2023'>2023</option>
|
||||
<option value='2024'>2024</option>
|
||||
<option value='2025'>2025</option>
|
||||
<option value='2026'>2026</option>
|
||||
<option value='2027'>2027</option>
|
||||
<option value='2028'>2028</option>
|
||||
<option value='2029'>2029</option>
|
||||
<option value='2030'>2030</option>
|
||||
<option value='2031'>2031</option>
|
||||
</Field>
|
||||
<div className='text-danger mt-2'>
|
||||
<ErrorMessage name='cardExpiryYear' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='col-md-4 fv-row'>
|
||||
<label className='d-flex align-items-center fs-6 fw-bold form-label mb-2'>
|
||||
<span className='required'>CVV</span>
|
||||
<i
|
||||
className='fas fa-exclamation-circle ms-2 fs-7'
|
||||
data-bs-toggle='tooltip'
|
||||
title='Enter a card CVV code'
|
||||
></i>
|
||||
</label>
|
||||
|
||||
<div className='position-relative'>
|
||||
<Field
|
||||
type='text'
|
||||
className='form-control form-control-solid'
|
||||
minLength={3}
|
||||
maxLength={4}
|
||||
placeholder='CVV'
|
||||
name='cardCvv'
|
||||
/>
|
||||
<div className='text-danger mt-2'>
|
||||
<ErrorMessage name='cardCvv' />
|
||||
</div>
|
||||
|
||||
<div className='position-absolute translate-middle-y top-50 end-0 me-3'>
|
||||
<KTIcon iconName='credit-cart' className='fs-2hx' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-stack'>
|
||||
<div className='me-5'>
|
||||
<label className='fs-6 fw-bold form-label'>Save Card for further billing?</label>
|
||||
<div className='fs-7 fw-bold text-gray-500'>
|
||||
If you need more info, please check budget planning
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label className='form-check form-switch form-check-custom form-check-solid'>
|
||||
<Field className='form-check-input' type='checkbox' value='1' checked={true} />
|
||||
<span className='form-check-label fw-bold text-gray-500'>Save Card</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {Step4}
|
||||
@@ -0,0 +1,48 @@
|
||||
import {FC} from 'react'
|
||||
import {KTIcon} from '../../../../../_metronic/helpers'
|
||||
import {Link} from 'react-router-dom'
|
||||
|
||||
const Step5: FC = () => {
|
||||
return (
|
||||
<div className='w-100'>
|
||||
<div className='pb-8 pb-lg-10'>
|
||||
<h2 className='fw-bolder text-gray-900'>Your Are Done!</h2>
|
||||
|
||||
<div className='text-gray-500 fw-bold fs-6'>
|
||||
If you need more info, please
|
||||
<Link to='/auth/login' className='link-primary fw-bolder'>
|
||||
{' '}
|
||||
Sign In
|
||||
</Link>
|
||||
.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mb-0'>
|
||||
<div className='fs-6 text-gray-600 mb-5'>
|
||||
Writing headlines for blog posts is as much an art as it is a science and probably
|
||||
warrants its own post, but for all advise is with what works for your great & amazing
|
||||
audience.
|
||||
</div>
|
||||
|
||||
<div className='notice d-flex bg-light-warning rounded border-warning border border-dashed p-6'>
|
||||
<KTIcon iconName='information-5' className='fs-2tx text-warning me-4' />
|
||||
<div className='d-flex flex-stack flex-grow-1'>
|
||||
<div className='fw-bold'>
|
||||
<h4 className='text-gray-800 fw-bolder'>We need your attention!</h4>
|
||||
<div className='fs-6 text-gray-600'>
|
||||
To start using great tools, please, please
|
||||
<a href='/dashboard' className='fw-bolder'>
|
||||
{' '}
|
||||
Create Team Platform
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {Step5}
|
||||
Reference in New Issue
Block a user