نسخ من RaghadAlkhous/RestaurantDash
152 أسطر
5.8 KiB
JavaScript
152 أسطر
5.8 KiB
JavaScript
import React, { useState } from 'react';
|
|
import {
|
|
Box,
|
|
Typography,
|
|
Stack,
|
|
Button,
|
|
useTheme,
|
|
TextField
|
|
} from '@mui/material';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import ConfirmationDialog from './ConfirmationDialog'; // ✅ استدعاء المودال المنفصل
|
|
|
|
const AdditionalNotes = ({ currentStepIndex = 0, onNext, onBack }) => {
|
|
const theme = useTheme();
|
|
const navigate = useNavigate();
|
|
const [openModal, setOpenModal] = useState(false);
|
|
|
|
const handleOpenModal = () => setOpenModal(true);
|
|
const handleCloseModal = () => setOpenModal(false);
|
|
const handleConfirmNext = () => {
|
|
handleCloseModal();
|
|
onNext();
|
|
};
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
height: { xs: '90%', sm: '100%', md: 740 },
|
|
backgroundColor: '#FFFFFF',
|
|
px: 4,
|
|
pt: { xs: 4, md: 11 },
|
|
pb: 10,
|
|
display: 'block',
|
|
borderRadius: 2,
|
|
boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
|
|
position: 'relative',
|
|
width: { xs: '85%', sm: '90%' },
|
|
}}
|
|
>
|
|
<Stack spacing={2.5}>
|
|
<Typography fontWeight={700} sx={{
|
|
fontSize: { xs: '1.8rem', sm: '2rem', md: '2.2rem' }
|
|
}}>
|
|
Additional Notes
|
|
</Typography>
|
|
|
|
<Box sx={{ width: '70%' }}>
|
|
<Typography fontSize="16px" color="text.secondary" fontWeight={500} sx={{ pb: 1 }}>
|
|
Enter your basic information to proceed to registration of your own restaurant on this platform
|
|
</Typography>
|
|
</Box>
|
|
|
|
{/*Notes / Concerns Input */}
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
|
<Typography variant="body2" sx={{ fontWeight: 500, fontSize: '16px' }}>
|
|
Notes / Concerns
|
|
</Typography>
|
|
<TextField
|
|
placeholder="Write for us"
|
|
variant="outlined"
|
|
fullWidth
|
|
multiline
|
|
minRows={7}
|
|
sx={{
|
|
'& .MuiInputBase-root': {
|
|
fontWeight: 500,
|
|
fontSize: '15px',
|
|
alignItems: 'start',
|
|
},
|
|
'& textarea::placeholder': {
|
|
color: '#969BA7',
|
|
},
|
|
'& .MuiOutlinedInput-root': {
|
|
borderRadius: '10px',
|
|
transition: '0.3s',
|
|
'&.Mui-focused fieldset': {
|
|
borderColor: theme.palette.primary.main,
|
|
boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)',
|
|
},
|
|
},
|
|
'& .MuiOutlinedInput-root.Mui-focused': {
|
|
borderColor: '#3f51b5',
|
|
boxShadow: '0 0 0 2px rgba(63,81,181,0.1)',
|
|
}
|
|
}}
|
|
/>
|
|
</Box>
|
|
|
|
|
|
{/* Buttons */}
|
|
<Box sx={{ pt: 2 }}>
|
|
<Button
|
|
variant="contained"
|
|
fullWidth
|
|
onClick={handleOpenModal}
|
|
sx={{
|
|
fontFamily: 'PlusJakartaSans',
|
|
fontWeight: 600,
|
|
fontSize: { xs: '14px', sm: '16px' },
|
|
height: { xs: '45px', sm: '52px' },
|
|
borderRadius: '50px',
|
|
textTransform: 'none',
|
|
color: 'white',
|
|
backgroundColor: theme.palette.primary.main,
|
|
'&:hover': {
|
|
backgroundColor: theme.palette.primary.hover
|
|
}
|
|
}}
|
|
>
|
|
Next
|
|
</Button>
|
|
|
|
<Button
|
|
variant="outlined"
|
|
fullWidth
|
|
onClick={onBack}
|
|
sx={{
|
|
mt: 2,
|
|
fontFamily: 'PlusJakartaSans',
|
|
fontWeight: 600,
|
|
fontSize: { xs: '14px', sm: '16px' },
|
|
height: { xs: '45px', sm: '52px' },
|
|
borderRadius: '50px',
|
|
textTransform: 'none',
|
|
display: { xs: 'block', sm: 'block', md: 'none' },
|
|
borderColor: theme.palette.primary.main,
|
|
color: theme.palette.primary.main,
|
|
'&:hover': {
|
|
backgroundColor: theme.palette.primary.light,
|
|
borderColor: theme.palette.primary.main,
|
|
}
|
|
}}
|
|
>
|
|
Back
|
|
</Button>
|
|
</Box>
|
|
</Stack>
|
|
|
|
{/* ✅ Confirmation Modal */}
|
|
<ConfirmationDialog
|
|
open={openModal}
|
|
onClose={handleCloseModal}
|
|
onConfirm={handleConfirmNext}
|
|
title="Confirm Submission"
|
|
description="Are you sure you want to proceed to the next step?"
|
|
/>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default AdditionalNotes;
|