coffee-ts/components/forms/contact/ContactForm.tsx

import { Box, Button, Paper, TextField } from '@mui/material';
import { useFormik } from 'formik';
import React, { useState, FC } from 'react';
import { contactSchema } from '../../../schemas/contactSchema';
import { useCheckoutData } from '../../../store/checkout-context';
import ErrorMessageComponent from '../../mui/ErrorMessageComponent';

interface Props {
  submitHandler: (x: string) => void;
}
const ContactForm: FC<Props> = ({ submitHandler }) => {
  const [error] = useState({ hasError: false, errorMessage: '' });
  const { checkoutStorage } = useCheckoutData();

  const handleSubmit = async (values: { email: string }) => {
    submitHandler(values.email);
  };

  const formik = useFormik({
    initialValues: {
      email: checkoutStorage ? checkoutStorage.userInfo.email : '',
    },
    validationSchema: contactSchema,
    onSubmit: handleSubmit,
    validateOnBlur: true,
    enableReinitialize: true,
  });

  return (
    <Paper
      sx={{ p: 3, width: '90%', ml: 12, mt: 2, backgroundColor: '#f2f2f2' }}
      elevation={3}
    >
      <Box
        sx={{
          width: '100%',
          display: 'flex',
          flexDirection: 'column',
        }}
      >
        {error.hasError && <ErrorMessageComponent error={error.errorMessage} />}
        <Box
          component="form"
          onSubmit={formik.handleSubmit}
          sx={{ position: 'relative', mt: 1, p: 1 }}
        >
          <TextField
            name="email"
            label="Email"
            margin="normal"
            value={formik.values.email}
            onChange={formik.handleChange}
            error={formik.touched.email && Boolean(formik.errors.email)}
            helperText={formik.touched.email && formik.errors.email}
            fullWidth
          />
          <Button
            type="submit"
            variant="contained"
            sx={{
              mt: 3,
              mb: 2,
              backgroundColor: '#CBA213',
              height: 50,
              width: 150,
              textTransform: 'none',
              color: 'white',
            }}
          >
            Submit Details
          </Button>
        </Box>
      </Box>
    </Paper>
  );
};

export default ContactForm;