coffee-ts/components/shipping-content/shipping-modal/ShippingModal.tsx

import { Modal } from '@mui/material';
import { Box } from '@mui/system';
import ContactForm from '../../forms/contact/ContactForm';
import ShippingDetailsForm, {
  FormValues,
} from '../../forms/shipping-details/ShippingDetailsForm';
import { FC } from 'react';
import { ShippingData } from '../../../utils/interface/orderInterface';

interface Props {
  open: { isOpen: boolean; type: string };
  handleClose: () => void;
  handleChangeShipping: (x: ShippingData | FormValues) => void;
  handleChangeContact: (values: string) => void;
}

const ShippingModal: FC<Props> = ({
  open,
  handleClose,
  handleChangeShipping,
  handleChangeContact,
}) => {
  return (
    <Modal
      open={open.isOpen}
      onClose={handleClose}
      aria-labelledby="modal-modal-title"
      aria-describedby="modal-modal-description"
    >
      <Box
        sx={{
          width: { xs: '90%', md: '50%' },
          top: '50%',
          left: '50%',
          position: 'absolute',
          transform: 'translate(-50%, -50%)',
        }}
      >
        {open.type === 'Shipping' && (
          <ShippingDetailsForm
            submitHandler={handleChangeShipping}
            backBtn={false}
            isCheckout={false}
            enableBtn={true}
          />
        )}
        {open.type === 'Contact' && (
          <ContactForm submitHandler={handleChangeContact} />
        )}
      </Box>
    </Modal>
  );
};

export default ShippingModal;