Add article interaction forms: Implemented ArticleAvailabilityForm, ArticleQuestionForm, and ArticleRatingForm components for user inquiries, ratings, and availability requests. Integrated photo upload functionality and enhanced user experience with collapsible sections in ProductDetailPage for better interaction with product details.
This commit is contained in:
sebseb7
242
src/components/ArticleAvailabilityForm.js
Normal file
242
src/components/ArticleAvailabilityForm.js
Normal file
@@ -0,0 +1,242 @@
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
TextField,
|
||||
Button,
|
||||
Paper,
|
||||
Alert,
|
||||
CircularProgress,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
RadioGroup,
|
||||
FormControlLabel,
|
||||
Radio
|
||||
} from '@mui/material';
|
||||
import { withI18n } from '../i18n/withTranslation.js';
|
||||
|
||||
class ArticleAvailabilityForm extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
name: '',
|
||||
email: '',
|
||||
telegramId: '',
|
||||
notificationMethod: 'email',
|
||||
message: '',
|
||||
loading: false,
|
||||
success: false,
|
||||
error: null
|
||||
};
|
||||
}
|
||||
|
||||
handleInputChange = (field) => (event) => {
|
||||
this.setState({ [field]: event.target.value });
|
||||
};
|
||||
|
||||
handleNotificationMethodChange = (event) => {
|
||||
this.setState({
|
||||
notificationMethod: event.target.value,
|
||||
// Clear the other field when switching methods
|
||||
email: event.target.value === 'email' ? this.state.email : '',
|
||||
telegramId: event.target.value === 'telegram' ? this.state.telegramId : ''
|
||||
});
|
||||
};
|
||||
|
||||
handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
// Prepare data for API emission
|
||||
const availabilityData = {
|
||||
type: 'availability_inquiry',
|
||||
productId: this.props.productId,
|
||||
productName: this.props.productName,
|
||||
name: this.state.name,
|
||||
notificationMethod: this.state.notificationMethod,
|
||||
email: this.state.notificationMethod === 'email' ? this.state.email : '',
|
||||
telegramId: this.state.notificationMethod === 'telegram' ? this.state.telegramId : '',
|
||||
message: this.state.message,
|
||||
timestamp: new Date().toISOString()
|
||||
};
|
||||
|
||||
// Emit data via socket
|
||||
console.log('Availability Inquiry Data to emit:', availabilityData);
|
||||
|
||||
if (this.props.socket) {
|
||||
this.props.socket.emit('availability_inquiry_submit', availabilityData);
|
||||
|
||||
// Set up response handler
|
||||
this.props.socket.once('availability_inquiry_response', (response) => {
|
||||
if (response.success) {
|
||||
this.setState({
|
||||
loading: false,
|
||||
success: true,
|
||||
name: '',
|
||||
email: '',
|
||||
telegramId: '',
|
||||
notificationMethod: 'email',
|
||||
message: ''
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
loading: false,
|
||||
error: response.error || 'Ein Fehler ist aufgetreten'
|
||||
});
|
||||
}
|
||||
|
||||
// Clear messages after 3 seconds
|
||||
setTimeout(() => {
|
||||
this.setState({ success: false, error: null });
|
||||
}, 3000);
|
||||
});
|
||||
}
|
||||
|
||||
this.setState({ loading: true });
|
||||
|
||||
// Fallback timeout in case backend doesn't respond
|
||||
setTimeout(() => {
|
||||
if (this.state.loading) {
|
||||
this.setState({
|
||||
loading: false,
|
||||
success: true,
|
||||
name: '',
|
||||
email: '',
|
||||
telegramId: '',
|
||||
notificationMethod: 'email',
|
||||
message: ''
|
||||
});
|
||||
|
||||
// Clear success message after 3 seconds
|
||||
setTimeout(() => {
|
||||
this.setState({ success: false });
|
||||
}, 3000);
|
||||
}
|
||||
}, 5000);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { name, email, telegramId, notificationMethod, message, loading, success, error } = this.state;
|
||||
|
||||
return (
|
||||
<Paper id="availability-form" sx={{ p: 3, mt: 4, borderRadius: 2, boxShadow: "0 2px 8px rgba(0,0,0,0.08)" }}>
|
||||
<Typography variant="h5" gutterBottom sx={{ fontWeight: 600, color: '#333' }}>
|
||||
Verfügbarkeit anfragen
|
||||
</Typography>
|
||||
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
|
||||
Dieser Artikel ist derzeit nicht verfügbar. Gerne informieren wir Sie, sobald er wieder lieferbar ist.
|
||||
</Typography>
|
||||
|
||||
{success && (
|
||||
<Alert severity="success" sx={{ mb: 3 }}>
|
||||
Vielen Dank für Ihre Anfrage! Wir werden Sie {notificationMethod === 'email' ? 'per E-Mail' : 'über Telegram'} informieren, sobald der Artikel wieder verfügbar ist.
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<Alert severity="error" sx={{ mb: 3 }}>
|
||||
{error}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Box component="form" onSubmit={this.handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<TextField
|
||||
label="Name"
|
||||
value={name}
|
||||
onChange={this.handleInputChange('name')}
|
||||
required
|
||||
fullWidth
|
||||
disabled={loading}
|
||||
placeholder="Ihr Name"
|
||||
/>
|
||||
|
||||
<FormControl component="fieldset" disabled={loading}>
|
||||
<FormLabel component="legend" sx={{ mb: 1 }}>
|
||||
Wie möchten Sie benachrichtigt werden?
|
||||
</FormLabel>
|
||||
<RadioGroup
|
||||
value={notificationMethod}
|
||||
onChange={this.handleNotificationMethodChange}
|
||||
row
|
||||
>
|
||||
<FormControlLabel
|
||||
value="email"
|
||||
control={<Radio />}
|
||||
label="E-Mail"
|
||||
/>
|
||||
<FormControlLabel
|
||||
value="telegram"
|
||||
control={<Radio />}
|
||||
label="Telegram Bot"
|
||||
/>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
|
||||
{notificationMethod === 'email' && (
|
||||
<TextField
|
||||
label="E-Mail"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={this.handleInputChange('email')}
|
||||
required
|
||||
fullWidth
|
||||
disabled={loading}
|
||||
placeholder="ihre.email@example.com"
|
||||
/>
|
||||
)}
|
||||
|
||||
{notificationMethod === 'telegram' && (
|
||||
<TextField
|
||||
label="Telegram ID"
|
||||
value={telegramId}
|
||||
onChange={this.handleInputChange('telegramId')}
|
||||
required
|
||||
fullWidth
|
||||
disabled={loading}
|
||||
placeholder="@IhrTelegramName oder Telegram ID"
|
||||
helperText="Geben Sie Ihren Telegram-Benutzernamen (mit @) oder Ihre Telegram-ID ein"
|
||||
/>
|
||||
)}
|
||||
|
||||
<TextField
|
||||
label="Nachricht (optional)"
|
||||
value={message}
|
||||
onChange={this.handleInputChange('message')}
|
||||
fullWidth
|
||||
multiline
|
||||
rows={3}
|
||||
disabled={loading}
|
||||
placeholder="Zusätzliche Informationen oder Fragen..."
|
||||
/>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
disabled={loading || !name || (notificationMethod === 'email' && !email) || (notificationMethod === 'telegram' && !telegramId)}
|
||||
sx={{
|
||||
mt: 2,
|
||||
py: 1.5,
|
||||
fontSize: '1rem',
|
||||
fontWeight: 600,
|
||||
backgroundColor: 'warning.main',
|
||||
'&:hover': {
|
||||
backgroundColor: 'warning.dark'
|
||||
}
|
||||
}}
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<CircularProgress size={20} sx={{ mr: 1 }} />
|
||||
Wird gesendet...
|
||||
</>
|
||||
) : (
|
||||
'Verfügbarkeit anfragen'
|
||||
)}
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withI18n()(ArticleAvailabilityForm);
|
||||
Reference in New Issue
Block a user