// ** React Imports
import { useState } from 'react'
// ** MUI Imports
import Card from '@mui/material/Card'
import Step from '@mui/material/Step'
import Divider from '@mui/material/Divider'
import { styled } from '@mui/material/styles'
import StepLabel from '@mui/material/StepLabel'
import Typography from '@mui/material/Typography'
import CardContent from '@mui/material/CardContent'
import MuiStepper, { StepperProps } from '@mui/material/Stepper'
// ** Icon Imports
import Icon from 'src/@core/components/icon'
// ** Step Components
import StepCart from 'src/views/pages/wizard-examples/checkout/StepCart'
import StepAddress from 'src/views/pages/wizard-examples/checkout/StepAddress'
import StepPayment from 'src/views/pages/wizard-examples/checkout/StepPayment'
import StepConfirmation from 'src/views/pages/wizard-examples/checkout/StepConfirmation'
// ** Styled Components
import StepperWrapper from 'src/@core/styles/mui/stepper'
const steps = [
{
title: 'Cart',
icon: (
)
},
{
title: 'Address',
icon: (
)
},
{
title: 'Payment',
icon: (
)
},
{
title: 'Confirmations',
icon: (
)
}
]
const Stepper = styled(MuiStepper)(({ theme }) => ({
margin: 'auto',
maxWidth: 800,
justifyContent: 'space-around',
'& .MuiStep-root': {
cursor: 'pointer',
textAlign: 'center',
paddingBottom: theme.spacing(8),
'& .step-title': {
fontSize: '1rem'
},
'&.Mui-completed + svg': {
color: theme.palette.primary.main
},
'& + svg': {
display: 'none',
color: theme.palette.text.disabled
},
'& .MuiStepLabel-label': {
display: 'flex',
cursor: 'pointer',
alignItems: 'center',
svg: {
marginRight: theme.spacing(1.5),
fill: theme.palette.text.primary
},
'&.Mui-active, &.Mui-completed': {
'& .MuiTypography-root': {
color: theme.palette.primary.main
},
'& svg': {
fill: theme.palette.primary.main
}
}
},
[theme.breakpoints.up('md')]: {
paddingBottom: 0,
'& + svg': {
display: 'block'
},
'& .MuiStepLabel-label': {
display: 'block'
}
}
}
}))
const CheckoutWizard = () => {
// ** States
const [activeStep, setActiveStep] = useState(0)
// Handle Stepper
const handleNext = () => {
setActiveStep(activeStep + 1)
}
const getStepContent = (step: number) => {
switch (step) {
case 0:
return
case 1:
return
case 2:
return
case 3:
return
default:
return null
}
}
const renderContent = () => {
return getStepContent(activeStep)
}
return (
}>
{steps.map((step, index) => {
return (
setActiveStep(index)} sx={{}}>
}>
{step.icon}
{step.title}
)
})}
{renderContent()}
)
}
export default CheckoutWizard