coffee/components/forms/shipping-details/ShippingDetailsForm.jsx

import { Box, Button, Paper, TextField } from '@mui/material';
import { useFormik } from 'formik';
import PropType from 'prop-types';
import { useState } from 'react';
import { shippingDetailsSchema } from '../../../schemas/shippingDetailsSchema';
import ErrorMessageComponent from '../../mui/ErrorMessageComponent';

const ShippingDetailsForm = ({ backBtn = false }) => {
  const [error] = useState({ hasError: false, errorMessage: '' });

  const submitHandler = async (values) => {
    console.log(values);
  };

  const formik = useFormik({
    initialValues: {
      fullName: '',
      email: '',
      address: '',
      address2: '',
      city: '',
      country: '',
      poostalCode: '',
    },
    validationSchema: shippingDetailsSchema,
    onSubmit: submitHandler,
    validateOnBlur: true,
    enableReinitialize: true,
  });

  return (
    <Paper
      sx={{ p: 3, width: '90%', ml: 12, 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}
            autoFocus
            fullWidth
          />
          <TextField
            name="fullName"
            label="Name"
            margin="normal"
            value={formik.values.fullName}
            onChange={formik.handleChange}
            error={formik.touched.fullName && Boolean(formik.errors.fullName)}
            helperText={formik.touched.fullName && formik.errors.fullName}
            fullWidth
          />
          <TextField
            name="address"
            label="Address"
            margin="normal"
            value={formik.values.address}
            onChange={formik.handleChange}
            error={formik.touched.address && Boolean(formik.errors.address)}
            helperText={formik.touched.address && formik.errors.address}
            fullWidth
          />
          <TextField
            name="address2"
            label="Address Line 2"
            margin="normal"
            value={formik.values.address2}
            onChange={formik.handleChange}
            error={formik.touched.address2 && Boolean(formik.errors.address2)}
            helperText={formik.touched.address2 && formik.errors.address2}
            fullWidth
          />
          <TextField
            name="city"
            label="City"
            margin="normal"
            value={formik.values.city}
            onChange={formik.handleChange}
            error={formik.touched.city && Boolean(formik.errors.city)}
            helperText={formik.touched.city && formik.errors.city}
            fullWidth
          />
          <Box sx={{ display: 'flex' }}>
            <TextField
              name="country"
              label="Country"
              margin="normal"
              value={formik.values.country}
              onChange={formik.handleChange}
              error={formik.touched.country && Boolean(formik.errors.country)}
              helperText={formik.touched.country && formik.errors.country}
              fullWidth
              sx={{ mr: 1.5 }}
            />
            <TextField
              name="city"
              label="City"
              margin="normal"
              value={formik.values.city}
              onChange={formik.handleChange}
              error={formik.touched.city && Boolean(formik.errors.city)}
              helperText={formik.touched.city && formik.errors.city}
              fullWidth
            />
          </Box>

          {backBtn && (
            <Button
              variant="contained"
              sx={{
                mt: 3,
                mb: 2,
                height: 50,
                width: 150,
                textTransform: 'none',
                backgroundColor: 'primary.main',
                color: 'white',
                mr: 2,
              }}
            >
              Back to cart
            </Button>
          )}
          <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>
  );
};

ShippingDetailsForm.propTypes = {
  backBtn: PropType.Boolean,
};

export default ShippingDetailsForm;