286 أسطر
12 KiB
JavaScript
286 أسطر
12 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import {
|
|
Box,
|
|
Typography,
|
|
Stack,
|
|
Button,
|
|
useTheme,
|
|
TextField,
|
|
FormControlLabel,
|
|
RadioGroup,
|
|
Radio
|
|
} from '@mui/material';
|
|
|
|
const RequiredEquipments = ({ currentStepIndex = 0, onNext, onBack, formData, updateFormData }) => {
|
|
const theme = useTheme();
|
|
const [errors, setErrors] = useState({});
|
|
|
|
// تعيين القيمة الافتراضية لـ needSpecializedEquipment إذا غير موجودة
|
|
useEffect(() => {
|
|
if (!formData.needSpecializedEquipment) {
|
|
updateFormData({ needSpecializedEquipment: 'no' });
|
|
}
|
|
}, [formData.needSpecializedEquipment, updateFormData]);
|
|
|
|
// التعامل مع تغير القيمة النصية للمعدات العامة
|
|
const handleEquipmentChange = (e) => {
|
|
updateFormData({ equipment: e.target.value });
|
|
};
|
|
|
|
|
|
const handleNeedSpecializedChange = (e) => {
|
|
updateFormData({ needSpecializedEquipment: e.target.value });
|
|
};
|
|
|
|
// التعامل مع القيمة النصية للمعدات المتخصصة
|
|
const handleSpecializedEquipmentChange = (e) => {
|
|
updateFormData({ specialized_equipment: e.target.value });
|
|
};
|
|
|
|
// دالة التحقق من صحة الحقول
|
|
const validate = () => {
|
|
let tempErrors = {};
|
|
|
|
// if (!formData.equipment || formData.equipment.trim() === '') {
|
|
// tempErrors.equipment = 'Equipment is required';
|
|
// }
|
|
// if (!formData.needSpecializedEquipment || (formData.needSpecializedEquipment !== 'yes' && formData.needSpecializedEquipment !== 'no')) {
|
|
// tempErrors.needSpecializedEquipment = 'Please select Yes or No';
|
|
// }
|
|
if (formData.needSpecializedEquipment === 'yes' && (!formData.specialized_equipment || formData.specialized_equipment.trim() === '')) {
|
|
tempErrors.specialized_equipment = 'Please specify specialized equipments';
|
|
}
|
|
|
|
setErrors(tempErrors);
|
|
return Object.keys(tempErrors).length === 0;
|
|
};
|
|
|
|
// دالة معالجة الضغط على زر Next مع تحقق الفالديشن
|
|
const handleNext = () => {
|
|
if (validate()) {
|
|
onNext();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
height: { xs: '90%', sm: '100%', md: 740 },
|
|
backgroundColor: '#FFFFFF',
|
|
px: 4,
|
|
pt: { xs: 4, md: 4.5 },
|
|
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'
|
|
}
|
|
}}
|
|
>
|
|
Required Equipments
|
|
</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>
|
|
|
|
{/* Equipment Input */}
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
|
<Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
|
|
Equipment
|
|
</Typography>
|
|
<TextField
|
|
placeholder="Ovens Refrigerators Pizza Machines |"
|
|
variant="outlined"
|
|
fullWidth
|
|
value={formData.equipment || ''}
|
|
onChange={handleEquipmentChange}
|
|
error={!!errors.equipment}
|
|
helperText={errors.equipment}
|
|
sx={{
|
|
'& input': { fontWeight: 500, fontSize: '15px' },
|
|
'& input::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>
|
|
|
|
{/* Need Specialized Equipment */}
|
|
<Box>
|
|
<Typography
|
|
variant="body2"
|
|
sx={{ fontWeight: 500, fontSize: '16px', mb: 1, mt: 2, color: '#191635' }}
|
|
>
|
|
Need Specialized Equipment
|
|
</Typography>
|
|
<RadioGroup
|
|
row
|
|
name="needSpecializedEquipment"
|
|
value={formData.needSpecializedEquipment || 'no'}
|
|
onChange={handleNeedSpecializedChange}
|
|
>
|
|
<FormControlLabel
|
|
value="yes"
|
|
control={
|
|
<Radio
|
|
sx={{
|
|
color: 'rgba(150, 155, 167, 0.6)',
|
|
transform: 'scale(0.85)',
|
|
'&.Mui-checked': {
|
|
color: theme.palette.primary.main
|
|
}
|
|
}}
|
|
/>
|
|
}
|
|
label="Yes"
|
|
/>
|
|
<FormControlLabel
|
|
value="no"
|
|
control={
|
|
<Radio
|
|
sx={{
|
|
pl: 5,
|
|
color: 'rgba(150, 155, 167, 0.6)',
|
|
transform: 'scale(0.85)',
|
|
'&.Mui-checked': {
|
|
color: theme.palette.primary.main
|
|
}
|
|
}}
|
|
/>
|
|
}
|
|
label="No"
|
|
/>
|
|
</RadioGroup>
|
|
{errors.needSpecializedEquipment && (
|
|
<Typography color="error" variant="caption" sx={{ mt: 0.5 }}>
|
|
{errors.needSpecializedEquipment}
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
|
|
{/* Specialized Equipments For Food Preparation */}
|
|
{formData.needSpecializedEquipment === 'yes' && (
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
|
<Typography variant="body2" sx={{ fontWeight: 500, fontSize: '16px' }}>
|
|
Specialized Equipments For Food Preparation
|
|
</Typography>
|
|
<TextField
|
|
placeholder="Knife Spoon Handle |"
|
|
variant="outlined"
|
|
fullWidth
|
|
multiline
|
|
minRows={3}
|
|
value={formData.specialized_equipment || ''}
|
|
onChange={handleSpecializedEquipmentChange}
|
|
error={!!errors.specialized_equipment}
|
|
helperText={errors.specialized_equipment
|
|
}
|
|
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={handleNext}
|
|
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>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default RequiredEquipments;
|