I am working on a small table reservation application for a restaurant. For this I used e Stepper from Material UI. On the first step : you have to get the date and the available table and continue the reservation. The problem is that I could not get the data from the selected table and date time, and I could not move to the second step. Here is the code of the checkout and the github link of the project. Anybody have a clearer idea about the solution?
Thanks in advance,
import React, { useState } from 'react';
import {
Stepper,
Step,
StepLabel,
Button,
Typography,
CircularProgress
} from '@material-ui/core';
import { Formik, Form } from 'formik';
import AddressForm from './Forms/AddressForm';
//import PaymentForm from './Forms/PaymentForm';
import ReservationForm from './Forms/ReservationForm';
import Summary from './Forms/Summary';
import CheckoutSuccess from './CheckoutSuccess';
import validationSchema from './FormModel/validationSchema';
import checkoutFormModel from './FormModel/checkoutFormModel';
import formInitialValues from './FormModel/formInitialValues';
import useStyles from './styles';
const steps = ['Book your table', 'Personal information', 'Summary'];
const { formId, formField } = checkoutFormModel;
function _renderStepContent(step) {
switch (step) {
case 0:
return <ReservationForm formField={formField} />;
case 1:
return <AddressForm formField={formField} />;
case 2:
return <Summary />;
default:
return <div>Not Found</div>;
}
}
export default function CheckoutPage() {
const classes = useStyles();
const [activeStep, setActiveStep] = useState(0);
const currentValidationSchema = validationSchema[activeStep];
const isLastStep = activeStep === steps.length - 1;
function _sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function _submitForm(values, actions) {
await _sleep(1000);
alert(JSON.stringify(values, null, 2));
actions.setSubmitting(false);
setActiveStep(activeStep + 1);
}
function _handleSubmit(values, actions) {
if (isLastStep) {
_submitForm(values, actions);
} else {
setActiveStep(activeStep + 1);
actions.setTouched({});
actions.setSubmitting(false);
}
}
function _handleBack() {
setActiveStep(activeStep - 1);
}
return (
<React.Fragment>
<Typography component="h1" variant="h4" align="center">
Checkout
</Typography>
<Stepper activeStep={activeStep} className={classes.stepper}>
{steps.map(label => (
<Step key={label}>
<StepLabel>{label}</StepLabel>
</Step>
))}
</Stepper>
<React.Fragment>
{activeStep === steps.length ? (
<CheckoutSuccess />
) : (
<Formik
initialValues={formInitialValues}
validationSchema={currentValidationSchema}
onSubmit={_handleSubmit}
>
{({ isSubmitting }) => (
<Form id={formId}>
{_renderStepContent(activeStep)}
<div className={classes.buttons}>
{activeStep !== 0 && (
<Button onClick={_handleBack} className={classes.button}>
Back
</Button>
)}
<div className={classes.wrapper}>
<Button
disabled={isSubmitting}
type="submit"
variant="contained"
color="primary"
className={classes.button}
>
{isLastStep ? 'Place order' : 'Next'}
</Button>
{isSubmitting && (
<CircularProgress
size={24}
className={classes.buttonProgress}
/>
)}
</div>
</div>
</Form>
)}
</Formik>
)}
</React.Fragment>
</React.Fragment>
);
}