feat(Translation): enhance product dialogs and update translation model

- Added new translation files for product dialogs to support additional languages.
- Refactored various components to utilize translation functions for error messages, labels, and placeholders, enhancing localization support.

src/components/ArticleAvailabilityForm.js

@@ -79,7 +79,7 @@ class ArticleAvailabilityForm extends Component {
         } else {
           this.setState({ 
             loading: false,
-            error: response.error || 'Ein Fehler ist aufgetreten'
+            error: response.error || this.props.t("productDialogs.errorGeneric")
           });
         }
         
@@ -114,20 +114,21 @@ class ArticleAvailabilityForm extends Component {
 
   render() {
     const { name, email, telegramId, notificationMethod, message, loading, success, error } = this.state;
+    const { t } = this.props;
 
     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
+          {t("productDialogs.availabilityTitle")}
         </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.
+          {t("productDialogs.availabilitySubtitle")}
         </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.
+            {notificationMethod === 'email' ? t("productDialogs.availabilitySuccessEmail") : t("productDialogs.availabilitySuccessTelegram")}
           </Alert>
         )}
 
@@ -139,18 +140,18 @@ class ArticleAvailabilityForm extends Component {
 
         <Box component="form" onSubmit={this.handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
           <TextField
-            label="Name"
+            label={t("productDialogs.nameLabel")}
             value={name}
             onChange={this.handleInputChange('name')}
             required
             fullWidth
             disabled={loading}
-            placeholder="Ihr Name"
+            placeholder={t("productDialogs.namePlaceholder")}
           />
 
           <FormControl component="fieldset" disabled={loading}>
             <FormLabel component="legend" sx={{ mb: 1 }}>
-              Wie möchten Sie benachrichtigt werden?
+              {t("productDialogs.notificationMethodLabel")}
             </FormLabel>
             <RadioGroup
               value={notificationMethod}
@@ -160,51 +161,51 @@ class ArticleAvailabilityForm extends Component {
               <FormControlLabel 
                 value="email" 
                 control={<Radio />} 
-                label="E-Mail" 
+                label={t("productDialogs.emailLabel")}
               />
               <FormControlLabel 
                 value="telegram" 
                 control={<Radio />} 
-                label="Telegram Bot" 
+                label={t("productDialogs.telegramBotLabel")}
               />
             </RadioGroup>
           </FormControl>
           
           {notificationMethod === 'email' && (
             <TextField
-              label="E-Mail"
+              label={t("productDialogs.emailLabel")}
               type="email"
               value={email}
               onChange={this.handleInputChange('email')}
               required
               fullWidth
               disabled={loading}
-              placeholder="ihre.email@example.com"
+              placeholder={t("productDialogs.emailPlaceholder")}
             />
           )}
 
           {notificationMethod === 'telegram' && (
             <TextField
-              label="Telegram ID"
+              label={t("productDialogs.telegramIdLabel")}
               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"
+              placeholder={t("productDialogs.telegramPlaceholder")}
+              helperText={t("productDialogs.telegramHelper")}
             />
           )}
           
           <TextField
-            label="Nachricht (optional)"
+            label={t("productDialogs.messageLabel")}
             value={message}
             onChange={this.handleInputChange('message')}
             fullWidth
             multiline
             rows={3}
             disabled={loading}
-            placeholder="Zusätzliche Informationen oder Fragen..."
+            placeholder={t("productDialogs.messagePlaceholder")}
           />
           
           <Button
@@ -225,10 +226,10 @@ class ArticleAvailabilityForm extends Component {
             {loading ? (
               <>
                 <CircularProgress size={20} sx={{ mr: 1 }} />
-                Wird gesendet...
+                {t("productDialogs.sending")}
               </>
             ) : (
-              'Verfügbarkeit anfragen'
+              t("productDialogs.submitAvailability")
             )}
           </Button>
         </Box>